redo home page

assets/scss/base/mixins.scss

@@ -19,3 +19,24 @@
 	outline-color: var(--primary-accent);
 	outline-offset: 4px;
 }
+
+@function css-function( $function, $values... ) {
+	@return 
+		 $function
+		 + unquote( '(' )
+		 + $values
+		 + unquote( ')' )
+	;
+}
+
+@function css-min( $values... ) {
+	@return css-function( min, $values );
+}
+
+@function css-max( $values... ) {
+	@return css-function( max, $values );
+}
+
+@function css-clamp( $values... ) {
+	@return css-function( clamp, $values );
+}

assets/scss/content/index.scss

@@ -14,7 +14,6 @@
 		}
 		position: relative;
 		margin-bottom: 2em;
-
 	}
 	.subtitle {
 		font-size: 1.5em;
@@ -22,54 +21,70 @@
 		margin-bottom: 0.5em;
 		margin-top: 2em;
 	}
-	#bio {
+	.quotes {
-		.title:before {
+		color: #555;
-			content: 'bio';
+		padding: 2rem;
+		font-size: 1.25rem;
+		display: flex;
+		flex-flow: column;
+		justify-content: space-around;
+		line-height: 1.5;
+		gap: 4rem;
+		font-family: monospace;
 	}
-		.blurb {
+
-			line-height: 1.4;
+	#summary .container {
-			font-size: 1.1em;
-		}
-	}
-	#skills {
-		.container {
 		display: grid;
-			grid-template-columns: repeat(auto-fit,minmax(15em,1fr));
+		grid-template-columns: 1fr;
-			gap: 2em;
+		@media (min-width: 40rem) {
-		}
+			grid-template-columns: 18rem 1fr;
-		.title {grid-column: 1 / -1;}
-		.title:before {
-			content: 'skills';
-		}
-		.card {
-			display: grid;
-			grid-template-areas: "img" "title" "desc";
-			grid-template-rows: auto auto 1fr;
-			&__title {
-				grid-area: title;
-				font-weight: 700;
-				font-size: 1.1em;
-				line-height: 1.2;
-				margin: 0.5em 0;
-			}
-			&__desc {
-				grid-area: desc;
-				line-height: 1.4;
-			}
-			&__img {
-				width: 100%;
-				aspect-ratio: 16/9;
-				object-fit: contain;
-				grid-area: img;
-				border-radius: 1em;
-			}
-			&.sysadm .card__img {padding: 1em;}
 		}
 	}
 
-	#contact {
+	#birdsounds {
-		.title:before {
+		background: black;
-			content: 'contact';
+		color: white;
+		text-align: center;
+		> img {
+			max-height: 100vh;
+			height: 100%;
+			max-width: 100%;
+			object-fit: contain;
+			object-position: center bottom;
 		}
+		> div {
+			display: flex;
+			flex-flow: column;
+			align-items: center;
+		}
+		div img {
+			margin: 2rem 0;
+		}
+		display: flex;
+		flex-flow: column;
+		align-items: center;
+		@media (min-width: 40rem) {
+			> img {
+				height: 20rem;
+			}
+			flex-flow: row-reverse;
+			justify-content: space-between;
+			max-width: 40rem;
+		}
+		a {
+			color: white;
+			position: relative;
+			&:after {
+				content: '↗';
+				position: absolute;
+				right: -1em;
+				top: -1em;
+				color: white;
+			}
+		}
+	}
+	#updates {
+		line-height: 1.5;
+		font-size: 1.25rem;
 	}
 }

layouts/index.html

@@ -1,8 +1,7 @@
 {{ define "main" }}
 <main id="index">
-	<header class="" id="under-construction">
+	<header class="section" id="summary">
 		<div class="container">
-			<h1 class="title" style="margin-bottom: 0; margin-top: 1.5rem;">site under construction</h1>
 			<article class="vcard h-card">
 				<div class="banner"><img src="/images/people/avatar.png" alt="me" class="photo u-photo"></div>
 				<dl>
@@ -20,7 +19,30 @@
 					<dd class="note p-note">i have approximate knowledge of many things. perpetual student. (nb/ace/they)</dd>
 				</dl>
 			</article>
+			<div class="quotes">
+				<blockquote>
+					<p>it's scary how much you know.</p>
+				</blockquote>
+				<blockquote style="text-align: right">
+					<p>you're the first person i've met that keeps a spreadsheet of their lightbulbs.</p>
+				</blockquote>
+				<blockquote style="text-align: center">
+					<p>VERY MUCH not garbage [...] a worthwhile human</p>
+				</blockquote>
+			</div>
 		</div>
 	</header>
+	<section class="container" id="birdsounds">
+		<div class="">
+			<img src="/images/logos/koken_y.png" alt="birdsounds.media logo">
+			<a href="https://birdsounds.media" class="">view my photos</a>
+		</div>
+		<img src="/images/soulpunx.jpg" alt="#soulpunx">
+	</section>
+	<section class="section" id="updates">
+		<div class="container">
+			<p>currently: working on my websites, trying to do some documentation for an untitled social app project, and looking for work. check out the "work" tab of this site for my elevator pitch.</p>
+		</div>
+	</section>
 </main>
 {{ end }}