Feature/initial website

.github/workflows/astrojs-ghpage.yaml

@@ -1,9 +1,9 @@
 name: GitHub Pages CI (Astro)
 on:
   push:
-    branches: main
+    branches: [ "main" ]
   pull_request:
-    branches: main
+    branches: [ "main" ]
   workflow_dispatch:
 
 permissions:

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Lex
+Copyright (c) 2019 Lex
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

deno.jsonc

@@ -1,5 +1,5 @@
 {
-	"name": "@<user_or_org>/<repo_name>",
+	"name": "@avonbied/avonbied.github.io",
 	"version": "1.0.0",
 	"license": "MIT",
 	"vendor": true,

src/assets/main.css

@@ -0,0 +1,151 @@
+body {
+	display: flex;
+	flex-flow: column nowrap;
+	min-height: 100vh;
+	/* background: radial-gradient(farthest-corner at 0px 100%, #10115b, transparent, #5b103b),
+	radial-gradient(farthest-corner at 100% 0px, #5b103b, transparent, #10115b),
+	black; */
+	background-color: #0D1117;
+}
+body, body * {
+	font-family: sans-serif;
+	overflow-wrap: break-word;
+}
+#pageContent {
+	position: relative;
+	flex: 1 0 100%;
+}
+body > footer {
+	text-align: center;
+}
+.section {
+	background-color: #ffffff;
+	width: 100%;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+#site_head {
+	position: sticky;
+	top: 0;
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	justify-items: flex-start;
+	align-items: center;
+	/* padding: 0 12px; */
+	box-shadow: 0 1px 2px #cdcdcd;
+}
+.nav_button, .nav_title {
+	font-size: 24px;
+	padding: 12px 24px 8px;
+	background-color: inherit;
+	transition: all ease-in 100ms;
+}
+.nav_button:hover {
+	background-color: rgba(0, 0, 0, 0.8);
+	color: whitesmoke;
+}
+#site_nav, .nav_title {
+	display: inline-block;
+}
+.card {
+	display: inline-flex;
+	flex-flow: column nowrap;
+	align-items: stretch;
+	justify-content: flex-start;
+	box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
+	border-radius: 4px;
+	transition: box-shadow 0.5s ease 0s;
+	overflow: hidden;
+}
+.card_section {
+	overflow: auto;
+	scrollbar-width: 8px;
+	margin: 0;
+	padding: 8px;
+}
+blockquote {
+	position: relative;
+	padding: 0.5em 20px;
+}
+blockquote::before, blockquote::after {
+	position: absolute;
+	font-size: 2em;
+	/* display: inline; */
+	width: fit-content;
+	margin: 0 0.1em;
+}
+blockquote::before {
+	top: 0.1em;
+	left: 5px;
+	content: open-quote;
+}
+blockquote::after {
+	bottom: 2px;
+	right:5px;
+	content: close-quote;
+}
+.box {
+	background-color: whitesmoke;
+	width: 300px;
+	height: 100px;
+	margin: 30px;
+}
+/*======= END-FINAL =======*/
+
+#banner {
+	display: flex;
+	padding: 10% 5% 5%;
+	flex-flow: row nowrap;
+	justify-content: space-around;
+	align-content: space-between;
+	font-family: Arial, Verdana, sans-serif;
+}
+.text_content {
+	color: white;
+}
+.text_content * {
+	padding: 4px 12px;
+	line-height: 1.5em;
+}
+.text_content span {
+	background-color: #028090 /*rgba(0, 64, 128, 0.9)*/;
+}
+h1 {
+	text-transform: uppercase;
+}
+
+#avatar {
+	width: 250px;
+	height: 250px;
+	border-radius: 16px;
+	overflow: hidden;
+	background-color: aqua;
+}
+
+
+
+nav > button {
+	font-size: 24px;
+	padding: 12px 16px 8px;
+	width: 72px;
+	background-color: inherit;
+	background: rgba(255,255,255,0.4);
+}
+
+nav > button:hover {
+	background-color: rgba(0, 0, 0, 0.25);
+}
+
+/* #copy { padding-left: 24em; text-align: center; } */
+/* #site_foot {
+	position: fixed;
+	left: 0; bottom: 0;
+	width: 100%;
+	background: linear-gradient(#efefef, #ffffff);
+	box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
+	padding: 0.5% 0;
+	display: flex; flex-direction: row;
+	justify-content: center; align-items: center;
+	font-weight: 600;
+}*/

src/components/CTA.astro

@@ -0,0 +1,64 @@
+---
+interface Props {
+	title: string;
+	href: string;
+}
+
+const { title, href } = Astro.props;
+---
+
+<aside>
+	<h2>{title}</h2>
+	<a href={href}><slot /></a>
+</aside>
+
+<style lang="scss">
+$accentColor: #589597;
+aside {
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: center;
+	align-items: center;
+	gap: 1rem;
+	padding: 3rem 1.5rem;
+	h2 {
+		font-size: 2em;
+		text-align: center;
+	}
+	a {
+		position: relative;
+		display: flex;
+		place-content: center;
+		gap: 0.8em;
+		text-align: center;
+		padding: 0.56em 2em;
+		border-radius: 2em;
+		text-decoration: none;
+		line-height: 1.1;
+		overflow: hidden;
+		white-space: nowrap;
+		background-color: $accentColor;
+		&:focus, &:hover {
+			background-color: #{$accentColor}ac;
+			text-decoration: 1px solid white underline;
+		}
+	}
+}
+
+@media (min-width: 50em) {
+	aside {
+		padding: 4rem;
+		flex-flow: row wrap;
+		justify-content: space-around;
+		gap: 2rem;
+		h2 {
+			font-size: 3em;
+			text-align: left;
+		}
+		a {
+			padding: 1.125rem 2.5rem;
+			font-size: 2em;
+		}
+	}
+}
+</style>

src/components/Card.astro

@@ -0,0 +1,86 @@
+---
+export interface Props {
+	title: string;
+	subtitle?: string;
+	image?: string;
+	isVertical?: boolean;
+}
+const {
+	title, subtitle, image, isVertical = false
+} = Astro.props;
+---
+
+<article class:list={[{ vertical: isVertical }]}>
+	{image && <img src={image} alt="" />}
+	<div class="card-content">
+		<header class="card-header">
+			<h3>{title ?? "Title Placeholder"}</h3>
+			{subtitle && <h4>{subtitle}</h4>}
+		</header>
+		<div>
+			<slot />
+		</div>
+	</div>
+</article>
+
+<style lang="scss">
+$imageWidth: 400px;
+$imageHeight: 400px;
+article {
+	display: flex;
+	flex-flow: column nowrap;
+	padding: 0;
+	max-width: $imageWidth;
+	background: #fff;
+	border-radius: 8px;
+	overflow: hidden;
+	img {
+		height: $imageHeight;
+		width: $imageWidth;
+	}
+	.card-content {
+		display: flex;
+		flex-flow: column nowrap;
+		:global(*) {
+			color: #000;
+		}
+		.card-header {
+			display: flex;
+			flex-flow: column;
+			background-color: #dddddd;
+			padding: 16px 16px 6px;
+			line-height: 1.1;
+			justify-content: center;
+			h3 { font-size: 24pt; }
+			h4 { font-size: 16pt; }
+		}
+		div {
+			padding: 6px 16px 8px;
+			flex: 1 1 100%;
+		}
+	}
+	&.vertical {
+		flex-flow: column;
+		.card-header {
+			text-align: center;
+			h3 {
+				order: 2;
+			}
+		}
+	}
+}
+@media only screen and (min-width: 60em) {
+	article {
+		flex-flow: row;
+		max-height: ($imageHeight * 1.25);
+		max-width: 110ch;
+		img {
+			width: ($imageWidth * 1.25);
+			height: ($imageHeight * 1.25);
+		}
+		.card-header {
+			h3 { font-size: 36pt; }
+		}
+	}
+}
+</style>