bigly styling update

src/Makefile

@@ -8,7 +8,7 @@ css-watch:
 	sass -w scss:css
 
 server:
-	python -m http.server
+	python -m http.server -b 127.0.0.1
 
 dev:
 	make -j 2 css-watch server

src/about.html

@@ -9,23 +9,24 @@
 		<div id="overlay"></div>
 		<main class="offset-grid--top--wide fullsize side-a">
 			<div>
-			<div class="flex column">
+			<div class="flex column-tight">
-				<h1>
+				<h1 class="ff-serif fs-700 padding-high-top">
 					About
 				</h1>
-				<h3>there used to be a subtitle here</h3>
+				<h3 class="ff-serif fs-500 padding-none-top">there used to be a subtitle here</h3>
-				<p>
+				<p class="ff-sans fs-300 padding-high-top">
 I'm not super keen on saying that much about myself on the <span class="waltuh-gradient">internet</span>.
 Here's some information about myself, posted on the aforementioned <span class="waltuh-gradient">internet</span>.
 				</p>
-				<p>
+				<p class="ff-sans fs-300 padding-mid-top">
 				I work for a pretty neat company as an associate robotic automation engineer.
 				(this means I am cool, I think.)				 
 				</p>
 			</div>
-			<div class="flex column">
+			<div class="flex column-tight">
-				<h1>Opinions</h1>
+				<h1 class="ff-serif fs-700 padding-high-top">Opinions</h1>
-				<h3>A 100% exhaustive list, of course</h3>
+				<h3 class="ff-serif fs-500 padding-none-top">A 100% exhaustive list, of course</h3>
+				<span class="ff-sans fs-300 padding-low-top">
 				<ul>
 				<li>
 				the modern internet is bloated
@@ -40,6 +41,7 @@ Here's some information about myself, posted on the aforementioned <span class="
 				<li>FluentControl whistle noise &#x1f525; &#x1F5E3;</li>
 				<li>&#129424 &#127844</li>
 				</ul>
+				</span>
 			</div>
 			</div>
 			</div>

src/cool-stuff/index.html

@@ -12,31 +12,36 @@
 	</div>
 	<main class="offset-grid--top--wide--column side-a">
 		<div>
-			<h1 class="gap-small-bottom">
+			<h1 class="ff-serif fs-700 gap-small-bottom">
 				Cool Stuff
 			</h1>
-			<h3 class="gap-mid-bottom">it's debatably cool</h3>
+			<h3 class="gap-mid-bottom ff-serif fs-500">it's debatably cool</h3>
+			<span class="ff-sans fs-300 span-full-width">
 			<p>
 				If a page uses/requires JavaScript (or WASM), its link will be marked with (&#x2615).
 				When relevant, a link to a Git repo will be provided (&#128187).
 				If content is useful for my job, it will be marked with
 				(&#x1f935;&#x200d;&#x2640;&#xfe0f;).
 			</p>
-			<h1 class="gap-small-bottom">
+			</span>
+			<h1 class="gap-small-bottom ff-serif fs-700">
 				the stuff
 			</h1>
-			<h3>
+			<h3 class="ff-serif fs-500">
 				Artisan Handcrafted
 			</h3>
+			<span class="ff-sans fs-300 span-full-width">
 			<ul>
-				<li><a href="plate-tool-beta">Plate tool</a> &#x2615
+				<li><a href="plate-tool-beta">Plate tool</a> 
-					<a href="https://git.ilia.moe/emilia/plate-tool">&#128187;
+					<a href="https://git.ilia.moe/emilia/plate-tool">&#x2615;&#128187;
 						&#x1f935;&#x200d;&#x2640;&#xfe0f;</a>
 				</li>
 			</ul>
-			<h3>
+			</span>
+			<h3 class="ff-serif fs-500 padding-low-top">
 				Static Generated (sometimes)
 			</h3>
+			<span class="ff-sans fs-300 span-full-width">
 			<ul>
 				<li><a href="recipes">Recipes</a>
 					<ul>
@@ -46,12 +51,13 @@
 				</li>
 				<li><a href="/pictures">Pictures</a>
 					<ul>
-					Password protected, and also linked from web root.
+					Password protected for your non-enjoyment.
 					intentionally bizarre pictures blasted onto your screen
 					by way of a terrible python pipeline.
 					</ul>
 				</li>
 			</ul>
+			</span>
 		</div>
 		<a href="../">
 		</a>

src/index.html

@@ -21,16 +21,18 @@
 	<div id="overlay"></div>
 <main class="offset-grid--top fullsize">
 	<div>
-		<h1 class="text-dark ff-serif fs-800 gap-large-bottom">
+		<h1 class="text-dark ff-mono fs-800 gap-large-bottom">
 			Em<span class="waltuh-gradient-underline">ilia</span>.
 		</h1>
+		<div class="ff-sans fs-400">
 		<p>allegedly an engineer???</p>
 		<p id="pgp_p">pgp:
 						<a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a" class="fixed">
 							8CBC 050E 7BBB 8779 ECCD  4207 4B33 E52E 3BD2 5455
 						</a>
 		</p>
-		<p>bottom text (now with extra spice&trade;)</p>
+		<p class="fs-100 padding-mid-top">bottom text (now with extra spice&trade;)</p>
+		</div>
 	</div>
 	<footer class="lock-bottom flex row">
 		<a title="about" href="about">

src/scss/about.scss

@@ -1,4 +1,4 @@
-@import "waltuh/waltuh";
+@use "waltuh/waltuh";
 
 h1 {
 	margin-top: 3vh;

src/scss/pictures.scss

@@ -1,4 +1,4 @@
-@import "waltuh/waltuh";
+@use "waltuh/waltuh";
 
 main {
 	grid-template-rows: 0.1fr 1fr 1fr !important; // Override default

src/scss/waltuh/_variables.scss

@@ -4,7 +4,8 @@
 $-color-white: hsl(280 30% 80%);
 $-color-dark:  color.adjust($-color-white, $lightness: -50%);
 $-color-light: hsl(190 80% 30%);
-$-ff-serif: "Inconsolata", monospace;
+$-ff-mono: "Inconsolata", monospace;
+$-ff-serif: "Playfair", serif;
 $-ff-sans: "Jost", sans-serif;
 $-fs-900: math.div(100rem, 16);
 
@@ -14,6 +15,7 @@ $-fs-900: math.div(100rem, 16);
   $color-light: $-color-light,
   $ff-serif: $-ff-serif,
   $ff-sans: $-ff-sans,
+  $ff-mono: $-ff-mono,
   $fs-900: $-fs-900
 );
 
@@ -30,4 +32,21 @@ $-fs-900: math.div(100rem, 16);
   src: url("/fonts/Jost.ttf");
 
   font-display: swap;
+  font-variation-settings: "wght" 300;
+}
+
+@font-face {
+  font-family: "Shantell";
+  src: url("/fonts/Shantell.ttf");
+
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Playfair";
+  src: url("/fonts/Playfair.ttf");
+
+  font-display: swap;
+  font-variation-settings: "wght" 300;
+  font-variation-settings: "wdth" 85;
 }

src/scss/waltuh/base.scss

@@ -30,10 +30,12 @@ $fs-500: math.div(28rem, 16) !default;
 $fs-400: math.div(24rem, 16) !default;
 $fs-300: math.div(18rem, 16) !default;
 $fs-200: math.div(16rem, 16) !default;
+$fs-100: math.div(12rem, 16) !default;
 
 $ff-serif: serif !default;
 $ff-sans-cond: sans-serif !default;
 $ff-sans: sans-serif !default;
+$ff-mono: monospace !default;
 
 /* --------------- */
 /* Utility Classes */
@@ -60,6 +62,11 @@ $ff-sans: sans-serif !default;
   max-width: 800px;
 }
 
+.column-tight {
+  @extend .column;
+  gap: 0rem;
+}
+
 .row {
   flex-direction: row;
   flex-wrap: wrap;
@@ -83,6 +90,10 @@ $ff-sans: sans-serif !default;
   bottom: 0%;
 }
 
+.span-full-width {
+  width: 100%;
+}
+
 /* Other */
 
 .hr::after { /* Add fake hr after header */
@@ -117,14 +128,30 @@ $ff-sans: sans-serif !default;
 .fs-400 { font-size: $fs-400; }
 .fs-300 { font-size: $fs-300; }
 .fs-200 { font-size: $fs-200; }
+.fs-100 { font-size: $fs-100; }
 
 .ff-serif { font-family: $ff-serif; }
 .ff-sans-cond { font-family: $ff-sans-cond; }
 .ff-sans { font-family: $ff-sans; }
+.ff-mono { font-family: $ff-mono; }
 
 .uppercase { text-transform: uppercase; }
 .lowercase { text-transform: lowercase; }
 
+/* Padding Classes */
+$padding-amounts: ("low": 0.5rem, "mid": 1rem, "high": 1.5rem, "none": 0rem);
+
+$padding-directions: "all", "top", "bottom", "left", "right";
+
+@each $amount-name, $amount-val in $padding-amounts {
+  @each $dir in $padding-directions {
+    .padding-#{$amount-name}-#{$dir} {
+      padding-#{$dir}: $amount-val;
+    }
+  }
+}
+
+
 /* Semantic Tags and Their Classes */
 
 header {