typo :(

Add books page back to cool-stuff
Update books styling
2024-11-09 14:06:42 -06:00 · 2024-11-09 13:42:43 -06:00 · 2024-11-09 13:40:48 -06:00 · 2024-11-09 12:51:32 -06:00 · 2024-11-09 12:42:41 -05:00 · 2024-10-30 22:48:02 -04:00
72 changed files with 2826 additions and 331 deletions
--- a/.github/workflows/fast-deploy.yaml
+++ b/.github/workflows/fast-deploy.yaml
@ -24,7 +24,7 @@ jobs:
          key: ${{ secrets.SSH_KEY }}
          script: |
            cd repo/src
-            sass sass/:css/
+            sass scss/:css/
      - name: Build hugo
        uses: appleboy/ssh-action@master
        with:
@ -42,7 +42,7 @@ jobs:
          username: ubuntu
          key: ${{ secrets.SSH_KEY }}
          script: |
-            sudo su
-            rm -rf /usr/share/nginx/html/ilia.moe
-            cp -r repo/src /usr/share/nginx/html/ilia.moe
-            cp -r repo/hugo/recipe/public /usr/share/nginx/html/ilia.moe/cool-stuff/recipes
+            sudo rm -rf /usr/share/nginx/html/ilia.moe
+            sudo cp -r repo/src /usr/share/nginx/html/ilia.moe
+            sudo cp -r repo/hugo/recipe/public /usr/share/nginx/html/ilia.moe/cool-stuff/recipes
+            sudo cp repo/error_pages/* /usr/share/nginx/html/resources
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,5 @@
 src/css/
+src/pictures
 push_updates.sh
 hugo/*/public/
+hugo/*/resources/_gen/
--- a/.gitmodules
+++ b/.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
--- a/README.md
+++ b/README.md
@ -1,11 +1,6 @@
 # welcome to my ~~video game channel~~ website
-the part that's public, anyway
+the part that's public, anyway --- which is essentially all of it

-There's no backend component to my public website, so it's pretty much "open source" anyway—
-you're downloading it if you open the page.
-I wanted to use git to track it anyway, and GitHub is a pretty easy way to move files around.
-(*just to be super clear—compromising my GitHub would not also imply compromising
-my website*)
-I mean, people who use GitHub pages for a personal website are essentially doing what I'm doing but
-with fewer steps
-(except I'm cooler because I have to manage nginx).
+Everything is pretty messy since I don't have a good handle
+on what I want to host at any one time besides just my
+landing page.
--- a/error_pages/401bob.html
+++ b/error_pages/401bob.html
@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>uh oh!!!</title>
+<style>
+@keyframes bob-move {
+	from {
+		transform:scale(0.8,0.8);
+	}
+	50% {
+		transform:scale(1.2,1.2);
+	}
+	to {
+		transform:scale(0.8,0.8);
+	}
+}
+#bob {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+
+	background-image: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcdn3.bigcommerce.com%2Fs-d2dn6h1e%2Fproducts%2F77%2Fimages%2F339%2Fbobthebuilder__87641.1444836482.1280.1280.jpg%3Fc%3D2&f=1&nofb=1);
+	background-repeat: no-repeat;
+
+	animation-duration: 0.15s, 1s;
+	animation-name: bob-move;
+	animation-iteration-count: infinite;
+}
+h1, h2 {
+	margin: 0;
+}
+#toggle {
+	position: absolute;
+	top: -100vh;
+	left: -100vw;
+}
+
+#lorem-div {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	height: 100vh;
+	width: 100wv;
+	opacity: 0;
+	color: brown;
+	user-select: none;
+	-webkit-user-select: none;
+}
+input[type=checkbox]:checked ~ #lorem-div {
+	opacity: 1;
+	height: 100%;
+	width: 100%;
+	transform: scale(1.3,2.9) rotate(-38deg);
+}
+#lorem-div > label {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+#lorem-div > p {
+	width: 100%;
+	height: 100%;
+}
+</style>
+	</head>
+	<body style="overflow:hidden">
+		<div id="bob"></div>
+		<h1>
+			please do not step on us
+		</h1>
+		<h2>
+			we are trying to grow
+		</h2>
+		<p>
+			this site is under construction right now.
+		</p>
+		<input type="checkbox" id="toggle">
+		<div id="lorem-div">
+			<label for="toggle">
+			<p>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus, lacus in volutpat tristique, nisl purus cursus massa, et tempus neque est in augue. Donec eget mi viverra, viverra libero at, maximus ante. Vestibulum quis purus quis tortor porta pretium id ut augue. Nullam commodo finibus lorem non vehicula. Ut mollis lacus in laoreet blandit. Donec consequat bibendum nibh, sed imperdiet dolor. Nullam feugiat sem massa, eget dapibus augue feugiat a. Phasellus mollis condimentum fermentum. Morbi et orci quis purus semper dictum vitae ac mi.
+
+Pellentesque ut nulla eget lorem rhoncus maximus non sed arcu. Maecenas ornare posuere lorem, in mattis nibh tristique porta. Aliquam consequat odio eu erat fringilla facilisis. Duis et lectus luctus, varius urna eleifend, iaculis felis. Ut eget sodales orci. Praesent a sagittis erat. Suspendisse at augue velit.
+
+Etiam vel libero imperdiet, facilisis ex et, sollicitudin sem. Mauris egestas id tortor id hendrerit. Pellentesque scelerisque eu urna id commodo. Donec lacinia vel ex eu ultricies. Etiam sagittis dolor justo. Phasellus suscipit feugiat justo, malesuada tempus urna condimentum sed. Quisque gravida semper neque tincidunt aliquet. Pellentesque aliquam dui quis lorem efficitur, id congue dui tempus.
+
+Nulla eu mauris vel elit sodales eleifend nec vel lectus. Nunc a fringilla nibh, vitae mollis ex. Pellentesque feugiat scelerisque neque vel dignissim. Cras eget metus id justo vulputate consectetur. Mauris eget orci eu sem vulputate euismod. Phasellus nisl erat, suscipit et nulla at, pharetra vestibulum massa. Cras malesuada, dolor a eleifend vehicula, mi mauris auctor mi, nec condimentum nibh tellus eget lorem. Praesent a nisi nec elit lobortis aliquet convallis eu justo. Curabitur non lectus sit amet magna malesuada ultrices. Integer sed neque vel justo finibus suscipit. Duis eu tincidunt nulla, aliquet posuere mauris. Donec sit amet massa sed elit venenatis posuere. Donec ipsum lacus, laoreet a rhoncus vel, tincidunt auctor sapien. Mauris fermentum arcu non ultrices ullamcorper. Nullam commodo diam sit amet vehicula pharetra.
+
+Morbi luctus non elit ut mollis. Nunc bibendum sagittis vestibulum. Curabitur tincidunt massa dolor, eget fermentum risus vestibulum vel. In ac est in enim malesuada congue a a nisi. Nunc sit amet fermentum ligula. Donec turpis leo, ullamcorper et est nec, lobortis maximus magna. Vestibulum quis auctor libero. Mauris lacus sem, sagittis et porta id, posuere eu neque. Quisque nulla nulla, imperdiet aliquet pretium eget, imperdiet at arcu. Duis rutrum, tortor at luctus luctus, ligula lacus lacinia ipsum, eget commodo nibh lectus id magna.
+
+In consequat nunc ligula, et consectetur turpis venenatis in. Sed in enim bibendum, imperdiet justo ut, aliquet felis. Integer eget lectus orci. Maecenas nulla dolor, lobortis eu elit nec, fringilla dapibus dui. Quisque faucibus finibus tempus. Sed nec elit sed felis pellentesque malesuada. Aliquam dignissim, dui in dignissim elementum, erat est vestibulum ligula, non efficitur mi sem quis nunc. Ut semper, ex vel consectetur ultrices, justo nunc sagittis nulla, nec porta odio magna quis felis. Aliquam luctus pellentesque accumsan. Nam cursus sapien id mauris efficitur, eget lacinia mi volutpat. Ut varius euismod arcu a accumsan. Nulla tellus neque, interdum id convallis vitae, molestie vitae velit. Integer rutrum malesuada mauris at pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris leo sem, aliquet et lacinia sed, laoreet ac nibh. Integer eu dui vitae lectus pulvinar ullamcorper ac sit amet felis.
+
+Curabitur dictum et tellus ac dignissim. Suspendisse semper tempus sapien. Integer eget enim hendrerit nisi sollicitudin lobortis. In at lacinia dolor. Etiam consequat condimentum ligula, vitae tempus enim rhoncus quis. Curabitur eget leo consequat, suscipit erat eu, tempus velit. Phasellus finibus eu nisl non mollis. Suspendisse tincidunt euismod nulla eu mattis. Duis scelerisque felis magna, consectetur fringilla tortor aliquet nec. Nullam faucibus, nisi non rhoncus congue, felis nisi pulvinar felis, a dignissim justo quam ac dui. Phasellus eu lectus ut urna sagittis rhoncus eget vitae lorem. Nulla maximus ante quis nibh euismod dignissim. Integer id viverra massa. Nam vulputate, nibh viverra bibendum pharetra, arcu nibh consectetur leo, eget efficitur leo mi at orci.
+
+Sed gravida sem lorem, et tempus arcu mollis nec. Proin vestibulum enim eu metus luctus lobortis. Donec ac eros eget lectus vulputate semper sed et urna. Nullam placerat vestibulum purus. Praesent et tincidunt urna. Suspendisse potenti. Suspendisse potenti. Praesent mauris massa, ultricies varius lacinia et, pulvinar ac libero. Aenean venenatis varius eros, a ornare eros malesuada ut. Aenean rutrum dictum neque vitae placerat. Donec arcu lectus, lacinia interdum tortor eu, vestibulum finibus est. Fusce volutpat nec sem vitae aliquet. Sed quis sem non felis egestas varius. Maecenas mauris dolor, dapibus sit amet vestibulum ac, ullamcorper id urna. Vivamus sed iaculis velit, non mattis est.
+
+Suspendisse feugiat nisl eros, pharetra rutrum neque congue ac. Nunc ornare eros vitae faucibus aliquet. Fusce luctus lorem augue, non fermentum quam ullamcorper at. Ut gravida nulla nec nibh fermentum, et fermentum metus semper. Praesent molestie massa at tempus tincidunt. Donec ornare metus at nisl varius, id porttitor tellus euismod. Aenean eget odio nec urna rutrum rutrum at et ipsum. Fusce efficitur quam quis ornare pulvinar.
+
+Maecenas feugiat erat id purus imperdiet fermentum. Vestibulum porta fermentum est, sed vehicula magna dapibus eu. Morbi sem felis, tincidunt malesuada diam eu, condimentum eleifend erat. Maecenas mattis dolor quis tempus blandit. Proin egestas sem sed augue hendrerit viverra. Maecenas commodo dui sit amet sem tristique, id rutrum ante mollis. Suspendisse venenatis efficitur urna, efficitur bibendum diam dignissim id. Curabitur et ex molestie, gravida ex vel, accumsan nulla. Nam vulputate elementum magna a imperdiet.
+		</p>
+			</label>
+		</div>
+	</body>
+</html>
--- a/error_pages/502peepy.html
+++ b/error_pages/502peepy.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+	<body style="overflow:hidden">
+<style>
+@keyframes peepy-move {
+	from {
+		transform: rotate(3deg) scale(0.9,0.9) translate(-5%,-5%);
+	}
+	50% {
+		transform: rotate(-3deg) scale(1.1,1.1) translate(5%,5%);
+	}
+	to {
+		transform: rotate(3deg) scale(0.9,0.9) translate(-5%,-5%);
+	}
+}
+@keyframes peepy-color {
+	from {
+		filter: hue-rotate(0deg)
+	}
+	to {
+		filter: hue-rotate(359deg)
+	}
+}
+.peepy {
+	position: absolute;
+	top: -20%;
+	left: -20%;
+	width: 140%;
+	height: 140%;
+	z-index: -1;
+
+	background-image: url(https://cdn.shopify.com/s/files/1/2597/3774/products/itemlabel-cow-peepy-site-1.jpg?v=1620839788&width=1200);
+	background-size: 25% 25%;
+	animation-duration: 0.2s, 1s;
+	animation-name: peepy-move, peepy-color;
+	animation-iteration-count: infinite;
+
+}
+</style>
+		<div class="peepy"></div>
+		<h1 style="transform: rotate(15deg) translate(10vw,50vh); text-align: center;">
+		peepy. peepy. have you seen him? i love peepy.
+		do you love peepy?
+		i need peepy. peepy?
+		peepy.
+		<h2>
+	</body>
+</html>
--- a/hugo/recipe/config.toml
+++ b/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
--- a/hugo/recipe/content/_index.md
+++ b/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
--- a/hugo/recipe/content/fettuccine-alfred.md
+++ b/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
--- a/hugo/recipe/content/hot-chocolate.md
+++ b/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 />
--- a/hugo/recipe/content/mac-and-cheese.md
+++ b/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
--- a/hugo/recipe/content/pumpkin-brownies.md
+++ b/hugo/recipe/content/pumpkin-brownies.md
@ -0,0 +1,27 @@
+---
+title: "Pumpkin Brownies"
+lastmod: 2022-09-10T14:21:19-04:00
+date: 2022-09-10T14:21:19-04:00
+author: "Emilia"
+tags: ["baked"]
+---
+
+### Ingredients
+- 1 cup butter
+- 1.5 cups brown sugar
+- 1 Tbsp pumpkin pie spice
+	- Can substitute choice of cinnamon, ginger, cloves, and nutmeg
+- 2 tsp vanilla
+- 1 tsp salt
+- 1 tsp baking powder
+- 1 egg
+- 1 cup pumpkin puree
+- 2.25 cups flour
+
+### Procedure
+1. (Optional) Brown butter in a sauce pan, then cool
+2. Combine melted butter and sugar in a mixing bowl
+3. Add in spice, vanilla, salt, baking powder, egg, and pumpkin. Mix until combined.
+4. Slowly incorporate flour
+5. Spread batter in a greased 9x13 pan (or other size)
+6. Bake @350°F for 30–35 minutes
--- a/hugo/recipe/content/sandwich-bread.md
+++ b/hugo/recipe/content/sandwich-bread.md
@ -0,0 +1,30 @@
+---
+title: "Sandwich Bread"
+lastmod: 2022-09-10T14:33:38-04:00
+date: 2022-09-10T14:33:38-04:00
+author: "Emilia"
+tags: ["baked"]
+---
+
+### Ingredients
+- 0.75 cups water
+- 0.5 cups milk
+- 1 Tbsp yeast
+- 3 cups flour
+- 1.5 tsp salt
+- 1 Tbsp sugar
+- 3 Tbsp unsalted butter
+
+### Procedure
+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&deg;F for 35 to 40 minutes
--- a/hugo/recipe/content/sticky-buns.md
+++ b/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"
--- a/hugo/recipe/themes/ilia-hugo-theme
+++ b/hugo/recipe/themes/ilia-hugo-theme
@ -1 +1 @@
-Subproject commit b33d57d56576d0d78abf92c966ca65affcffe79f
+Subproject commit 9dc35c1017df047a6b244ac8a431e0694fd54547
--- a/hugo/recipe/themes/waltuh-hugo-theme
+++ b/hugo/recipe/themes/waltuh-hugo-theme
@ -0,0 +1 @@
+Subproject commit 5671f376d5c80b2f125c17af373665f417aebd85
--- a/src/Makefile
+++ b/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
--- a/src/about.html
+++ b/src/about.html
@ -6,26 +6,28 @@
 		<meta name="viewport" content="width=device-width,initial-scale=1">
 	</head>
 	<body>
-		<div class="overlay">
-		</div>
-		<div class="outerdiv contentholder">
-			<div class="contentholder__topfiller"></div>
-			<div class="content">
-				<h1>
+		<div id="overlay"></div>
+		<main class="offset-grid--top--wide fullsize side-a">
+			<div>
+			<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 class="content">
-				<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
 					<ol>
@ -33,17 +35,22 @@ the modern internet is bloated
 					</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>
+			</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>
--- a/src/cool-stuff/books.html
+++ b/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>
--- a/src/cool-stuff/css-purgatory/base/.gitignore
+++ b/src/cool-stuff/css-purgatory/base/.gitignore
@ -0,0 +1 @@
+css/
--- a/src/cool-stuff/css-purgatory/base/Makefile
+++ b/src/cool-stuff/css-purgatory/base/Makefile
@ -0,0 +1,14 @@
+clean:
+	rm css/*
+
+css:
+	sass scss:css
+
+css-watch:
+	sass -w scss:css
+
+server:
+	python -m http.server
+
+dev:
+	make -j 2 css-watch server
--- a/src/cool-stuff/css-purgatory/base/index.html
+++ b/src/cool-stuff/css-purgatory/base/index.html
@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>CSS Purgatory - Base</title>
+	<link rel="stylesheet" href="css/base.css">
+	<!-- Base v1.1 -->
+</head>
+<body>
+<main>
+	<header id="title" class="hr">
+		<h1>Base</h1>
+	</header>
+	<article class="">
+	<section id="description" class="hr">
+		<h2>Description</h2>
+		<div class="container">
+			<p><em>Base</em> is not a style, it is a template for other styles to be copied from</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
+			</div>
+			<div>
+				<div class="colors--block bg-light text-white">#Color hex code</div>
+				<p> HSL: Color hsl
+			</div>
+			<div>
+				<div class="colors--block bg-white text-dark">#Color hex code</div>
+				<p> HSL: Color hsl
+			</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">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-serif fs-800">Heading 2</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-serif fs-700">Heading 3</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-600">Heading 4</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-500">Heading 5</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-400">Heading 6</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-300">Text</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+
+			<div>
+				<p class="ff-sans-cond fs-200">Subtext</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+		</div>
+	</section>
+
+	
+
+	<section id="samples" class="hr">
+		<h2>Sample Pages</h2>
+		<ul class="container two-columns">
+			<li><a href="samplepage">First Sample Page</a></li>
+			<li><a href="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>
--- a/src/cool-stuff/css-purgatory/base/landingpage.html
+++ b/src/cool-stuff/css-purgatory/base/landingpage.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Base - Landing Page</title>
+	<link rel="stylesheet" href="css/base.css">
+	<style>
+		body {
+		overflow: hidden;
+		}
+	</style>
+	<!-- Base v1.1 -->
+</head>
+<body>
+<main>
+<header>
+	<div class="container flex column">
+		<h1 class="text-dark">Base Landing Page</h1>
+		<p>One might want a flashy landing page</p>
+	</div>
+</header>
+</main>
+<footer class="lock-bottom">
+	<a href="./">Return to Base</a>
+</footer>
+</body>
+</html>
--- a/src/cool-stuff/css-purgatory/base/samplepage.html
+++ b/src/cool-stuff/css-purgatory/base/samplepage.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Base - Sample Page</title>
+	<link rel="stylesheet" href="css/base.css">
+	<!-- Base v1.1 -->
+</head>
+<body>
+<main>
+<header id="title">
+	<h1>
+		Base - 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 Base</a>
+</footer>
+</main>
+</body>
+</html>
--- a/src/cool-stuff/css-purgatory/base/scss/base.scss
+++ b/src/cool-stuff/css-purgatory/base/scss/base.scss
@ -0,0 +1,206 @@
+@use "sass:math";
+@mixin reset {
+/* ----------------- */
+/* Custom Properties */
+/* ----------------- */
+/*
+  This values are to be overridden
+  after being injected into
+  the global scope.
+*/
+
+  /* colors */
+
+$color-dark:  hsl(0 0% 0%); /* Black */
+$color-light: hsl(0 0% 50%); /* Gray */
+$color-white: hsl(0 0% 100%);/* White */
+
+  /* font */
+
+  /* Sizes divided by 16 so values given in px */
+$fs-900: math.div(125rem, 16);
+$fs-800: math.div(75rem, 16);
+$fs-700: math.div(56rem, 16);
+$fs-600: math.div(32rem, 16);
+$fs-500: math.div(28rem, 16);
+$fs-400: math.div(24rem, 16);
+$fs-300: math.div(18rem, 16);
+$fs-200: math.div(16rem, 16);
+
+$ff-serif: serif;
+$ff-sans-cond: sans-serif;
+$ff-sans: sans-serif;
+
+/* --------------- */
+/* 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;
+}
+
+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;
+	}
+}
+}
+
+@include reset;
+
+/* -------------------- */
+/* Non-Reusable Classes */
+/* -------------------- */
+/* meant for these pages
+ * only, not to be used
+ * in practice          */
+
+.colors--block {
+  padding: 3rem 1rem 1rem;
+  border: 1px solid black;
+}
--- a/src/cool-stuff/css-purgatory/index.html
+++ b/src/cool-stuff/css-purgatory/index.html
@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>CSS Purgatory - Emilia Allison</title>
+		<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
+		 */
+		.contentholder .contentholder__topfiller {
+			height: 5vh;
+			background-color: transparent;
+		}
+	</style>
+	</head>
+	<body>
+		<div class="overlay"></div>
+		<main class="offset-grid--top--wide fullsize">
+			<div>
+				<h1>
+					CSS Purgatory
+				</h1>
+				<h2>i have not read <i>Purgatorio</i></h2>
+				<p>
+				The styling here will probably land me in purgatory
+				</p>
+				<h1>
+					the styles
+				</h1>
+				<ol>
+					<li>
+							<h3>
+								<a href="base">base</a>
+							</h3>
+							<p>
+								Base format for color and typography schemes
+							</p>
+					</li>
+					<li>
+							<h3>
+								<a href="https://ilia.moe">ilia1</a>
+							</h3>
+							<p>
+							First layout used for <a href="https://ilia.moe">the homepage</a>
+							</p>
+					</li>
+					<li>
+						<h3>
+							<a href="pink">pink</a>
+						</h3>
+						<p>
+							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>
+	</body>
+</html>
--- a/src/cool-stuff/css-purgatory/pink/index.css
+++ b/src/cool-stuff/css-purgatory/pink/index.css
@ -0,0 +1,173 @@
+/* ----------------- */
+/* Custom Properties */
+/* ----------------- */
+/* Many of the prop-
+ * erties here are
+ * where the substa-
+ * ntive changes
+ * will be made      */
+
+:root {
+
+  /* colors */
+
+  --color-dark: 348 79% 81% ;/* White */
+  --color-light: 0 0% 50% ; /* Gray */
+  /*--color-white: 348 79% 97% ;*/
+  --color-white: var( --color-dark) / .2  ;
+  --color-accent: 45 79% 81% ;/* White */
+
+  /* font */
+
+  /* Sizes divided by 16 so values given in px */
+  --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);
+
+  --ff-serif: serif;
+  --ff-sans-cond: sans-serif;
+  --ff-sans: sans-serif;
+
+}
+
+/* ----- */
+/* 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: var(--ff-sans);
+  font-size: var(--fs-400);
+  color: hsl( var(--color-dark) );
+  background-color: hsl( var(--color-white) );
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+main {
+  margin-left: 1vw;
+  margin-top: 1vh;
+}
+
+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;
+	}
+}
+
+
+/* --------------- */
+/* Utility Classes */
+/* --------------- */
+
+.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;
+}
+
+.container {
+  padding-inline: clamp(0.5rem, 4rem, 5rem);
+  margin-inline: auto;
+  max-width: 80rem;
+}
+
+/* Color Classes */
+
+.bg-dark  { background-color: hsl( var(--color-dark) ); }
+.bg-light { background-color: hsl( var(--color-light) ); }
+.bg-white { background-color: hsl( var(--color-white) ); }
+
+.text-dark  { color: hsl( var(--color-dark) ); }
+.text-light { color: hsl( var(--color-light) ); }
+.text-white { color: hsl( var(--color-white) ); }
+
+/* Font Classes */
+
+.fs-900 { font-size: var(--fs-900); }
+.fs-800 { font-size: var(--fs-800); }
+.fs-700 { font-size: var(--fs-700); }
+.fs-600 { font-size: var(--fs-600); }
+.fs-500 { font-size: var(--fs-500); }
+.fs-400 { font-size: var(--fs-400); }
+.fs-300 { font-size: var(--fs-300); }
+.fs-200 { font-size: var(--fs-200); }
+
+.ff-serif { font-family: var(--ff-serif); }
+.ff-sans-cond { font-family: var(--ff-sans-cond); }
+.ff-sans { font-family: var(--ff-sans); }
+
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
+
+/* -------------------- */
+/* Non-Reusable Classes */
+/* -------------------- */
+/* meant for these pages
+ * only, not to be used
+ * in practice          */
+
+.colors--block {
+  padding: 3rem 1rem 1rem;
+  border: 1px solid black;
+}
--- a/src/cool-stuff/css-purgatory/pink/index.html
+++ b/src/cool-stuff/css-purgatory/pink/index.html
@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>CSS Purgatory - pink</title>
+	<link rel="stylesheet" href="index.css">
+	<!-- Base v1 -->
+</head>
+<body>
+<main>
+	<header id="title">
+		<h1>pink</h1>
+	</header>
+
+	<hr>
+
+	<article class="">
+	<section id="description">
+		<h2>Description</h2>
+		<div class="container">
+		<p>
+			<em>pink</em> is being considered as a replacement for <em>ilia1</em>.
+			While <em>ilia1</em> features a dark background and a static effect overlay,
+			<em>pink</em> is meant to be brighter.
+		</p>
+		</div>
+	</section>
+
+	<hr>
+
+	<section id="colors">
+		<h2>Colors</h2>
+		<div class="container flex">
+			<div>
+				<div class="colors--block bg-dark text-white">#Color hex code</div>
+				<p> HSL: 348 79% 81%
+			</div>
+			<div>
+				<div class="colors--block bg-light text-white">#Color hex code</div>
+				<p> HSL: 0 0% 50%
+			</div>
+			<div>
+				<div class="colors--block bg-white text-dark">#f5a8b8</div>
+				<p> HSL: 348
+			</div>
+			<div>
+				<div class="colors--block bg-white text-dark">#f5a8b8</div>
+				<p> HSL: 348
+			</div>
+		</div>
+	</section>
+
+	<hr>
+
+	<section id="typography">
+		<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">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-serif fs-800">Heading 2</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-serif fs-700">Heading 3</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-600">Heading 4</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-500">Heading 5</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-400">Heading 6</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+			<div>
+				<p class="ff-sans fs-300">Text</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+
+			<div>
+				<p class="ff-sans-cond fs-200">Subtext</p>
+				<p class="ff-sans-cond fs-200 text-light">font information</p>
+			</div>
+
+		</div>
+	</section>
+
+	<hr>
+
+	<section id="samples">
+		<h2>Sample Pages</h2>
+		<ul class="container two-columns">
+			<li><a>First Sample Page</a></li>
+			<li><a>Second Sample Page</a></li>
+			<li><a>Third Sample Page</a></li>
+		</ul>
+	</section>
+	</article>
+
+	<hr>
+
+	<footer>
+		<a href="../">Return to Purgatory</a>
+	</footer>
+
+</main>
+</body>
+</html>
--- a/src/cool-stuff/css-purgatory/waltuh/.gitignore
+++ b/src/cool-stuff/css-purgatory/waltuh/.gitignore
@ -0,0 +1 @@
+css/*
--- a/src/cool-stuff/css-purgatory/waltuh/Makefile
+++ b/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/*
--- a/src/cool-stuff/css-purgatory/waltuh/index.html
+++ b/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>
--- a/src/cool-stuff/css-purgatory/waltuh/landingpage.html
+++ b/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>
--- a/src/cool-stuff/css-purgatory/waltuh/samplepage.html
+++ b/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>
--- a/src/cool-stuff/css-purgatory/waltuh/scss/_variables.scss
+++ b/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;
+}
--- a/src/cool-stuff/css-purgatory/waltuh/scss/base.scss
+++ b/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;
+}
--- a/src/cool-stuff/css-purgatory/waltuh/scss/components/_header.scss
+++ b/src/cool-stuff/css-purgatory/waltuh/scss/components/_header.scss
--- a/src/cool-stuff/css-purgatory/waltuh/scss/components/_index.scss
+++ b/src/cool-stuff/css-purgatory/waltuh/scss/components/_index.scss
@ -0,0 +1,3 @@
+@forward "header";
+@forward "overlay";
+@forward "marks";
--- a/src/cool-stuff/css-purgatory/waltuh/scss/components/_marks.scss
+++ b/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;
+
+}
--- a/src/cool-stuff/css-purgatory/waltuh/scss/components/_overlay.scss
+++ b/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;
+}
--- a/src/cool-stuff/css-purgatory/waltuh/scss/layouts/_grid.scss
+++ b/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;
+    }
+  }
+}
--- a/src/cool-stuff/css-purgatory/waltuh/scss/layouts/_index.scss
+++ b/src/cool-stuff/css-purgatory/waltuh/scss/layouts/_index.scss
@ -0,0 +1,2 @@
+@forward "grid";
+@forward "modifiers";
--- a/src/cool-stuff/css-purgatory/waltuh/scss/layouts/_modifiers.scss
+++ b/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;
+    }
+  }
+}
--- a/src/cool-stuff/css-purgatory/waltuh/scss/waltuh.scss
+++ b/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;}
--- a/src/cool-stuff/index.html
+++ b/src/cool-stuff/index.html
@ -1,40 +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 class="overlay">
+
+<body class="no-overflow">
+	<div id="overlay">
 	</div>
-		<div class="outerdiv contentholder">
-			<div class="contentholder__topfiller"></div>
-			<div class="content">
-				<h1>
+	<main class="offset-grid--top--wide--column side-a">
+		<div>
+			<h1 class="ff-serif fs-700 gap-small-bottom">
 				Cool Stuff
 			</h1>
-				<h2>it's debatable</h2>
+			<h3 class="gap-mid-bottom ff-serif fs-500">it's debatably cool</h3>
+			<span class="ff-sans fs-300 span-full-width">
 			<p>
-Cool stuff is code for links to subpages.
-If a page uses/requires JavaScript, its link will be marked with (&#x2615).
+				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>
+			</span>
+			<h1 class="gap-small-bottom ff-serif fs-700">
 				the stuff
 			</h1>
-				<h3>
-					css purgatory
-				</h3>
-				<p>
-				None yet
-				</p>
-				<h3>
-					Static
+			<h3 class="ff-serif fs-500">
+				Artisan Handcrafted
 			</h3>
+			<span class="ff-sans fs-300 span-full-width">
 			<ul>
-						<li><a href="/cool-stuff/recipes">Recipes</li>
+				<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>
+					I so desperately need to update this section.
+					None of these are up-to-date.
+					</ul>
+				</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>
-		</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>
--- a/src/fonts/Inconsolata.ttf
+++ b/src/fonts/Inconsolata.ttf
--- a/src/fonts/Jost.ttf
+++ b/src/fonts/Jost.ttf
--- a/src/fonts/Playfair.ttf
+++ b/src/fonts/Playfair.ttf
--- a/src/fonts/PlayfairItalic.ttf
+++ b/src/fonts/PlayfairItalic.ttf
--- a/src/fonts/Shantell.ttf
+++ b/src/fonts/Shantell.ttf
--- a/src/fonts/ShantellItalic.ttf
+++ b/src/fonts/ShantellItalic.ttf
--- a/src/index.html
+++ b/src/index.html
@ -12,39 +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 class="overlay">
-		</div>
-		<div class="outerdiv">
-			<div class="name">
-				<h1 class="name__header">Emilia</h1>
-				<!--<p class="name__subcontent">she/her</p>-->
-				<p class="name__subcontent">mathematics enjoyer</p>
-				<p class="name__subcontent" id="pgp_p">pgp: 
-					<a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a">
+<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 class="name__subcontent generated">bottom text</p>
+						</a>
+		</p>
+		<p class="fs-100 padding-mid-top">bottom text (now with extra spice&trade;)</p>
 		</div>
-			<div class="links">
-				<a class="links__sub" title="about" href="about">
+	</div>
+	<footer class="lock-bottom flex row">
+		<a title="about" href="about">
 			&#128196
 		</a>
-				<a class="links__sub" id="moonlink" title="cool stuff" href="cool-stuff">
+		<a id="moonlink" title="cool stuff" href="cool-stuff">
 			&#127772
 		</a>
-				<a class="links__sub" title="git provider" href="https://github.com/em-ilia">
+		<a title="git provider" href="https://git.ilia.moe/explore/repos">
 			&#128187
 		</a>
-				<a class="links__sub" title="i love email" href="mailto:em@ilia.moe">
+		<a title="i love email" href="mailto:em@ilia.moe">
 			&#128224
 		</a>
-			</div>
-		</div>
-	</body>
+		<a id="camera" title="picture" href="pictures">
+			&#128247
+		</a>
+	</footer>
+</main>
 </html>
--- a/src/js/index.js
+++ b/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"}
--- a/src/sass/about.sass
+++ b/src/sass/about.sass
@ -1,2 +0,0 @@
-@import 'global'
-@import 'anim'
--- a/src/sass/anim.sass
+++ b/src/sass/anim.sass
@ -1,26 +0,0 @@
-// 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
--- a/src/sass/global.sass
+++ b/src/sass/global.sass
@ -1,138 +0,0 @@
-@import 'responsive'
-@import 'anim'
-
-$primary-color: #f4b7c3
-$secondary-color: #f4e8b7
-$tertiary-color: #b7c3f4
-$outer-bg: #091519
-//$outer-bg: #f2e1ba // nice sand color, light theme maybe?
-$inner-bg: #112932
-
-@mixin div-center()
-  display: flex
-  justify-content: center
-  align-items: center
-  flex-direction: column
-  align-content: center
-
-*
-  border-color: $tertiary-color
-
-body
-  @include div-center()
-  width: 100%
-  height: 100%
-  padding: 0 0 0 0
-  margin: 0 0 0 0
-  overflow: hidden
-  background-color: black
-
-  --is-mobile: 0
-  @include mobile()
-    --is-mobile: 1
-
-.overlay
-  width: 100%
-  height: 100vh
-
-  position: fixed
-
-  opacity: 0.03
-  z-index: 1
-  background-image: url('../img/noise.gif')
-  background-size: 25%
-
-  @include mobile()
-    background-size: 200%
-
-.outerdiv
-  @include div-center()
-  width: 90%
-  height: 100vh
-  background-color: $outer-bg
-  flex-direction: column
-
-  @include mobile()
-    width: 100%
-
-.contentholder
-  justify-content: flex-start
-  overflow: scroll
-  div
-    width: 30rem
-    margin: 1% 0
-
-    @include mobile
-      width: 20rem
-
-  .contentholder__topfiller
-    height: 5%
-    background-color: transparent
-
-.content
-  z-index: 100
-
-.returnLink *
-  margin: 3% 0
-  font-size: large
-
-
-h1
-  color: $primary-color
-  font-family: serif
-  font-size: xxx-large
-  margin: 5px 5px
-  text-align: center
-
-h2
-  color: $secondary-color
-  font-family: serif
-  font-size: large
-  text-align: center
-
-h3
-  color: $secondary-color
-  font-size: large
-
-p
-  color: $secondary-color
-  font-family: sans-serif
-  font-size: large
-  text-align: left
-  margin: 5px 0px
-
-ol
-  margin: 0px 0px
-  list-style-type: decimal
-
-ul
-  list-style-type: none
-  li
-    &:before
-      content: "- "
-
-li
-  @extend p
-
-a
-  text-decoration: none
-  &:link
-    color: $secondary-color
-  &:visited
-    color: $secondary-color
-
-header
-  margin: 1% 0 1% 0
-
-  border-style: solid
-  border-width: 0px 0px 2px 0px
-
-  h2
-    margin: 0
-    margin-top: -8px
-
-article
-  margin: 3% 0
-
-  border-style: solid
-  border-width: 0px 0px 2px 0px
--- a/src/sass/index.sass
+++ b/src/sass/index.sass
@ -1,51 +0,0 @@
-@import 'global'
-@import 'anim'
-
-.name
-  margin-top: -10vh
-
-  z-index: 100
-
-.name__subcontent
-  text-align: left
-
-  @include mobile
-    text-align: center
-
-  a
-    font-size: small
-    display: none
-    position: absolute
-    margin-left: 5px
-    margin-top: 5px
-
-    @include mobile
-      position: relative
-
-
-.links
-  //background-color: rgba(255,0,0,.2)
-  width: 40%
-  height: 10%
-  position: absolute
-  bottom: 0
-
-  z-index: 99
-  display: flex
-  justify-content: center
-  align-items: center
-
-  @include mobile
-    width: 80%
-
-  .links__sub
-    height: 6vh
-    width: 15%
-    margin: 3%
-
-    display: table-cell
-    text-align: center
-    vertical-align: middle
-
-    font-size: 6vh
-    text-decoration: none
--- a/src/sass/responsive.sass
+++ b/src/sass/responsive.sass
@ -1,6 +0,0 @@
-// ok yikes I'll do my best
-
-// Disable actual check for desktop testing
-@mixin mobile()
-  @media (pointer: coarse)
-    @content
--- a/src/scss/about.scss
+++ b/src/scss/about.scss
@ -0,0 +1,5 @@
+@use "waltuh/waltuh";
+
+h1 {
+	margin-top: 3vh;
+}
--- a/src/scss/books.scss
+++ b/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;
+}
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@ -0,0 +1,16 @@
+@use "waltuh/waltuh";
+@use "waltuh/variables" as *;
+
+#pgp_a {
+	position: fixed;
+	display: none;
+
+	font-size: $fs-200;
+	margin-top: 0.6rem;
+}
+
+footer {
+	width: 100%;
+	font-size: clamp(2rem, $fs-800, 15vw);
+	justify-content: center !important;
+}
--- a/src/scss/pictures.scss
+++ b/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;
+		}
+	}
+
+	
+}
--- a/src/scss/waltuh/_variables.scss
+++ b/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;
+}
--- a/src/scss/waltuh/base.scss
+++ b/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;
+}
--- a/src/scss/waltuh/components/_book_entry.scss
+++ b/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;
+}
--- a/src/scss/waltuh/components/_header.scss
+++ b/src/scss/waltuh/components/_header.scss
--- a/src/scss/waltuh/components/_index.scss
+++ b/src/scss/waltuh/components/_index.scss
@ -0,0 +1,4 @@
+@forward "header";
+@forward "overlay";
+@forward "marks";
+@forward "book_entry";
--- a/src/scss/waltuh/components/_marks.scss
+++ b/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;
+  }
+}
--- a/src/scss/waltuh/components/_overlay.scss
+++ b/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;
+}
--- a/src/scss/waltuh/layouts/_grid.scss
+++ b/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);
+  }
+}
--- a/src/scss/waltuh/layouts/_index.scss
+++ b/src/scss/waltuh/layouts/_index.scss
@ -0,0 +1,2 @@
+@forward "grid";
+@forward "modifiers";
--- a/src/scss/waltuh/layouts/_modifiers.scss
+++ b/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;
+    }
+  }
+}
--- a/src/scss/waltuh/waltuh.scss
+++ b/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;}
Author	SHA1	Message	Date
Emilia Allison	8e8f8d830c	typo :(	2024-11-09 14:06:42 -06:00
Emilia Allison	720f49587b	Add books page back to cool-stuff	2024-11-09 13:42:43 -06:00
Emilia Allison	fcb3b42bc7	Update books styling	2024-11-09 13:40:48 -06:00
Emilia Allison	4f94881acc	bigly styling update	2024-11-09 12:51:32 -06:00
Emilia Allison	64226497d8	New font	2024-11-09 12:42:41 -05:00
Emilia Allison	6da3ea4df4	Spring Cleaning girl it's 30 october what	2024-10-30 22:48:02 -04:00
Emilia Allison	e4b24647c1	hotfix: missing semicolon >:(	2024-10-28 00:28:17 -04:00
Emilia Allison	4ba630ecc8	hotfix: gallery margin	2024-10-27 23:14:10 -04:00
Emilia Allison	18f6ff6196	Change plate-tool link to beta	2024-08-11 14:00:56 -04:00
Emilia Allison	4047a3c8ab	change spacing	2024-05-04 12:59:42 -04:00
Emilia Allison	fbd4c91b9b	fix column layout	2024-05-04 12:52:21 -04:00
Emilia Allison	6dbe14b0b2	Revert "this one needs fixed too smh" this commit was not good actually This reverts commit `ed00f2bdfe`.	2024-05-04 12:48:42 -04:00
Emilia Allison	ed00f2bdfe	this one needs fixed too smh	2024-05-04 12:47:33 -04:00
Emilia Allison	e2b60db31d	improve git link	2024-05-04 12:45:34 -04:00
Emilia Allison	e9aa55a520	this has bothered me for so long	2024-05-04 12:43:15 -04:00
Emilia Allison	f54de47a25	update cool stuff formatted it too :)	2024-02-04 12:20:09 -05:00
Emilia Allison	7110401183	Content updates	2024-01-30 21:15:04 -05:00
Emilia Allison	d9b7f73b19	me when i have a job	2024-01-12 21:04:05 -05:00
Emilia Allison	a2a7268ded	fix about.html layout idk when this regressed, but it's back to the "nice" column layout	2024-01-12 20:42:12 -05:00
Emilia Allison	8e0e18ac84	;)	2024-01-12 20:37:26 -05:00
Emilia Allison	a50eeeaf79	Move image-fill.py to different repo	2023-12-07 20:38:46 -05:00
Emilia Allison	0fda2bc258	Move pictures to different repo	2023-12-07 20:32:23 -05:00
Emilia Allison	d7bfb4a231	Fix for image-fill	2023-11-22 01:45:51 -05:00
Emilia Allison	1e8c7c74e5	Add convenience scripts for pictures	2023-11-22 00:10:44 -05:00
Emilia Allison	3dbac61e65	Sort images	2023-11-22 00:10:17 -05:00
Emilia Allison	8bb2fc1542	Ignore pictures directory	2023-11-22 00:00:22 -05:00
Emilia Allison	170c0f3080	Automation for image files in html	2023-11-21 23:44:01 -05:00
Emilia Allison	acb6e4b9a9	Template pictures file	2023-11-21 23:15:33 -05:00
Emilia Allison	21855241fd	Pictures page base	2023-11-21 22:38:26 -05:00
Emilia Allison	7c7cf7b406	Add book entry	2023-08-02 13:50:59 -04:00
Emilia Allison	36acf28e9f	Fix to book entry for mobile (narrow screens)	2023-08-02 13:43:36 -04:00
Emilia Allison	040c1dc854	Books page	2023-08-02 13:39:32 -04:00
Emilia Allison	6b06289882	Spoiler tag	2023-08-02 13:39:26 -04:00
Emilia Allison	bea03194cc	Book entry scss	2023-08-02 13:39:15 -04:00
Emilia Allison	f3543edbfe	Column modifier for offset grid	2023-08-02 12:13:15 -04:00
Emilia Allison	070d9ef020	Update to landing page	2023-07-20 19:28:19 -04:00
Emilia Allison	4b052d2c37	Add two new recipes	2023-07-20 19:27:57 -04:00
Emilia Allison	638306709f	Another recipe content update	2023-07-19 15:56:09 -04:00
Emilia Allison	f6324dbca6	Fix recipe title to make Em happy	2023-07-19 15:46:47 -04:00
Emilia Allison	e9a6d0aaaf	Update recipe content	2023-07-19 15:45:59 -04:00
Emilia Allison	87a773e8ad	Switch theme for recipes	2023-07-19 15:39:25 -04:00
Emilia Allison	a80bd749a3	About page content update	2023-07-19 14:50:15 -04:00
Emilia Allison	5ec8cf52a1	Add styled underline to main page	2023-07-19 14:44:24 -04:00
Emilia Allison	b23d95bc0a	Mobile fix for landing page icons	2023-07-19 14:27:37 -04:00
Emilia Allison	b633b5a256	Cool stuff content update	2023-07-19 13:11:13 -04:00
Emilia Allison	0e575802cf	Mobile compatibility with last commit Side effect of making columns wider, which is honestly quite nice.	2023-07-19 13:01:52 -04:00
Emilia Allison	bc05b9fc72	Return link is now everything outside main column	2023-07-19 12:52:22 -04:00
Emilia Allison	0cc9e20c7c	Fix duplicate <ul> from last commit	2023-06-07 16:36:22 -04:00
Emilia Allison	2023a4c222	Add link for plate-tool	2023-06-07 16:34:18 -04:00
Emilia Allison	5d2b977cd2	Update about	2023-05-09 17:59:39 -04:00
Emilia Allison	a0f022ce73	Reduce width of offset-grid--wide Looks better on wide displays while preserving readability on narrow displays.	2022-10-25 13:41:00 -04:00
Emilia Allison	7b3793ea7d	Merge pull request #7 from em-ilia/theme-switch Theme switch	2022-10-25 13:37:45 -04:00
Emilia Allison	069fe18b33	Fix Makefile clean	2022-10-25 13:37:05 -04:00
Emilia Allison	7d20c023d2	Fix missing fonts	2022-10-25 13:36:19 -04:00
Emilia Allison	8396d5e469	Port about.html and cool-stuff	2022-10-25 12:15:04 -04:00
Emilia Allison	b2e1b424b5	Swap theme to Waltuh	2022-10-25 01:55:54 -04:00
Emilia Allison	8020b188ee	Merge branch 'waltuh' Waltuh is looking pretty smooth	2022-10-25 01:25:47 -04:00
Emilia Allison	cb94084dda	Update cool-stuff index The formatting was not very good. CSS Purgatory is now in its own section!	2022-10-24 23:57:04 -04:00
Emilia Allison	f6f9e1481e	pgp key not hidden on page load. Just needed to add `display: none;` to the css. Easy fix	2022-10-24 23:51:54 -04:00
Emilia Allison	987eed2efa	Include the Makefile for the master branch	2022-10-24 23:47:13 -04:00
Emilia Allison	adcd9b0f38	Make overlay scale better	2022-10-02 21:59:53 -04:00
Emilia Allison	d77ccd47ee	Landing page uses offset grid	2022-10-02 21:59:36 -04:00
Emilia Allison	8ea9f702c5	Change mark to span in index	2022-10-02 21:49:04 -04:00
Emilia Allison	d9015cb46b	Grid layouts	2022-10-02 21:46:39 -04:00
Emilia Allison	6730d50add	Remove debug	2022-10-02 21:46:27 -04:00
Emilia Allison	7b0aa74317	Change mark to span	2022-10-02 21:44:03 -04:00
Emilia Allison	361bd134c9	fix: Overlay not fullsize	2022-10-02 21:43:36 -04:00
Emilia Allison	aee6302f6e	Fix type	2022-10-02 19:36:21 -04:00
Emilia Allison	4579c37b64	Move rules into separate files I suffered so much to make this work. In order to get global variables to work, they make you suffer. I absolutely loathe this solution.	2022-10-02 19:26:20 -04:00
Emilia Allison	c5ef691077	Move base styles out of waltuh.scss	2022-10-02 17:48:54 -04:00
Emilia Allison	16540edeb6	Merge branch 'master' into waltuh Update base	2022-10-02 15:49:23 -04:00
Emilia Allison	2f03f9d830	Merge branch 'feature-base-v1.1' Base now "@use" importable	2022-10-02 15:46:07 -04:00
Emilia Allison	91769a9635	End refactor	2022-10-02 15:36:39 -04:00
Emilia Allison	336ef6f6e7	Stop tracking compiled css	2022-10-02 15:36:24 -04:00
Emilia Allison	98239c4fd2	Update comment	2022-10-02 15:34:53 -04:00
Emilia Allison	850d0c259c	Change "calc()" to idiomatic sass	2022-10-02 15:30:07 -04:00
Emilia Allison	ecff203c0d	Wrap all of base in a mixin This means that it can be used at global scope in other files	2022-10-02 15:28:02 -04:00
Emilia Allison	ffb9822565	Start refactor: Make base.scss an "@use" importable reset/template	2022-10-02 15:12:41 -04:00
Emilia Allison	0fe8096950	Begin refactor	2022-10-02 14:51:29 -04:00
Emilia Allison	1f07fd9926	More idiomatic SCSS in animation	2022-10-02 14:44:42 -04:00
Emilia Allison	1882e1d156	Wipe in <mark> waltuh	2022-10-02 14:01:01 -04:00
Emilia Allison	ee64123194	List Waltuh on index	2022-10-02 14:00:45 -04:00
Emilia Allison	d221971467	Complete rename?	2022-10-02 14:00:23 -04:00
Emilia Allison	7d3ad1ddfd	Directory rename	2022-10-02 13:06:19 -04:00
Emilia Allison	f50f72d919	Rename theme et al. Also includes static breathe, which is questionable	2022-10-02 13:04:38 -04:00
Emilia Allison	6250629545	Stop tracking compiled css!	2022-10-02 13:03:46 -04:00
Emilia Allison	e8da14c9e8	Bulk	2022-10-02 12:47:55 -04:00
Emilia Allison	98d34c5476	theme3 initial	2022-10-01 20:54:57 -04:00
Emilia Allison	90a4565e2e	Use Makefile and SCSS	2022-10-01 16:11:52 -04:00
Emilia Allison	7de98a4c7d	Merge branch 'master' into feature-base-v1.1	2022-10-01 15:50:13 -04:00
Emilia Allison	588cf081fa	Add scroll class	2022-09-30 00:47:52 -04:00
Emilia Allison	b14dbda2c3	Update theme submodule	2022-09-30 00:47:25 -04:00
Emilia Allison	c6928b85aa	Update fast-deploy.yaml sass directory renamed to scss as part of rewrite	2022-09-29 23:43:05 -04:00
Emilia Allison	c3f7678f25	Merge pull request #4 from em-ilia/sass-cleanup-1 Sass cleanup 1, see PR for details	2022-09-29 23:40:55 -04:00
Emilia Allison	f64d1d557d	Include a mobile detection mixin in reset	2022-09-29 23:38:30 -04:00
Emilia Allison	85c2aadc39	About finally has a return link Also got rid of some unused classes	2022-09-29 23:35:05 -04:00
Emilia Allison	f13aa49e61	Grid center wide to match old style	2022-09-29 23:33:57 -04:00
Emilia Allison	32c169e957	Make footer solution universal	2022-09-29 23:30:38 -04:00
Emilia Allison	04ddc30772	Fix cool-stuff Made the footer solution less awful	2022-09-29 23:29:00 -04:00
Emilia Allison	6abb6a6187	Restore about.html	2022-09-29 23:25:55 -04:00
Emilia Allison	590d7aa9ab	SCSS Rewrite (pt 1) It was messy and gross! Now it's SCSS, cleaner, and looks more like what the styles in purgatory are supposed to look like. How nice! I removed a lot of the useless classes that were in the original style—no rules were declared for them anyway. index.html is fully good to go! (minus mobile compatibility)	2022-09-29 23:18:06 -04:00
Emilia Allison	1a046b926a	Update README	2022-09-29 21:39:07 -04:00
Emilia Allison	cad991a116	Merge pull request #3 from em-ilia/em-ilia-patch-1 Update fast-deploy.yaml	2022-09-29 21:35:56 -04:00
Emilia Allison	080175aab2	Update fast-deploy.yaml Fixed permission error	2022-09-29 21:34:17 -04:00
Emilia Allison	52bd9c4c84	Fix in index of cool-stuff and <a> has high z-index	2022-09-29 21:28:10 -04:00
Emilia Allison	7609dcf13d	Change outer div in cool-stuff to semantic "main"	2022-09-29 21:21:52 -04:00
Emilia Allison	e6a7310e04	Landing page for base	2022-09-29 21:17:06 -04:00
Emilia Allison	9aa86dd896	Add a sample page to base	2022-09-28 22:04:57 -04:00
Emilia Allison	7ba36b5b17	Changes to base styling Remove <hr> from document and replace with CSS Add margin between sections	2022-09-28 22:04:21 -04:00
Emilia Allison	b62f80656b	Unify base and pink	2022-09-28 12:34:13 -04:00
Emilia Allison	f21678220a	Indent content by 1vw, 1vh	2022-09-28 12:28:06 -04:00
Emilia Allison	fc9a27d453	Change index to be styled with "pink"	2022-09-28 12:23:13 -04:00
Emilia Allison	56cc9367fd	Rename ilia2 to pink	2022-09-28 12:16:21 -04:00
Emilia Allison	d4826b33ab	Bulk commit I forgor what happened	2022-09-26 22:09:28 -04:00
Emilia Allison	8790ec387e	Add 401 error page	2022-09-13 13:06:20 -04:00
Emilia Allison	6948b50eef	Begin tracking custom error pages	2022-09-13 12:16:41 -04:00
Emilia Allison	a91c3a4b80	Add new recipe	2022-09-10 14:31:19 -04:00
Emilia Allison	7772782946	CSS Purgatory: base template No layout section	2022-07-07 17:20:00 -04:00
Emilia Allison	513a507896	CSS Purgatory index page	2022-07-07 14:19:49 -04:00
Emilia Allison	2102217b0e	Modify recipes link	2022-07-07 14:12:03 -04:00
Emilia Allison	59f6b00bd3	Add css-purgatory page	2022-07-07 14:11:53 -04:00
Emilia Allison	5df9643336	Update .gitignore hugo is such a pain	2022-07-06 17:31:44 -04:00
				`@ -0,0 +1 @@`
				`Subproject commit 5671f376d5c80b2f125c17af373665f417aebd85`