typo :(

girl it's 30 october what

.gitignore

@@ -1,4 +1,5 @@
 src/css/
+src/pictures
 push_updates.sh
 hugo/*/public/
 hugo/*/resources/_gen/

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "hugo/recipe/themes/ilia-hugo-theme"]
 	path = hugo/recipe/themes/ilia-hugo-theme
 	url = git@github.com:em-ilia/ilia-hugo-theme.git
+[submodule "hugo/recipe/themes/waltuh-hugo-theme"]
+	path = hugo/recipe/themes/waltuh-hugo-theme
+	url = https://git.ilia.moe/emilia/waltuh-hugo-theme

hugo/recipe/config.toml

@@ -1,7 +1,13 @@
 baseURL = 'https://ilia.moe/cool-stuff/recipes'
 languageCode = 'en-us'
 title = 'Recipes'
-theme = 'ilia-hugo-theme'
+theme = 'waltuh-hugo-theme'
 
 [taxonomies]
 tag = 'tags'
+
+[markup]
+[markup.goldmark]
+
+[markup.goldmark.renderer]
+unsafe = true

hugo/recipe/content/_index.md

@@ -3,3 +3,13 @@ title: "Recipes"
 ---
 
 # Recipes
+### Seldom updated
+
+## About
+
+These recipes aren't very good; they're mostly just notes for myself.
+Some of them are stolen from various sources and modified (copyright law for recipes is weird),
+but others are original.
+Cooking isn't that hard.
+
+## Pages

hugo/recipe/content/fettuccine-alfred.md

@@ -0,0 +1,25 @@
+---
+title: "Fettuccine Alfredo"
+lastmod: 2023-07-20T14:25:00-04:00
+date: 2023-07-20T14:25:00-04:00
+author: "Emilia"
+tags: []
+---
+
+### Ingredients
+- 0.25 cup butter (unsalted ideally)
+- 1 cup heavy cream
+- 0.75 cups parmesan cheese
+- 8 ounces (half box) fettuccine
+
+### Notes
+
+- Obviously, salt the sauce.
+- Pepper in the sauce is nice too.
+
+### Procedure
+1. Begin boiling water for pasta, begin cooking when boiling
+2. Melt butter and cream over medium or medium-low heat
+3. Continue cooking at this temperature until mixture begins to bubble
+4. Simmer for around 15 minutes or until reduced
+5. Remove from heat, and cheese, and mix

hugo/recipe/content/hot-chocolate.md

@@ -0,0 +1,62 @@
+---
+title: "Tim's Hot Chocolate"
+lastmod: 2023-07-20T18:50:17-04:00
+date: 2023-07-20T18:50:17-04:00
+authors:
+    - "Emilia"
+    - "Tim"
+tags: []
+---
+
+## Recipe
+
+The ingredients listed below are for roughly one tablespoon of mix,
+which makes two fluid ounces of product.
+Obviously, one should scale this recipe to produce the desired quantity of output.
+
+<br />
+
+### Notes
+
+- A little bit of salt is probably good,
+but I think there is a fair amount in the milk---be cautious here.
+
+### Ingredients
+
+- 1 g cocoa powder
+- 3 g stevia
+- 4 g powdered milk
+- 44g water
+
+### Procedure
+
+1. Mix dry ingredients
+2. Heat water
+3. Add dry ingredients to water
+
+## Appendix
+
+<!-- Just to add space for the h3 -->
+<br />
+<br />
+
+### Price per 8oz glass
+
+The prices below are sourced from a local chain grocery store, retrieved 20 July 2023.
+In Pennsylvania, sales tax is not levied on non-prepared food items, such as those in this recipe.
+
+| Item | Cost ($) | Mass (oz) | Mass (g) | $/g |
+| :--- | ---: | ---: | ---: | ---: |
+| Cocoa | 4.49 | 8 | 227 | 0.0198 |
+| Stevia | 5.99 | 9.8 | 278 | 0.0215 |
+| Milk | 5.79 | 9.6 | 272 | 0.0213 |
+
+From this table, we conclude that the price per gram is $0.0212
+(a weighted average of the ingredients).
+
+If we are to prepare an `8 oz` glass, we will require `4 Tbsp` of mix;
+this is approximately `32 g` of mix.
+Therefore our final cost is **$0.678**
+(we assume the cost of water is negligible).
+
+<br />

hugo/recipe/content/mac-and-cheese.md

@@ -14,6 +14,12 @@ tags: []
 - 2 tsp Worcestershire sauce
 - 8 oz (half box) dried macaroni
 
+### Notes
+
+- 1 cup of cheese means half of a block. Do not use an entire block or you will suffer.
+- Sharper cheeses help the sauce to have flavor. Mild cheddar yields sub par flavor.
+- Toast bread crumbs before baking them! They do not have the right texture otherwise.
+
 ### Procedure
 1. Begin boiling water for pasta, begin cooking when boiling
 2. Melt butter in a medium saucepan over medium-low heat

hugo/recipe/content/sandwich-bread.md

@@ -4,7 +4,6 @@ lastmod: 2022-09-10T14:33:38-04:00
 date: 2022-09-10T14:33:38-04:00
 author: "Emilia"
 tags: ["baked"]
-draft: true
 ---
 
 ### Ingredients
@@ -20,4 +19,12 @@ draft: true
 1. Heat water and milk to around 100°F
 2. Add yeast to liquid mixture, wait for bloom
 3. Whisk together flour, salt, and sugar
+	- Sufficient to mix a bit with dough hook
 4. Pour liquid into dry ingredient mix
+	- Mix until reasonably incorporated
+5. Add in butter, about one tablespoon at a time, while kneading
+6. Knead one to two minutes after butter fully incorporated
+7. Cover and let rise 1.5 hours
+8. Punch down and shape dough into vessel or final shape
+9. Let rise again for 0.75 to 1.0 hours
+10. Bake at 350°F for 35 to 40 minutes

hugo/recipe/content/sticky-buns.md

@@ -1,5 +1,5 @@
 ---
-title: "Stickybuns"
+title: "Sticky Buns"
 lastmod: ":git"
 date: 2022-06-29T14:46:50-04:00
 author: "Joshua Weissman"

hugo/recipe/themes/waltuh-hugo-theme

@@ -0,0 +1 @@
+Subproject commit 5671f376d5c80b2f125c17af373665f417aebd85

src/Makefile

@@ -0,0 +1,14 @@
+clean:
+	rm -rf css/*
+
+css:
+	sass scss:css
+
+css-watch:
+	sass -w scss:css
+
+server:
+	python -m http.server -b 127.0.0.1
+
+dev:
+	make -j 2 css-watch server

src/about.html

@@ -6,48 +6,51 @@
 		<meta name="viewport" content="width=device-width,initial-scale=1">
 	</head>
 	<body>
-		<div id="overlay">
-		</div>
-		<main class="grid-center--offset-wide">
+		<div id="overlay"></div>
+		<main class="offset-grid--top--wide fullsize side-a">
 			<div>
-			<div>
-				<h1>
+			<div class="flex column-tight">
+				<h1 class="ff-serif fs-700 padding-high-top">
 					About
 				</h1>
-				<h2>isn't that the page title?</h2>
-				<p>
-I'm not super keen on saying that much about myself on the <mark class="internet">internet</mark>.
-Anyway, here's some information about myself, posted on the aforementioned <mark class="internet">internet</mark>.
+				<h3 class="ff-serif fs-500 padding-none-top">there used to be a subtitle here</h3>
+				<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>
-I'm studying mathematics (with a focus on computation) at Penn State, and will hopefully be graduating in 2023.
+				<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>
-				<h1>Opinions</h1>
-				<h2>A 100% exhaustive list, of course</h2>
+			<div class="flex column-tight">
+				<h1 class="ff-serif fs-700 padding-high-top">Opinions</h1>
+				<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
+				the modern internet is bloated
 					<ol>
 						<li>i will contribute to this bloat</li>
 					</ol>
 				</li>
 				<li>open source software is very cool</li>
-				<li>
-linux distros don't matter
-					<ol>
-						<li>btw i use</li>
-					</ol>
-				</li>
-				<li>social media is kinda yucky</li>
+				<li>social media is kinda yucky!</li>
 				<li>the military industrial complex</li>
-				<li>my taste in music is objectively just ok</li>
-				<li>&#129424</li>
+				<li>my taste in music is <s>objectively just ok</s> taylor swift</li>
+				<li>FluentControl whistle noise &#x1f525; &#x1F5E3;</li>
+				<li>&#129424 &#127844</li>
+				</ul>
+				</span>
 			</div>
 			</div>
-			<footer>
-				<p><a href="../">Return</a></p>
-			</footer>
+			</div>
+			<a href="../">
+			</a>
+			<div class="side-a__main-content-cover"></div>
 		</main>
+		<footer class="lock-bottom">
+			<p><a href="../">Return</a></p>
+		</footer>
 	</body>
 </html>

src/cool-stuff/books.html

@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Emilia Allison</title>
+		<link rel="stylesheet" href="/css/books.css">
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+	</head>
+	<body class="no-overflow">
+		<div id="overlay">
+		</div>
+		<main class="offset-grid--top--wide--column side-a">
+			<div>
+				<h1>
+					Books
+				</h1>
+				<h3 class="padding-none-top padding-low-bottom">primarily those that I've read</h3>
+				<p>
+				I wouldn't say that I read a lot.
+				This page exists because I am generally dissatisfied with Goodreads
+				and its competitors.
+				My commentary may or may not include spoilers (clearly marked).
+				The contents are placed here in no particular order.
+				</p>
+				<h1 class="padding-mid-top">
+					the books
+				</h1>
+
+				<!-- Book Template
+
+				<section class="book-entry">
+					<details>
+						<summary><h2> TITLE </h2></summary>
+						<div>
+						<p class="book-entry__author"> BOOK AUTHOR </p>
+						<p class="book-entry__year"> PUBLICATION YEAR </p>
+						<p class="book-entry__score"> SCORE OUT OF 10 </p>
+						<p class="book-entry__comments"> COMMENTARY
+						</p>
+						</div>
+					</details>
+				</section>
+
+				-->
+
+
+				<div class="book-entry-container">
+				<!-- Put books below -->
+
+				<section class="book-entry">
+					<details>
+						<summary><h2> The Message </h2></summary>
+						<div>
+						<p class="book-entry__author"> Ta-Nehisi Coates </p>
+						<p class="book-entry__year"> 2024 </p>
+						<p class="book-entry__score"> 8 </p>
+						<p class="book-entry__comments">
+						I really enjoyed the prose in this book;
+						the elegance of the author's descriptions
+						served, in my opinion, to enhance the message
+						of one of the core themes.
+						I do indeed find myself haunted by this book,
+						for which I am glad.
+						</p>
+						</div>
+					</details>
+				</section>
+
+				<section class="book-entry">
+					<details>
+						<summary><h2> Cowboy, Cross My Heart </h2></summary>
+						<div>
+						<p class="book-entry__author"> Donna Grant </p>
+						<p class="book-entry__year"> 2018 </p>
+						<p class="book-entry__score"> 3 </p>
+						<p class="book-entry__comments">
+						I did not read this book voluntarily,
+						and I will not elaborate on this fact.
+						While I can mostly certainly appreciate the allure of a good cowboy,
+						especially one with new stainless steel appliances and a ranch,
+						the inciting incident of the plot is a bit too goofy for my taste.
+						<span class=spoiler>There's like a rodeo pageant sexual harassment
+						scheme being run by an evil cabal of anti-cowboys?</span>
+						</p>
+						</div>
+					</details>
+				</section>
+
+				<section class="book-entry">
+					<details>
+						<summary><h2>Dune</h2></summary>
+						<div>
+						<p class="book-entry__author">Frank Herbert</p>
+						<p class="book-entry__year">1965</p>
+						<p class="book-entry__score">8</p>
+						<p class="book-entry__comments">
+						I read the first Dune book without having seen the
+						<a href="https://en.wikipedia.org/wiki/Dune_(1984_film)">Lynch film</a>
+						and before the new movie was released.
+						Unfortunately, I found that, in addition to the typical suspension of disbelief
+						required by this genre, it was necessary to look past many <em>interesting</em>
+						opinions Frank had regarding women (see: Heretics of Dune).
+						</p>
+						</div>
+					</details>
+				</section>
+
+				<section class="book-entry">
+					<details>
+						<summary><h2> Dune Messiah </h2></summary>
+						<div>
+						<p class="book-entry__author"> Frank Herbert </p>
+						<p class="book-entry__year"> 1969 </p>
+						<p class="book-entry__score"> 8 </p>
+						<p class="book-entry__comments">
+						Messiah is more philosophical than Dune.
+						Herbert's anti-theocracy and anti-autocracy messaging is far stronger here.
+						One might say that Herbert's rejection of charismatically driven tyranny
+						was prescient.
+						</p>
+						</div>
+					</details>
+				</section>
+
+				<section class="book-entry">
+					<details>
+						<summary><h2> Children of Dune </h2></summary>
+						<div>
+						<p class="book-entry__author"> Frank Herbert </p>
+						<p class="book-entry__year"> 1976 </p>
+						<p class="book-entry__score"> 6 </p>
+						<p class="book-entry__comments">
+						In my mind, Children of Dune exists almost solely to set up its sequel.
+						This book has some very uncomfortable moments
+						(although by no means the worst this series has to offer)
+						arising from Herbert's use of children characters with adult memories.
+						</p>
+						</div>
+					</details>
+				</section>
+
+				<section class="book-entry">
+					<details>
+						<summary><h2> God Emperor of Dune </h2></summary>
+						<div>
+						<p class="book-entry__author"> Frank Herbert </p>
+						<p class="book-entry__year"> 1981 </p>
+						<p class="book-entry__score"> 9 </p>
+						<p class="book-entry__comments">
+						A common criticism of GEoD is heavy use of monologue;
+						I quite enjoyed the Worm's lengthy expositions.
+						Philosophy aside, I enjoy this book for the absurdity of
+						its premise:
+						<span class=spoiler> a giant worm has near-complete control over 
+						the entirety of humanity. </span>
+						</p>
+						</div>
+					</details>
+				</section>
+
+				<section class="book-entry">
+					<details>
+						<summary><h2> Heretics of Dune </h2></summary>
+						<div>
+						<p class="book-entry__author"> Frank Herbert </p>
+						<p class="book-entry__year"> 1984 </p>
+						<p class="book-entry__score"> 5 </p>
+						<p class="book-entry__comments">
+						How I adore Herbert's writing of women.
+						There are many interesting ideas in Heretics,
+						but this is in large part overshadowed by the more objectionable content.
+						<span class=spoiler>
+							As far as I can tell, Duncan is thirteen in this book.
+							Fine, he reacquires his old memories, but the Bene Gesserit
+							were planning to imprint him <em>before</em> that.
+							The idea of imprinting is revolting on its own,
+							but the pairing with an underage character is more so.
+						</span>
+						</p>
+						</div>
+					</details>
+				</section>
+
+				<section class="book-entry">
+					<details>
+						<summary><h2> Neuromancer </h2></summary>
+						<div>
+						<p class="book-entry__author"> William Gibson </p>
+						<p class="book-entry__year"> 1984 </p>
+						<p class="book-entry__score"> 5 </p>
+						<p class="book-entry__comments">
+						Although I found it hard to follow at times,
+						Neuromancer's numerous contributions (if not outright creation of) to the genre
+						cannot be dismissed.
+						I found Gibson's writing of women characters to be lackluster;
+						I personally can do without unexpected smut.
+						The sequel, Count Zero, leaned this direction so quickly as to
+						prompt my abandonment of the trilogy.
+						</p>
+						</div>
+					</details>
+				</section>
+
+				<section class="book-entry">
+					<details>
+						<summary><h2> Be More Chill </h2></summary>
+						<div>
+						<p class="book-entry__author"> Ned Vizzini </p>
+						<p class="book-entry__year"> 2004 </p>
+						<p class="book-entry__score"> 3 </p>
+						<p class="book-entry__comments">
+						I have little to say about this entry.
+						YA is not typically my preference, and this book did little to change that.
+						</p>
+						</div>
+					</details>
+				</section>
+
+				<section class="book-entry">
+					<details>
+						<summary><h2> To Kill a Mockingbird </h2></summary>
+						<div>
+						<p class="book-entry__author"> Harper Lee </p>
+						<p class="book-entry__year"> 1960 </p>
+						<p class="book-entry__score"> 10 </p>
+						<p class="book-entry__comments">
+						Everybody has read this book, I just think it's quite good
+						and wanted to include it here despite that.
+						</p>
+						</div>
+					</details>
+				</section>
+
+				<!-- Stop putting books here -->
+				</div>
+
+			</div>
+			<a href="./">
+			</a>
+			<div class="side-a__main-content-cover"></div>
+		</main>
+		<footer class="lock-bottom">
+			<p><a href="./">Return</a></p>
+		</footer>
+	</body>
+</html>

src/cool-stuff/css-purgatory/index.html

@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<title>CSS Purgatory - Emilia Allison</title>
-		<link rel="stylesheet" href="pink/index.css">
+		<link rel="stylesheet" href="../../css/about.css">
 		<meta name="viewport" content="width=device-width,initial-scale=1">
 	<style>
 	/* For classes not supplied by base.css
@@ -14,11 +14,9 @@
 	</style>
 	</head>
 	<body>
-		<div class="overlay">
-		</div>
-		<div class="outerdiv contentholder">
-			<div class="contentholder__topfiller"></div>
-			<div class="content flex column">
+		<div class="overlay"></div>
+		<main class="offset-grid--top--wide fullsize">
+			<div>
 				<h1>
 					CSS Purgatory
 				</h1>
@@ -54,6 +52,14 @@
 							Second candidate format for the homepage
 						</p>
 					</li>
+					<li>
+						<h3>
+							<a href="waltuh">Waltuh</a>
+						</h3>
+						<p>
+							wacky and zany purple theme, collaborative
+						</p>
+					</li>
 				</ol>
 			</div>
 		</div>

src/cool-stuff/css-purgatory/waltuh/.gitignore

@@ -0,0 +1 @@
+css/*

src/cool-stuff/css-purgatory/waltuh/Makefile

@@ -0,0 +1,14 @@
+watch_scss:
+	sass -w scss/:css/
+
+scss:
+	sass scss/:css/
+
+server:
+	python3 -m http.server
+
+dev:
+	make -j 2 watch_scss server
+
+clean:
+	rm css/*

src/cool-stuff/css-purgatory/waltuh/index.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>CSS Purgatory - Waltuh</title>
+	<link rel="stylesheet" href="css/waltuh.css">
+	<!-- Base v1.1 -->
+</head>
+<body class="vsc-initialized">
+<main>
+	<header id="title" class="hr">
+		<h1>Waltuh</h1>
+	</header>
+	<article class="">
+	<section id="description" class="hr">
+		<h2>Description</h2>
+		<div class="container">
+			<span class="waltuh-gradient">Waltuh</span>,
+				put your theme away.
+				It's collaborative!</p>
+		</div>
+	</section>
+
+	
+
+	<section id="colors" class="hr">
+		<h2>Colors</h2>
+		<div class="container flex">
+			<div>
+				<div class="colors--block bg-dark text-white">#Color hex code</div>
+				<p> HSL: Color hsl
+			</p></div>
+			<div>
+				<div class="colors--block bg-light text-white">#Color hex code</div>
+				<p> HSL: Color hsl
+			</p></div>
+			<div>
+				<div class="colors--block bg-white text-dark">#Color hex code</div>
+				<p> HSL: Color hsl
+			</p></div>
+		</div>
+	</section>
+
+	
+
+	<section id="typography" class="hr">
+		<h2>Typography</h2>
+		<div class="container two-columns">
+			<div>
+				<p class="ff-serif fs-900">Heading 1</p>
+				<p class="ff-sans-cond fs-200 text-light">Inconsolata wght:400</p>
+			</div>
+
+			<div>
+				<p class="ff-serif fs-800">Heading 2</p>
+				<p class="ff-sans-cond fs-200 text-light">Inconsolata wght:300</p>
+			</div>
+
+			<div>
+				<p class="ff-serif fs-700">Heading 3</p>
+				<p class="ff-sans-cond fs-200 text-light">Inconsolata wght:200</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-600">Heading 4</p>
+				<p class="ff-sans-cond fs-200 text-light">unused size</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-500">Heading 5</p>
+				<p class="ff-sans-cond fs-200 text-light">unused size</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-400">Heading 6</p>
+				<p class="ff-sans-cond fs-200 text-light">unused size</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-300">Text</p>
+				<p class="ff-sans-cond fs-200 text-light">Jost wght:400</p>
+			</div>
+
+
+			<div>
+				<p class="ff-sans-cond fs-200">Subtext</p>
+				<p class="ff-sans-cond fs-200 text-light">Jost wght:400</p>
+			</div>
+
+		</div>
+	</section>
+
+	
+
+	<section id="samples" class="hr">
+		<h2>Sample Pages</h2>
+		<ul class="container two-columns">
+			<li><a href="http://0.0.0.0:8000/samplepage">First Sample Page</a></li>
+			<li><a href="http://0.0.0.0:8000/landingpage">Second Sample Page</a></li>
+			<li><a>Third Sample Page</a></li>
+		</ul>
+	</section>
+	</article>
+
+	
+
+	<footer>
+		<a href="../">Return to Purgatory</a>
+	</footer>
+
+</main>
+
+
+</body></html>

src/cool-stuff/css-purgatory/waltuh/landingpage.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Waltuh - Landing Page</title>
+	<link rel="stylesheet" href="css/waltuh.css">
+	<style>
+		body {
+		overflow: hidden;
+		}
+	</style>
+	<!-- Base v1.1 -->
+</head>
+<body class="vsc-initialized">
+	<div id="overlay"></div>
+<main class="offset-grid--top fullsize">
+	<div>
+		<h1 class="text-dark ff-serif fs-800 gap-large-bottom">this is <span class="waltuh-gradient">Waltuh</span>.</h1>
+		<p>You know how they say, "It's been a pleasure?"</p>
+		<p>It hasn't.</p>
+	</div>
+</main>
+<footer class="lock-bottom">
+	<a href="./">Return to Waltuh</a>
+</footer>
+
+
+</body></html>

src/cool-stuff/css-purgatory/waltuh/samplepage.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Waltuh - Sample Page</title>
+	<link rel="stylesheet" href="css/waltuh.css">
+	<!-- Base v1.1 -->
+</head>
+<body class="vsc-initialized">
+<main>
+<header id="title">
+	<h1>
+		Waltuh - Sample Page
+	</h1>
+	<div class="container">
+		<p>Where one might put a page showcasing the features of a theme</p>
+	</div>
+</header>
+<article>
+	<section id="fakecontent" class="container">
+		<h2>Fake content 1</h2>
+		<p>Some content might go here on a real page.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed 
+sagittis congue turpis et laoreet. Integer finibus velit purus, id 
+semper augue pulvinar eu. In sed diam bibendum, faucibus neque eget, 
+malesuada nisi. Maecenas nulla ante, sagittis sed mollis malesuada, 
+imperdiet et turpis. Curabitur eget vehicula justo. Etiam nec magna sed 
+dui lacinia molestie quis vitae velit. Donec eu erat metus. Duis congue,
+ risus vel gravida elementum, risus velit vestibulum felis, rhoncus 
+varius purus turpis ut sapien. Etiam non libero ex. Interdum et 
+malesuada fames ac ante ipsum primis in faucibus. Etiam facilisis, orci 
+at aliquet congue, massa felis semper nisl, consectetur commodo eros 
+odio vel nibh.</p>
+	</section>
+	<section id="fakecontent2" class="container">
+		<h2>Fake content 2</h2>
+		<p>Some other content might go here, but it would be separated from the first bit of content.</p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu
+ enim, dictum eu tincidunt quis, ultrices in tortor. Vivamus pharetra 
+elementum mauris sit amet elementum. Sed diam tortor, consequat nec ex 
+et, mattis tincidunt nunc. Fusce id sem justo. Phasellus ac blandit 
+libero. Donec eu orci ac libero blandit sollicitudin sit amet eu nunc. 
+Aenean finibus fermentum ligula id fringilla. Maecenas sit amet tortor 
+metus. </p>
+	</section>
+</article>
+<footer>
+	<a href="./">Return to Waltuh</a>
+</footer>
+</main>
+
+
+</body></html>

src/cool-stuff/css-purgatory/waltuh/scss/_variables.scss

@@ -0,0 +1,33 @@
+@use "sass:color";
+@use "sass:math";
+
+$-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-sans: "Jost", sans-serif;
+$-fs-900: math.div(100rem, 16);
+
+@forward "base" with (
+  $color-white: $-color-white,
+  $color-dark: $-color-dark,
+  $color-light: $-color-light,
+  $ff-serif: $-ff-serif,
+  $ff-sans: $-ff-sans,
+  $fs-900: $-fs-900
+);
+
+@font-face {
+  font-family: "Inconsolata";
+  src: url("fonts/Inconsolata.ttf");
+
+  font-display: swap;
+  font-variation-settings: "wdth" 85;
+}
+
+@font-face {
+  font-family: "Jost";
+  src: url("fonts/Jost.ttf");
+
+  font-display: swap;
+}

src/cool-stuff/css-purgatory/waltuh/scss/base.scss

@@ -0,0 +1,214 @@
+//
+//
+// Do Not Change This File!
+//
+//
+@use "sass:math";
+/* ----------------- */
+/* Custom Properties */
+/* ----------------- */
+/*
+  This values are to be overridden
+  after being injected into
+  the global scope.
+*/
+
+  /* colors */
+
+$color-dark:  hsl(0 0% 0%) !default; /* Black */
+$color-light: hsl(0 0% 50%) !default; /* Gray */
+$color-white: hsl(0 0% 100%) !default;/* White */
+
+  /* font */
+
+  /* Sizes divided by 16 so values given in px */
+$fs-900: math.div(125rem, 16) !default;
+$fs-800: math.div(75rem, 16) !default;
+$fs-700: math.div(56rem, 16) !default;
+$fs-600: math.div(32rem, 16) !default;
+$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;
+
+$ff-serif: serif !default;
+$ff-sans-cond: sans-serif !default;
+$ff-sans: sans-serif !default;
+
+/* --------------- */
+/* Utility Classes */
+/* --------------- */
+
+/* Layouts */
+
+.container {
+  padding-inline: clamp(0.5rem, 4rem, 5rem);
+  margin-inline: auto;
+  max-width: 80rem;
+}
+
+.flex {
+  display: flex;
+  gap: 2rem;
+}
+
+.column {
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  align-content: center;
+}
+
+.row {
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-content: baseline;
+  max-width: 100%;
+}
+
+.two-columns {
+  display: grid;
+  /* Will shrink to one column, never exceed two!
+   * The `max` in `minmax` asks that the columns
+   * be no smaller */
+  grid-template-columns: repeat(auto-fit, minmax(max(30rem, 40%), 1fr));
+  column-gap: 1rem;
+  justify-content: space-evenly;
+}
+
+.lock-bottom {
+  position: absolute;
+  bottom: 0%;
+}
+
+/* Other */
+
+.hr::after { /* Add fake hr after header */
+  content: '';
+
+  position: absolute;
+  display: block;
+  clear: both;
+  width: 100%;
+  height: 0.15rem;
+
+  background-color: black;
+}
+
+/* Color Classes */
+
+.bg-dark  { background-color: $color-dark; }
+.bg-light { background-color: $color-light; }
+.bg-white { background-color: $color-white; }
+
+.text-dark  { color: $color-dark; }
+.text-light { color: $color-light; }
+.text-white { color: $color-white; }
+
+/* Font Classes */
+
+.fs-900 { font-size: $fs-900; }
+.fs-800 { font-size: $fs-800; }
+.fs-700 { font-size: $fs-700; }
+.fs-600 { font-size: $fs-600; }
+.fs-500 { font-size: $fs-500; }
+.fs-400 { font-size: $fs-400; }
+.fs-300 { font-size: $fs-300; }
+.fs-200 { font-size: $fs-200; }
+
+.ff-serif { font-family: $ff-serif; }
+.ff-sans-cond { font-family: $ff-sans-cond; }
+.ff-sans { font-family: $ff-sans; }
+
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
+
+/* Semantic Tags and Their Classes */
+
+header {
+  margin-bottom: 3vh;
+}
+
+section:not(:last-of-type) {
+  margin-bottom: 3vh;
+}
+
+footer {
+  margin-top: 3vh;
+}
+
+/* ----- */
+/* Reset */
+/* ----- */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body, h1, h2, h3, h4, h5, h6, p {
+  margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p {
+  font-weight: 400;
+}
+
+h1, h2, h3 {
+  line-height: 1.1;
+}
+
+body {
+  font-family: $ff-sans;
+  font-size: $fs-400;
+  color: $color-dark;
+  background-color: $color-white;
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+main {
+  margin-left: 1vw;
+  margin-top: 1vh;
+  * {
+    z-index: 2;
+  }
+}
+
+footer {
+  z-index: 2;
+}
+
+img, picture {
+  max-width: 100%;
+  display: block;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behaviour: auto !important;
+	}
+}
+
+/* -------------------- */
+/* Non-Reusable Classes */
+/* -------------------- */
+/* meant for these pages
+ * only, not to be used
+ * in practice          */
+
+.colors--block {
+  padding: 3rem 1rem 1rem;
+  border: 1px solid black;
+}

src/cool-stuff/css-purgatory/waltuh/scss/components/_index.scss

@@ -0,0 +1,3 @@
+@forward "header";
+@forward "overlay";
+@forward "marks";

src/cool-stuff/css-purgatory/waltuh/scss/components/_marks.scss

@@ -0,0 +1,39 @@
+@use "sass:math";
+@use "sass:color";
+@use "../variables" as *;
+
+
+@keyframes waltuh-gradient-anim {
+  $r: 6em;
+  $pd: math.div(2*math.$pi,10);
+  from {
+    background-position: 6em 0em;
+  }
+  @for $i from 1 through 9 {
+    #{$i*10}% {
+      background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd);
+    }
+  }
+  to {
+    background-position: 6em 0em;
+  }
+}
+@keyframes wipeIn {
+  from { clip-path: inset(0 100% 0 0); }
+  to { clip-path: inset(0 0 0 0); }
+}
+
+span.waltuh-gradient {
+  font-weight: 600;
+
+  color: transparent;
+  $grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%);
+  $grad2: color.adjust($grad1, $lightness: +30%);
+  background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white);
+  background-size: 30vmin 30vmin;
+  background-clip: text;
+
+  animation: waltuh-gradient-anim 12s linear infinite,
+  wipeIn 0.25s ease-in;
+
+}

src/cool-stuff/css-purgatory/waltuh/scss/components/_overlay.scss

@@ -0,0 +1,18 @@
+@keyframes overlay-breathe {
+  from {opacity: 0.04;}
+  to {opacity: 0.10;}
+}
+#overlay {
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  position: fixed;
+
+  opacity: 0.10;
+  z-index: 1;
+  background-image: url('https://ilia.moe/img/noise.gif');
+  background-size: 20vmin;
+
+  animation: overlay-breathe 3s ease-in infinite alternate;
+}

src/cool-stuff/css-purgatory/waltuh/scss/layouts/_grid.scss

@@ -0,0 +1,74 @@
+@use "sass:list";
+@use "../variables" as *;
+
+%grid {
+  display: grid;
+}
+
+@mixin grid-3x3-offset($top: 1fr, $bottom: 1fr, $left: 1fr, $right: 1fr) {
+  @debug "mixin top: #{$top}";
+  @extend %grid;
+  grid-template-rows: $top 1fr $bottom;
+  grid-template-columns: $left 1fr $right;
+  grid-template-areas:
+    "nw n ne"
+    "w center e"
+    "sw s se";
+}
+
+/* Classes */
+%offset-grid {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+
+  div {
+    justify-self: center;
+    grid-area: center;
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    h1, h2, h3 {
+      display: inline-block;
+      width: min-content;
+    }
+  }
+}
+
+// Grid Offset Hell
+$offset-amt: 0.33fr;
+@each $dir in [top, bottom, left, right] {
+  $dir_adj: "";
+  @if $dir {
+    $dir_adj: "--#{$dir}";
+  }
+
+  @each $size, $size_val in (null: 1fr, wide: 0.8fr, narrow: 1.2fr)  {
+    $size_adj: "";
+    @if $size {
+      $size_adj: "--#{$size}";
+    }
+    .offset-grid#{$dir_adj}#{$size_adj} {
+      $-l: [1fr, 1fr, 1fr, 1fr];
+      @if $dir == top {
+        $-l: [$offset-amt, 1fr, $size_val, $size_val];
+      } @else if $dir == bottom {
+        $-l: [1fr, $offset-amt, $size_val, $size_val];
+      } @else if $dir == left {
+        $-l: [$size_val, $size_val, $offset-amt, 1fr];
+      } @else if $dir == right {
+        $-l: [$size_val, $size_val, 1fr, $offset-amt];
+      }
+      @debug "list: #{$-l}";
+      @debug list.nth($-l, 1);
+      @include grid-3x3-offset($top: list.nth($-l,1), $bottom: list.nth($-l,2),
+                               $left: list.nth($-l,3), $right: list.nth($-l,4));
+
+      @extend %offset-grid;
+    }
+  }
+}

src/cool-stuff/css-purgatory/waltuh/scss/layouts/_index.scss

@@ -0,0 +1,2 @@
+@forward "grid";
+@forward "modifiers";

src/cool-stuff/css-purgatory/waltuh/scss/layouts/_modifiers.scss

@@ -0,0 +1,20 @@
+.fullsize {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+
+  height: 100vh !important;
+  width: 100vw !important;
+}
+
+$gap-sizes: ("small": 1vmin, "mid": 3vmin, "large": 5vmin);
+
+@each $size, $dist in $gap-sizes {
+  @each $dir in [top, bottom, left, right] {
+    .gap-#{$size}-#{$dir} {
+      margin-#{$dir}: $dist;
+    }
+  }
+}

src/cool-stuff/css-purgatory/waltuh/scss/waltuh.scss

@@ -0,0 +1,17 @@
+/* ------ */
+/*        */
+/* Waltuh */
+/*        */
+/* ------ */
+
+// Global Variables
+@use "variables" as *;
+@use "components";
+@use "layouts";
+
+.fs-900 { font-size: $fs-900; font-weight: 400;}
+.fs-800 { font-size: $fs-800; font-weight: 300;}
+.fs-700 { font-size: $fs-700; font-weight: 250;}
+.fs-600 { font-size: $fs-600; font-weight: 300;}
+.fs-500 { font-size: $fs-500; font-weight: 200;}
+.fs-400 { font-size: $fs-400; font-weight: 200;}

src/cool-stuff/index.html

@@ -1,39 +1,76 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<title>Emilia Allison</title>
-		<link rel="stylesheet" href="/css/about.css">
-		<meta name="viewport" content="width=device-width,initial-scale=1">
-	</head>
-	<body>
-		<div id="overlay">
-		</div>
-		<main class="grid-center--offset-wide">
-			<div>
-				<h1>
-					Cool Stuff
-				</h1>
-				<h2>it's debatable</h2>
-				<p>
-Cool stuff is code for links to subpages.
-If a page uses/requires JavaScript, its link will be marked with (&#x2615).
-				</p>
-				<h1>
-					the stuff
-				</h1>
-				<a href="css-purgatory"><h3>
-					css purgatory
-					</h3></a>
-				<h3>
-					Static
-				</h3>
+
+<head>
+	<title>Emilia Allison</title>
+	<link rel="stylesheet" href="/css/about.css">
+	<meta name="viewport" content="width=device-width,initial-scale=1">
+</head>
+
+<body class="no-overflow">
+	<div id="overlay">
+	</div>
+	<main class="offset-grid--top--wide--column side-a">
+		<div>
+			<h1 class="ff-serif fs-700 gap-small-bottom">
+				Cool Stuff
+			</h1>
+			<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>
+			</span>
+			<h1 class="gap-small-bottom ff-serif fs-700">
+				the stuff
+			</h1>
+			<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> 
+					<a href="https://git.ilia.moe/emilia/plate-tool">&#x2615;&#128187;
+						&#x1f935;&#x200d;&#x2640;&#xfe0f;</a>
+				</li>
+			</ul>
+			</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>
-						<li><a href="recipes">Recipes</a></li>
+					I so desperately need to update this section.
+					None of these are up-to-date.
 					</ul>
-			</div>
-			<footer>
-				<p><a href="../">Return</a></p>
-			</footer>
-		</main>
-	</body>
+				</li>
+				<li><a href="/pictures">Pictures</a>
+					<ul>
+					Password protected for your non-enjoyment.
+					intentionally bizarre pictures blasted onto your screen
+					by way of a terrible python pipeline.
+					</ul>
+				</li>
+				<li><a href="books">Books</a>
+					<ul>
+					proof of basic literacy
+					</ul>
+				</li>
+			</ul>
+			</span>
+		</div>
+		<a href="../">
+		</a>
+		<div class="side-a__main-content-cover"></div>
+	</main>
+	<footer class="lock-bottom">
+		<p><a href="../">Return</a></p>
+	</footer>
+</body>
+
 </html>

src/index.html

@@ -12,40 +12,44 @@
 		<meta property="og:type" content="website">
 		<meta property="og:url" content="https://ilia.moe/">
 		<meta property="og:title" content="what">
-		<meta property="og:description" content="did you just try to embed my website">
+		<meta property="og:description" content="did you just try to embed my website? please don't do that">
 		<meta property="og:image" content="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclimbers.lsa.umich.edu%2Fwp-content%2Fuploads%2F2013%2F12%2FCitrullus-lanatus-from-Russia.jpg&f=1&nofb=1">
 		<!-- Twitter -->
 		<meta property="twitter:card" content="summary_large_image" />
 	</head>
-	<body>
-		<div id="overlay">
-		</div>
-		<main class="grid-center--offset">
-			<div>
-				<div>
-					<h1>Emilia</h1>
-					<p>mathematics enjoyer</p>
-					<p id="pgp_p">pgp: 
+<body class="vsc-initialized">
+	<div id="overlay"></div>
+<main class="offset-grid--top fullsize">
+	<div>
+		<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</p>
-				</div>
-			</div>
-			<footer class="links">
-				<a title="about" href="about">
-					&#128196
-				</a>
-				<a id="moonlink" title="cool stuff" href="cool-stuff">
-					&#127772
-				</a>
-				<a title="git provider" href="https://github.com/em-ilia">
-					&#128187
-				</a>
-				<a title="i love email" href="mailto:em@ilia.moe">
-					&#128224
-				</a>
-			</footer>
-		</main>
-	</body>
+						</a>
+		</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">
+			&#128196
+		</a>
+		<a id="moonlink" title="cool stuff" href="cool-stuff">
+			&#127772
+		</a>
+		<a title="git provider" href="https://git.ilia.moe/explore/repos">
+			&#128187
+		</a>
+		<a title="i love email" href="mailto:em@ilia.moe">
+			&#128224
+		</a>
+		<a id="camera" title="picture" href="pictures">
+			&#128247
+		</a>
+	</footer>
+</main>
 </html>

src/js/index.js

@@ -12,6 +12,9 @@ if (is_mobile === '1') {
 	}
 
 const moon = document.getElementById('moonlink');
-console.log(moon);
 moon.onmouseover = function() {moon.innerHTML = "&#127771"}
 moon.onmouseout = function() {moon.innerHTML = "&#127772"}
+
+const camera = document.getElementById('camera');
+camera.onmouseover = function() {camera.innerHTML = "&#128248"}
+camera.onmouseout = function() {camera.innerHTML = "&#128247"}

src/scss/about.scss

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

src/scss/books.scss

@@ -0,0 +1,26 @@
+@use "waltuh/waltuh";
+@use "waltuh/variables"; // Needed to extend ff-serif
+
+h1 {
+	@extend .ff-serif;
+	@extend .fs-700;
+}
+
+h3 {
+	@extend .ff-serif;
+	@extend .fs-500;
+}
+
+h2 {
+	@extend .ff-serif;
+	@extend .fs-500;
+}
+
+details > div {
+	@extend .padding-low-top;
+}
+
+p {
+	@extend .ff-sans;
+	@extend .fs-300;
+}

src/scss/ilia1.scss

@@ -1,243 +0,0 @@
-/* ---------------- */
-/* ILIA1 STYLE FILE */
-/* ---------------- */
-/*
- * Formalizing the
- * until now very
- * disorganized look
- * and feel of ILIA
-                    */
-
-@use "sass:color";
-@import "reset";
-
-$color-white: hsl(48, 73%, 84%);
-$color-light: hsl(348, 73%, 84%);
-$color-dark: hsl(195, 47%, 7%);
-
-/* --------------- */
-/* Utility Classes */
-/* --------------- */
-
-.flex {
-  display: flex;
-  gap: 2rem;
-}
-
-.column {
-  @extend .flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  align-content: center;
-}
-
-.row {
-  @extend .flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  align-content: baseline;
-  max-width: 100%;
-}
-
-.container {
-  padding-inline: clamp(0.5rem, 4rem, 5rem);
-  margin-inline: auto;
-  max-width: 80rem;
-}
-
-@mixin grid-center($top-offset:1, $bottom-offset:1, $left-offset:1, $right-offset:1) {
-  display: grid;
-  grid-template-rows: $top-offset*1fr 1fr $bottom-offset*1fr;
-  grid-template-columns: $left-offset*1fr 1fr $right-offset*1fr;
-  grid-template-areas:
-    ". . ."
-    ". main ."
-    ". . .";
-
-  div {
-    place-self: center;
-    grid-area: main;
-  }
-  footer {
-    @extend .row;
-    flex-wrap: nowrap;
-
-    margin-bottom: 2vh;
-    position: static;
-    grid-row: 3 / span 1;
-    grid-column: 2 / span 1;
-    place-self: end center;
-
-  }
-}
-
-.grid-center {
-  @include grid-center;
-}
-
-.grid-center--offset {
-  @include grid-center($top-offset: 0.7);
-}
-
-.grid-center--offset-wide {
-  @include grid-center($top-offset: 0.7, $left-offset: 0.5, $right-offset: 0.5);
-}
-
-.fixed {
-  position: fixed;
-}
-
-.scroll {
-  position: scroll;
-}
-
-/* ---------- */
-/* Tag Styles */
-/* ---------- */
-
-body {
-  overflow: hidden;
-  background-color: black;
-
-  @extend .column;
-}
-
-main {
-  width: 90%;
-  height: 100vh;
-
-  background-color: $color-dark;
-
-  * {
-    z-index: 100;
-  }
-}
-
-/* Text */
-
-h1 {
-  margin: 5px 5px;
-
-  font-family: serif;
-  font-size: $fs-700;
-  text-align: center;
-
-  color: $color-light;
-}
-
-h2 {
-  font-family: serif;
-  font-size: $fs-600;
-  text-align: center;
-
-  color: $color-white;
-}
-
-h3 {
-  font-family: sans-serif;
-  font-size: $fs-500;
-
-  color: $color-white;
-}
-
-p {
-  margin: 5px 0px;
-
-  font-family: sans-serif;
-  font-size: $fs-300;
-  text-align: left;
-
-  color: $color-white;
-}
-
-/* Lists, Modifiers */
-
-ol {
-  margin: 0;
-  list-style-type: decimal;
-}
-
-ul {
-  list-style-type: none;
-  li {
-    &:before {
-      content: "- ";
-    }
-  }
-}
-
-li {
-  @extend p
-}
-
-a {
-  position: relative;
-  z-index: 999;
-
-  text-decoration: none;
-
-  &:link {
-    color: $color-white;
-  }
-  &:visited {
-    color: color.adjust($color-white, $lightness: -20%);
-  }
-}
-
-/* Semantic */
-
-footer {
-  position: fixed;
-  bottom: 0px;
-}
-
-/* ------------- */
-/* ILIA Specific */
-/* ------------- */
-
-#overlay {
-  width: 100%;
-  height: 100vh;
-  position: fixed;
-
-  opacity: 0.03;
-  z-index: 1;
-  background-image: url('../img/noise.gif');
-  background-size: 25%;
-}
-
-/* Animations */
-// GRADIENTS (you might need them!)
-$rainbow-gradient: repeating-linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange, red, violet);
-
-// ANIMATIONS (love to see them)
-@keyframes gradient-bg {
-  from {
-    background-position: 0%;
-  }
-  to {
-    background-position: 100%;
-  }
-}
-
-@mixin rainbow-text() {
-  animation: gradient-bg 4s linear infinite;
-}
-
-// MARKS
-mark.rainbow {
-  background-image: $rainbow-gradient;
-  background-size: 1000% 1000%;
-  color: transparent;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  @include rainbow-text();
-}
-
-// ALIASES
-mark.internet {
-  @extend .rainbow;
-  font-weight: bold;
-}

src/scss/index.scss

@@ -1,13 +1,16 @@
-@import "ilia1";
+@use "waltuh/waltuh";
+@use "waltuh/variables" as *;
+
+#pgp_a {
+	position: fixed;
+	display: none;
+
+	font-size: $fs-200;
+	margin-top: 0.6rem;
+}
 
 footer {
-    a {
-      display: table-cell;
-      height: 6vh;
-      width: 15%;
-      margin: 3%;
-
-      font-size: 6vh;
-      text-align: center;
-    }
+	width: 100%;
+	font-size: clamp(2rem, $fs-800, 15vw);
+	justify-content: center !important;
 }

src/scss/pictures.scss

@@ -0,0 +1,55 @@
+@use "waltuh/waltuh";
+
+main {
+	grid-template-rows: 0.1fr 1fr 1fr !important; // Override default
+	grid-template-columns: 15vw 1fr 15vw !important; // Mobile compat is less of a concern for this page
+
+	div:first-child {
+		div:first-child {
+			display: flex;
+			flex-direction: column;
+			flex-wrap: wrap;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+}
+
+h1 {
+	margin-top: 3vh;
+}
+
+summary {
+	margin-left: 0.5rem;
+	margin-right: 0.5rem;
+}
+
+.gallery {
+	width: 100%;
+	margin-top: 3vh;
+
+	display: flex;
+	justify-content: space-evenly;
+	align-items: center;
+
+	flex-wrap: wrap;
+
+	img {
+		width: clamp(12rem, calc(20vw + 1vmin), calc(20vw + 1vmin)); // Add 1vmin to account for padding
+		aspect-ratio: auto;
+
+		margin: 1vmin 1vmin;
+		padding: 1vmin 1vmin;
+
+		background: white;
+
+		+ .black-bg {
+			background: black !important;
+		}
+		+ .no-bg {
+			background: transparent !important;
+		}
+	}
+
+	
+}

src/scss/reset.scss

@@ -1,59 +0,0 @@
-/* Font Sizes */
-
-$fs-900: calc(125rem / 16);
-$fs-800: calc(75rem / 16);
-$fs-700: calc(56rem / 16);
-$fs-600: calc(32rem / 16);
-$fs-500: calc(28rem / 16);
-$fs-400: calc(24rem / 16);
-$fs-300: calc(18rem / 16);
-$fs-200: calc(16rem / 16);
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-body, h1, h2, h3, h4, h5, h6, p {
-  margin: 0;
-}
-
-h1, h2, h3 {
-  line-height: 1.1;
-}
-
-body {
-  font-family: sans-serif;
-  font-size: $fs-400;
-  color: hsl(0, 0%, 0%);
-  background-color: hsl(0, 0%, 100%);
-  line-height: 1.5;
-  min-height: 100vh;
-}
-
-img, picture {
-  max-width: 100%;
-  display: block;
-}
-
-input, button, textarea, select {
-  font: inherit;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behaviour: auto !important;
-	}
-}
-
-@mixin mobile() {
-  @media (pointer: coarse) {
-    @content;
-  }
-  }

src/scss/waltuh/_variables.scss

@@ -0,0 +1,52 @@
+@use "sass:color";
+@use "sass:math";
+
+$-color-white: hsl(280 30% 80%);
+$-color-dark:  color.adjust($-color-white, $lightness: -50%);
+$-color-light: hsl(190 80% 30%);
+$-ff-mono: "Inconsolata", monospace;
+$-ff-serif: "Playfair", serif;
+$-ff-sans: "Jost", sans-serif;
+$-fs-900: math.div(100rem, 16);
+
+@forward "base" with (
+  $color-white: $-color-white,
+  $color-dark: $-color-dark,
+  $color-light: $-color-light,
+  $ff-serif: $-ff-serif,
+  $ff-sans: $-ff-sans,
+  $ff-mono: $-ff-mono,
+  $fs-900: $-fs-900
+);
+
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/fonts/Inconsolata.ttf");
+
+  font-display: swap;
+  font-variation-settings: "wdth" 85;
+}
+
+@font-face {
+  font-family: "Jost";
+  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

@@ -0,0 +1,242 @@
+//
+//
+// Do Not Change This File!
+//
+//
+@use "sass:math";
+/* ----------------- */
+/* Custom Properties */
+/* ----------------- */
+/*
+  This values are to be overridden
+  after being injected into
+  the global scope.
+*/
+
+  /* colors */
+
+$color-dark:  hsl(0 0% 0%) !default; /* Black */
+$color-light: hsl(0 0% 50%) !default; /* Gray */
+$color-white: hsl(0 0% 100%) !default;/* White */
+
+  /* font */
+
+  /* Sizes divided by 16 so values given in px */
+$fs-900: math.div(125rem, 16) !default;
+$fs-800: math.div(75rem, 16) !default;
+$fs-700: math.div(56rem, 16) !default;
+$fs-600: math.div(32rem, 16) !default;
+$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 */
+/* --------------- */
+
+/* Layouts */
+
+.container {
+  padding-inline: clamp(0.5rem, 4rem, 5rem);
+  margin-inline: auto;
+  max-width: 80rem;
+}
+
+.flex {
+  display: flex;
+  gap: 2rem;
+}
+
+.column {
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  align-content: center;
+  max-width: 800px;
+}
+
+.column-tight {
+  @extend .column;
+  gap: 0rem;
+}
+
+.row {
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-content: baseline;
+  max-width: 100%;
+}
+
+.two-columns {
+  display: grid;
+  /* Will shrink to one column, never exceed two!
+   * The `max` in `minmax` asks that the columns
+   * be no smaller */
+  grid-template-columns: repeat(auto-fit, minmax(max(30rem, 40%), 1fr));
+  column-gap: 1rem;
+  justify-content: space-evenly;
+}
+
+.lock-bottom {
+  position: fixed;
+  bottom: 0%;
+}
+
+.span-full-width {
+  width: 100%;
+}
+
+/* Other */
+
+.hr::after { /* Add fake hr after header */
+  content: '';
+
+  position: absolute;
+  display: block;
+  clear: both;
+  width: 100%;
+  height: 0.15rem;
+
+  background-color: black;
+}
+
+/* Color Classes */
+
+.bg-dark  { background-color: $color-dark; }
+.bg-light { background-color: $color-light; }
+.bg-white { background-color: $color-white; }
+
+.text-dark  { color: $color-dark; }
+.text-light { color: $color-light; }
+.text-white { color: $color-white; }
+
+/* Font Classes */
+
+.fs-900 { font-size: $fs-900; }
+.fs-800 { font-size: $fs-800; }
+.fs-700 { font-size: $fs-700; }
+.fs-600 { font-size: $fs-600; }
+.fs-500 { font-size: $fs-500; }
+.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 {
+  margin-bottom: 3vh;
+}
+
+section:not(:last-of-type) {
+  margin-bottom: 3vh;
+}
+
+footer {
+  margin-top: 3vh;
+}
+
+/* ----- */
+/* Reset */
+/* ----- */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body, h1, h2, h3, h4, h5, h6, p {
+  margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p {
+  font-weight: 400;
+}
+
+h1, h2, h3 {
+  line-height: 1.1;
+}
+
+body {
+  font-family: $ff-sans;
+  font-size: $fs-400;
+  color: $color-dark;
+  background-color: $color-white;
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+main {
+  margin-left: 1vw;
+  margin-top: 1vh;
+  * {
+    z-index: 2;
+  }
+}
+
+footer {
+  z-index: 2;
+}
+
+img, picture {
+  max-width: 100%;
+  display: block;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behaviour: auto !important;
+	}
+}
+
+/* -------------------- */
+/* Non-Reusable Classes */
+/* -------------------- */
+/* meant for these pages
+ * only, not to be used
+ * in practice          */
+
+.colors--block {
+  padding: 3rem 1rem 1rem;
+  border: 1px solid black;
+}

src/scss/waltuh/components/_book_entry.scss

@@ -0,0 +1,61 @@
+.book-entry-container {
+  width: 100%;
+}
+
+.book-entry {
+  width: 100%;
+  position: relative;
+  margin-bottom: 1vh !important;
+  &:last-of-type {
+    margin-bottom: 5vh;
+  }
+  details {
+    summary {
+      cursor: pointer;
+      user-select: none;
+    }
+    div {
+      display: grid;
+      grid-template-columns: 1fr 0.5fr 1fr;
+      grid-template-rows: max-content 1fr;
+      grid-template-areas:
+        "author year score"
+        "comments comments comments";
+
+      padding: 2%;
+      padding-top: 0px;
+    }
+
+    &[open] {
+      border: 2px solid;
+      border-top: none;
+    }
+  }
+}
+
+.book-entry__author {
+  grid-area: author;
+  justify-self: end;
+  font-family: "Inconsolata", monospace;
+}
+.book-entry__year {
+  grid-area: year;
+  justify-self: center;
+  font-family: "Inconsolata", monospace;
+}
+.book-entry__score {
+
+  grid-area: score;
+  justify-self: start;
+  font-family: "Inconsolata", monospace;
+  &:before {
+    content: "Score: ";
+  }
+  &:after {
+    content: " / 10";
+  }
+}
+.book-entry__comments {
+  grid-area: comments;
+  padding-top: 0.5rem;
+}

src/scss/waltuh/components/_index.scss

@@ -0,0 +1,4 @@
+@forward "header";
+@forward "overlay";
+@forward "marks";
+@forward "book_entry";

src/scss/waltuh/components/_marks.scss

@@ -0,0 +1,70 @@
+@use "sass:math";
+@use "sass:color";
+@use "../variables" as *;
+
+
+@keyframes waltuh-gradient-anim {
+  $r: 6em;
+  $pd: math.div(2*math.$pi,10);
+  from {
+    background-position: 6em 0em;
+  }
+  @for $i from 1 through 9 {
+    #{$i*10}% {
+      background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd);
+    }
+  }
+  to {
+    background-position: 6em 0em;
+  }
+}
+@keyframes wipeIn {
+  from { clip-path: inset(0 100% 0 0); }
+  to { clip-path: inset(0 0 0 0); }
+}
+
+span.waltuh-gradient {
+  font-weight: 600;
+
+  color: transparent;
+  $grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%);
+  $grad2: color.adjust($grad1, $lightness: +30%);
+  background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white);
+  background-size: 30vmin 30vmin;
+  background-clip: text;
+
+  animation: waltuh-gradient-anim 12s linear infinite,
+  wipeIn 0.25s ease-in;
+
+}
+
+span.waltuh-gradient-underline {
+  position: relative;
+
+  &::after {
+    @extend span, .waltuh-gradient;
+    background-clip: unset;
+    border-radius: 2rem;
+
+    content: "";
+    position: absolute;
+    bottom: 0.2rem;
+    left: 10%;
+    height: 0.4rem;
+    width: 80%;
+  }
+}
+
+span.spoiler {
+  background: black;
+  color: transparent;
+  user-select: none;
+
+  transition: background 100ms ease,
+              color 100ms ease;
+
+  &:hover, &:active, &:focus {
+    background: inherit;
+    color: inherit;
+  }
+}

src/scss/waltuh/components/_overlay.scss

@@ -0,0 +1,18 @@
+@keyframes overlay-breathe {
+  from {opacity: 0.04;}
+  to {opacity: 0.10;}
+}
+#overlay {
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  position: fixed;
+
+  opacity: 0.10;
+  z-index: 1;
+  background-image: url('https://ilia.moe/img/noise.gif');
+  background-size: 20vmin;
+
+  animation: overlay-breathe 3s ease-in infinite alternate;
+}

src/scss/waltuh/layouts/_grid.scss

@@ -0,0 +1,104 @@
+@use "sass:list";
+@use "../variables" as *;
+
+%grid {
+  display: grid;
+}
+
+@mixin grid-3x3-offset($top: 1fr, $bottom: 1fr, $left: 1fr, $right: 1fr) {
+  //@debug "mixin top: #{$top}";
+  @extend %grid;
+  grid-template-rows: $top 1fr $bottom;
+  grid-template-columns: $left 1fr $right;
+  grid-template-areas:
+    "nw n ne"
+    "w center e"
+    "sw s se";
+}
+
+/* Classes */
+%offset-grid {
+  margin: 0;
+  height: 100vh;
+  width: 100%;
+
+  &>div {
+    justify-self: center;
+    grid-area: center;
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    z-index: 10;
+
+    h1, h2, h3 {
+      display: inline-block;
+      //width: min-content; // Looks terrible in practice
+    }
+  }
+}
+
+// Grid Offset Hell
+// no actually what the heck is happening here omg
+// this is so cursed why did i do this
+$offset-amt: 0.33fr;
+@each $dir in [top, bottom, left, right] {
+  $dir_adj: "";
+  @if $dir {
+    $dir_adj: "--#{$dir}";
+  }
+
+  @each $size, $size_val in (null: 1fr, wide: 20vw, narrow: 1.2fr)  {
+    $size_adj: "";
+    @if $size {
+      $size_adj: "--#{$size}";
+    }
+    .offset-grid#{$dir_adj}#{$size_adj} {
+      $-l: [1fr, 1fr, 1fr, 1fr];
+      @if $dir == top {
+        $-l: [$offset-amt, 1fr, $size_val, $size_val];
+      } @else if $dir == bottom {
+        $-l: [1fr, $offset-amt, $size_val, $size_val];
+      } @else if $dir == left {
+        $-l: [$size_val, $size_val, $offset-amt, 1fr];
+      } @else if $dir == right {
+        $-l: [$size_val, $size_val, 1fr, $offset-amt];
+      }
+      //@debug "list: #{$-l}";
+      //@debug list.nth($-l, 1);
+      @include grid-3x3-offset($top: list.nth($-l,1), $bottom: list.nth($-l,2),
+                               $left: list.nth($-l,3), $right: list.nth($-l,4));
+
+      @extend %offset-grid;
+
+      &--column {
+        @extend .offset-grid#{$dir_adj}#{$size_adj};
+        div {
+          grid-area: n / s;
+          * {
+            max-width: 800px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.side-a {
+  a {
+    grid-area: nw / nw / se / se;
+    z-index: 2;
+  }
+  .side-a__main-content-cover {
+    grid-area: n / n / s / s;
+    width: 110%;
+    height: 100%;
+    z-index: 3;
+    background: rgba(1,1,1,0.05);
+    box-shadow: 0px 0px 10px 10px rgba(1,1,1,0.05);
+    backdrop-filter: blur(1px);
+  }
+}

src/scss/waltuh/layouts/_index.scss

@@ -0,0 +1,2 @@
+@forward "grid";
+@forward "modifiers";

src/scss/waltuh/layouts/_modifiers.scss

@@ -0,0 +1,20 @@
+.fullsize {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+
+  height: 100vh !important;
+  width: 100vw !important;
+}
+
+$gap-sizes: ("small": 1vmin, "mid": 3vmin, "large": 5vmin);
+
+@each $size, $dist in $gap-sizes {
+  @each $dir in [top, bottom, left, right] {
+    .gap-#{$size}-#{$dir} {
+      margin-#{$dir}: $dist;
+    }
+  }
+}

src/scss/waltuh/waltuh.scss

@@ -0,0 +1,17 @@
+/* ------ */
+/*        */
+/* Waltuh */
+/*        */
+/* ------ */
+
+// Global Variables
+@use "variables" as *;
+@use "components";
+@use "layouts";
+
+.fs-900 { font-size: $fs-900; font-weight: 400;}
+.fs-800 { font-size: $fs-800; font-weight: 300;}
+.fs-700 { font-size: $fs-700; font-weight: 250;}
+.fs-600 { font-size: $fs-600; font-weight: 300;}
+.fs-500 { font-size: $fs-500; font-weight: 200;}
+.fs-400 { font-size: $fs-400; font-weight: 200;}