Compare commits
No commits in common. "master" and "waltuh" have entirely different histories.
|
|
@ -1,5 +1,4 @@
|
|||
src/css/
|
||||
src/pictures
|
||||
push_updates.sh
|
||||
hugo/*/public/
|
||||
hugo/*/resources/_gen/
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
[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
|
||||
|
|
|
|||
|
|
@ -1,13 +1,7 @@
|
|||
baseURL = 'https://ilia.moe/cool-stuff/recipes'
|
||||
languageCode = 'en-us'
|
||||
title = 'Recipes'
|
||||
theme = 'waltuh-hugo-theme'
|
||||
theme = 'ilia-hugo-theme'
|
||||
|
||||
[taxonomies]
|
||||
tag = 'tags'
|
||||
|
||||
[markup]
|
||||
[markup.goldmark]
|
||||
|
||||
[markup.goldmark.renderer]
|
||||
unsafe = true
|
||||
|
|
|
|||
|
|
@ -3,13 +3,3 @@ 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
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
---
|
||||
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
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
---
|
||||
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 />
|
||||
|
|
@ -14,12 +14,6 @@ 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
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ lastmod: 2022-09-10T14:33:38-04:00
|
|||
date: 2022-09-10T14:33:38-04:00
|
||||
author: "Emilia"
|
||||
tags: ["baked"]
|
||||
draft: true
|
||||
---
|
||||
|
||||
### Ingredients
|
||||
|
|
@ -19,12 +20,4 @@ tags: ["baked"]
|
|||
1. Heat water and milk to around 100°F
|
||||
2. Add yeast to liquid mixture, wait for bloom
|
||||
3. Whisk together flour, salt, and sugar
|
||||
- Sufficient to mix a bit with dough hook
|
||||
4. Pour liquid into dry ingredient mix
|
||||
- Mix until reasonably incorporated
|
||||
5. Add in butter, about one tablespoon at a time, while kneading
|
||||
6. Knead one to two minutes after butter fully incorporated
|
||||
7. Cover and let rise 1.5 hours
|
||||
8. Punch down and shape dough into vessel or final shape
|
||||
9. Let rise again for 0.75 to 1.0 hours
|
||||
10. Bake at 350°F for 35 to 40 minutes
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Sticky Buns"
|
||||
title: "Stickybuns"
|
||||
lastmod: ":git"
|
||||
date: 2022-06-29T14:46:50-04:00
|
||||
author: "Joshua Weissman"
|
||||
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 5671f376d5c80b2f125c17af373665f417aebd85
|
||||
14
src/Makefile
14
src/Makefile
|
|
@ -1,14 +0,0 @@
|
|||
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
|
||||
|
|
@ -6,28 +6,26 @@
|
|||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<div id="overlay"></div>
|
||||
<main class="offset-grid--top--wide fullsize side-a">
|
||||
<div id="overlay">
|
||||
</div>
|
||||
<main class="grid-center--offset-wide">
|
||||
<div>
|
||||
<div class="flex column-tight">
|
||||
<h1 class="ff-serif fs-700 padding-high-top">
|
||||
<div>
|
||||
<h1>
|
||||
About
|
||||
</h1>
|
||||
<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>.
|
||||
<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>.
|
||||
</p>
|
||||
<p class="ff-sans fs-300 padding-mid-top">
|
||||
I work for a pretty neat company as an associate robotic automation engineer.
|
||||
(this means I am cool, I think.)
|
||||
<p>
|
||||
I'm studying mathematics (with a focus on computation) at Penn State, and will hopefully be graduating in 2023.
|
||||
</p>
|
||||
</div>
|
||||
<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>
|
||||
<div>
|
||||
<h1>Opinions</h1>
|
||||
<h2>A 100% exhaustive list, of course</h2>
|
||||
<li>
|
||||
the modern internet is bloated
|
||||
<ol>
|
||||
|
|
@ -35,22 +33,21 @@ Here's some information about myself, posted on the aforementioned <span class="
|
|||
</ol>
|
||||
</li>
|
||||
<li>open source software is very cool</li>
|
||||
<li>social media is kinda yucky!</li>
|
||||
<li>
|
||||
linux distros don't matter
|
||||
<ol>
|
||||
<li>btw i use</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>social media is kinda yucky</li>
|
||||
<li>the military industrial complex</li>
|
||||
<li>my taste in music is <s>objectively just ok</s> taylor swift</li>
|
||||
<li>FluentControl whistle noise 🔥 🗣</li>
|
||||
<li>🦐 🍤</li>
|
||||
</ul>
|
||||
</span>
|
||||
<li>my taste in music is objectively just ok</li>
|
||||
<li>🦐</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="../">
|
||||
</a>
|
||||
<div class="side-a__main-content-cover"></div>
|
||||
</main>
|
||||
<footer class="lock-bottom">
|
||||
<footer>
|
||||
<p><a href="../">Return</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,245 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>CSS Purgatory - Emilia Allison</title>
|
||||
<link rel="stylesheet" href="../../css/about.css">
|
||||
<link rel="stylesheet" href="pink/index.css">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<style>
|
||||
/* For classes not supplied by base.css
|
||||
|
|
@ -14,9 +14,11 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="overlay"></div>
|
||||
<main class="offset-grid--top--wide fullsize">
|
||||
<div>
|
||||
<div class="overlay">
|
||||
</div>
|
||||
<div class="outerdiv contentholder">
|
||||
<div class="contentholder__topfiller"></div>
|
||||
<div class="content flex column">
|
||||
<h1>
|
||||
CSS Purgatory
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -1,76 +1,39 @@
|
|||
<!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 class="no-overflow">
|
||||
<body>
|
||||
<div id="overlay">
|
||||
</div>
|
||||
<main class="offset-grid--top--wide--column side-a">
|
||||
<main class="grid-center--offset-wide">
|
||||
<div>
|
||||
<h1 class="ff-serif fs-700 gap-small-bottom">
|
||||
<h1>
|
||||
Cool Stuff
|
||||
</h1>
|
||||
<h3 class="gap-mid-bottom ff-serif fs-500">it's debatably cool</h3>
|
||||
<span class="ff-sans fs-300 span-full-width">
|
||||
<h2>it's debatable</h2>
|
||||
<p>
|
||||
If a page uses/requires JavaScript (or WASM), its link will be marked with (☕).
|
||||
When relevant, a link to a Git repo will be provided (💻).
|
||||
If content is useful for my job, it will be marked with
|
||||
(🤵‍♀️).
|
||||
Cool stuff is code for links to subpages.
|
||||
If a page uses/requires JavaScript, its link will be marked with (☕).
|
||||
</p>
|
||||
</span>
|
||||
<h1 class="gap-small-bottom ff-serif fs-700">
|
||||
<h1>
|
||||
the stuff
|
||||
</h1>
|
||||
<h3 class="ff-serif fs-500">
|
||||
Artisan Handcrafted
|
||||
<a href="css-purgatory"><h3>
|
||||
css purgatory
|
||||
</h3></a>
|
||||
<h3>
|
||||
Static
|
||||
</h3>
|
||||
<span class="ff-sans fs-300 span-full-width">
|
||||
<ul>
|
||||
<li><a href="plate-tool-beta">Plate tool</a>
|
||||
<a href="https://git.ilia.moe/emilia/plate-tool">☕💻
|
||||
🤵‍♀️</a>
|
||||
</li>
|
||||
<li><a href="recipes">Recipes</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>
|
||||
<a href="../">
|
||||
</a>
|
||||
<div class="side-a__main-content-cover"></div>
|
||||
</main>
|
||||
<footer class="lock-bottom">
|
||||
<footer>
|
||||
<p><a href="../">Return</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -12,44 +12,40 @@
|
|||
<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? please don't do that">
|
||||
<meta property="og:description" content="did you just try to embed my website">
|
||||
<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 class="vsc-initialized">
|
||||
<div id="overlay"></div>
|
||||
<main class="offset-grid--top fullsize">
|
||||
<body>
|
||||
<div id="overlay">
|
||||
</div>
|
||||
<main class="grid-center--offset">
|
||||
<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>
|
||||
<div>
|
||||
<h1>Emilia</h1>
|
||||
<p>mathematics enjoyer</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="fs-100 padding-mid-top">bottom text (now with extra spice™)</p>
|
||||
</a></p>
|
||||
<p>bottom text</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="lock-bottom flex row">
|
||||
<footer class="links">
|
||||
<a title="about" href="about">
|
||||
📄
|
||||
</a>
|
||||
<a id="moonlink" title="cool stuff" href="cool-stuff">
|
||||
🌜
|
||||
</a>
|
||||
<a title="git provider" href="https://git.ilia.moe/explore/repos">
|
||||
<a title="git provider" href="https://github.com/em-ilia">
|
||||
💻
|
||||
</a>
|
||||
<a title="i love email" href="mailto:em@ilia.moe">
|
||||
📠
|
||||
</a>
|
||||
<a id="camera" title="picture" href="pictures">
|
||||
📷
|
||||
</a>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -12,9 +12,6 @@ if (is_mobile === '1') {
|
|||
}
|
||||
|
||||
const moon = document.getElementById('moonlink');
|
||||
console.log(moon);
|
||||
moon.onmouseover = function() {moon.innerHTML = "🌛"}
|
||||
moon.onmouseout = function() {moon.innerHTML = "🌜"}
|
||||
|
||||
const camera = document.getElementById('camera');
|
||||
camera.onmouseover = function() {camera.innerHTML = "📸"}
|
||||
camera.onmouseout = function() {camera.innerHTML = "📷"}
|
||||
|
|
|
|||
|
|
@ -1,5 +1 @@
|
|||
@use "waltuh/waltuh";
|
||||
|
||||
h1 {
|
||||
margin-top: 3vh;
|
||||
}
|
||||
@import "ilia1";
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
/* ---------------- */
|
||||
/* ILIA1 STYLE FILE */
|
||||
/* ---------------- */
|
||||
/*
|
||||
* Formalizing the
|
||||
* until now very
|
||||
* disorganized look
|
||||
* and feel of ILIA
|
||||
*/
|
||||
|
||||
@use "sass:color";
|
||||
@import "reset";
|
||||
|
||||
$color-white: hsl(48, 73%, 84%);
|
||||
$color-light: hsl(348, 73%, 84%);
|
||||
$color-dark: hsl(195, 47%, 7%);
|
||||
|
||||
/* --------------- */
|
||||
/* Utility Classes */
|
||||
/* --------------- */
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.column {
|
||||
@extend .flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
@extend .flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
align-content: baseline;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-inline: clamp(0.5rem, 4rem, 5rem);
|
||||
margin-inline: auto;
|
||||
max-width: 80rem;
|
||||
}
|
||||
|
||||
@mixin grid-center($top-offset:1, $bottom-offset:1, $left-offset:1, $right-offset:1) {
|
||||
display: grid;
|
||||
grid-template-rows: $top-offset*1fr 1fr $bottom-offset*1fr;
|
||||
grid-template-columns: $left-offset*1fr 1fr $right-offset*1fr;
|
||||
grid-template-areas:
|
||||
". . ."
|
||||
". main ."
|
||||
". . .";
|
||||
|
||||
div {
|
||||
place-self: center;
|
||||
grid-area: main;
|
||||
}
|
||||
footer {
|
||||
@extend .row;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
margin-bottom: 2vh;
|
||||
position: static;
|
||||
grid-row: 3 / span 1;
|
||||
grid-column: 2 / span 1;
|
||||
place-self: end center;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.grid-center {
|
||||
@include grid-center;
|
||||
}
|
||||
|
||||
.grid-center--offset {
|
||||
@include grid-center($top-offset: 0.7);
|
||||
}
|
||||
|
||||
.grid-center--offset-wide {
|
||||
@include grid-center($top-offset: 0.7, $left-offset: 0.5, $right-offset: 0.5);
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
position: scroll;
|
||||
}
|
||||
|
||||
/* ---------- */
|
||||
/* Tag Styles */
|
||||
/* ---------- */
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
background-color: black;
|
||||
|
||||
@extend .column;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 90%;
|
||||
height: 100vh;
|
||||
|
||||
background-color: $color-dark;
|
||||
|
||||
* {
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
/* Text */
|
||||
|
||||
h1 {
|
||||
margin: 5px 5px;
|
||||
|
||||
font-family: serif;
|
||||
font-size: $fs-700;
|
||||
text-align: center;
|
||||
|
||||
color: $color-light;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: serif;
|
||||
font-size: $fs-600;
|
||||
text-align: center;
|
||||
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: sans-serif;
|
||||
font-size: $fs-500;
|
||||
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 5px 0px;
|
||||
|
||||
font-family: sans-serif;
|
||||
font-size: $fs-300;
|
||||
text-align: left;
|
||||
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
/* Lists, Modifiers */
|
||||
|
||||
ol {
|
||||
margin: 0;
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
li {
|
||||
&:before {
|
||||
content: "- ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
@extend p
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
&:link {
|
||||
color: $color-white;
|
||||
}
|
||||
&:visited {
|
||||
color: color.adjust($color-white, $lightness: -20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Semantic */
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
/* ------------- */
|
||||
/* ILIA Specific */
|
||||
/* ------------- */
|
||||
|
||||
#overlay {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
|
||||
opacity: 0.03;
|
||||
z-index: 1;
|
||||
background-image: url('../img/noise.gif');
|
||||
background-size: 25%;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
// GRADIENTS (you might need them!)
|
||||
$rainbow-gradient: repeating-linear-gradient(to left, red, violet, indigo, blue, green, yellow, orange, red, violet);
|
||||
|
||||
// ANIMATIONS (love to see them)
|
||||
@keyframes gradient-bg {
|
||||
from {
|
||||
background-position: 0%;
|
||||
}
|
||||
to {
|
||||
background-position: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rainbow-text() {
|
||||
animation: gradient-bg 4s linear infinite;
|
||||
}
|
||||
|
||||
// MARKS
|
||||
mark.rainbow {
|
||||
background-image: $rainbow-gradient;
|
||||
background-size: 1000% 1000%;
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
@include rainbow-text();
|
||||
}
|
||||
|
||||
// ALIASES
|
||||
mark.internet {
|
||||
@extend .rainbow;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,16 +1,13 @@
|
|||
@use "waltuh/waltuh";
|
||||
@use "waltuh/variables" as *;
|
||||
|
||||
#pgp_a {
|
||||
position: fixed;
|
||||
display: none;
|
||||
|
||||
font-size: $fs-200;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
@import "ilia1";
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
font-size: clamp(2rem, $fs-800, 15vw);
|
||||
justify-content: center !important;
|
||||
a {
|
||||
display: table-cell;
|
||||
height: 6vh;
|
||||
width: 15%;
|
||||
margin: 3%;
|
||||
|
||||
font-size: 6vh;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
/* Font Sizes */
|
||||
|
||||
$fs-900: calc(125rem / 16);
|
||||
$fs-800: calc(75rem / 16);
|
||||
$fs-700: calc(56rem / 16);
|
||||
$fs-600: calc(32rem / 16);
|
||||
$fs-500: calc(28rem / 16);
|
||||
$fs-400: calc(24rem / 16);
|
||||
$fs-300: calc(18rem / 16);
|
||||
$fs-200: calc(16rem / 16);
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: $fs-400;
|
||||
color: hsl(0, 0%, 0%);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
img, picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behaviour: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mobile() {
|
||||
@media (pointer: coarse) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
|
|
@ -1,242 +0,0 @@
|
|||
//
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@forward "header";
|
||||
@forward "overlay";
|
||||
@forward "marks";
|
||||
@forward "book_entry";
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
@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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@forward "grid";
|
||||
@forward "modifiers";
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
/* ------ */
|
||||
/* */
|
||||
/* 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;}
|
||||
Loading…
Reference in New Issue