Compare commits
No commits in common. "master" and "waltuh" have entirely different histories.
|
|
@ -1,5 +1,4 @@
|
||||||
src/css/
|
src/css/
|
||||||
src/pictures
|
|
||||||
push_updates.sh
|
push_updates.sh
|
||||||
hugo/*/public/
|
hugo/*/public/
|
||||||
hugo/*/resources/_gen/
|
hugo/*/resources/_gen/
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,3 @@
|
||||||
[submodule "hugo/recipe/themes/ilia-hugo-theme"]
|
[submodule "hugo/recipe/themes/ilia-hugo-theme"]
|
||||||
path = hugo/recipe/themes/ilia-hugo-theme
|
path = hugo/recipe/themes/ilia-hugo-theme
|
||||||
url = git@github.com:em-ilia/ilia-hugo-theme.git
|
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'
|
baseURL = 'https://ilia.moe/cool-stuff/recipes'
|
||||||
languageCode = 'en-us'
|
languageCode = 'en-us'
|
||||||
title = 'Recipes'
|
title = 'Recipes'
|
||||||
theme = 'waltuh-hugo-theme'
|
theme = 'ilia-hugo-theme'
|
||||||
|
|
||||||
[taxonomies]
|
[taxonomies]
|
||||||
tag = 'tags'
|
tag = 'tags'
|
||||||
|
|
||||||
[markup]
|
|
||||||
[markup.goldmark]
|
|
||||||
|
|
||||||
[markup.goldmark.renderer]
|
|
||||||
unsafe = true
|
|
||||||
|
|
|
||||||
|
|
@ -3,13 +3,3 @@ title: "Recipes"
|
||||||
---
|
---
|
||||||
|
|
||||||
# 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
|
- 2 tsp Worcestershire sauce
|
||||||
- 8 oz (half box) dried macaroni
|
- 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
|
### Procedure
|
||||||
1. Begin boiling water for pasta, begin cooking when boiling
|
1. Begin boiling water for pasta, begin cooking when boiling
|
||||||
2. Melt butter in a medium saucepan over medium-low heat
|
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
|
date: 2022-09-10T14:33:38-04:00
|
||||||
author: "Emilia"
|
author: "Emilia"
|
||||||
tags: ["baked"]
|
tags: ["baked"]
|
||||||
|
draft: true
|
||||||
---
|
---
|
||||||
|
|
||||||
### Ingredients
|
### Ingredients
|
||||||
|
|
@ -19,12 +20,4 @@ tags: ["baked"]
|
||||||
1. Heat water and milk to around 100°F
|
1. Heat water and milk to around 100°F
|
||||||
2. Add yeast to liquid mixture, wait for bloom
|
2. Add yeast to liquid mixture, wait for bloom
|
||||||
3. Whisk together flour, salt, and sugar
|
3. Whisk together flour, salt, and sugar
|
||||||
- Sufficient to mix a bit with dough hook
|
|
||||||
4. Pour liquid into dry ingredient mix
|
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"
|
lastmod: ":git"
|
||||||
date: 2022-06-29T14:46:50-04:00
|
date: 2022-06-29T14:46:50-04:00
|
||||||
author: "Joshua Weissman"
|
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,51 +6,48 @@
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="overlay"></div>
|
<div id="overlay">
|
||||||
<main class="offset-grid--top--wide fullsize side-a">
|
</div>
|
||||||
|
<main class="grid-center--offset-wide">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex column-tight">
|
<div>
|
||||||
<h1 class="ff-serif fs-700 padding-high-top">
|
<h1>
|
||||||
About
|
About
|
||||||
</h1>
|
</h1>
|
||||||
<h3 class="ff-serif fs-500 padding-none-top">there used to be a subtitle here</h3>
|
<h2>isn't that the page title?</h2>
|
||||||
<p class="ff-sans fs-300 padding-high-top">
|
<p>
|
||||||
I'm not super keen on saying that much about myself on the <span class="waltuh-gradient">internet</span>.
|
I'm not super keen on saying that much about myself on the <mark class="internet">internet</mark>.
|
||||||
Here's some information about myself, posted on the aforementioned <span class="waltuh-gradient">internet</span>.
|
Anyway, here's some information about myself, posted on the aforementioned <mark class="internet">internet</mark>.
|
||||||
</p>
|
</p>
|
||||||
<p class="ff-sans fs-300 padding-mid-top">
|
<p>
|
||||||
I work for a pretty neat company as an associate robotic automation engineer.
|
I'm studying mathematics (with a focus on computation) at Penn State, and will hopefully be graduating in 2023.
|
||||||
(this means I am cool, I think.)
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex column-tight">
|
<div>
|
||||||
<h1 class="ff-serif fs-700 padding-high-top">Opinions</h1>
|
<h1>Opinions</h1>
|
||||||
<h3 class="ff-serif fs-500 padding-none-top">A 100% exhaustive list, of course</h3>
|
<h2>A 100% exhaustive list, of course</h2>
|
||||||
<span class="ff-sans fs-300 padding-low-top">
|
|
||||||
<ul>
|
|
||||||
<li>
|
<li>
|
||||||
the modern internet is bloated
|
the modern internet is bloated
|
||||||
<ol>
|
<ol>
|
||||||
<li>i will contribute to this bloat</li>
|
<li>i will contribute to this bloat</li>
|
||||||
</ol>
|
</ol>
|
||||||
</li>
|
</li>
|
||||||
<li>open source software is very cool</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>the military industrial complex</li>
|
||||||
<li>my taste in music is <s>objectively just ok</s> taylor swift</li>
|
<li>my taste in music is objectively just ok</li>
|
||||||
<li>FluentControl whistle noise 🔥 🗣</li>
|
<li>🦐</li>
|
||||||
<li>🦐 🍤</li>
|
|
||||||
</ul>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<footer>
|
||||||
<a href="../">
|
<p><a href="../">Return</a></p>
|
||||||
</a>
|
</footer>
|
||||||
<div class="side-a__main-content-cover"></div>
|
|
||||||
</main>
|
</main>
|
||||||
<footer class="lock-bottom">
|
|
||||||
<p><a href="../">Return</a></p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Purgatory - Emilia Allison</title>
|
<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">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<style>
|
<style>
|
||||||
/* For classes not supplied by base.css
|
/* For classes not supplied by base.css
|
||||||
|
|
@ -14,9 +14,11 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="overlay"></div>
|
<div class="overlay">
|
||||||
<main class="offset-grid--top--wide fullsize">
|
</div>
|
||||||
<div>
|
<div class="outerdiv contentholder">
|
||||||
|
<div class="contentholder__topfiller"></div>
|
||||||
|
<div class="content flex column">
|
||||||
<h1>
|
<h1>
|
||||||
CSS Purgatory
|
CSS Purgatory
|
||||||
</h1>
|
</h1>
|
||||||
|
|
|
||||||
|
|
@ -1,76 +1,39 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
<head>
|
||||||
<head>
|
<title>Emilia Allison</title>
|
||||||
<title>Emilia Allison</title>
|
<link rel="stylesheet" href="/css/about.css">
|
||||||
<link rel="stylesheet" href="/css/about.css">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
</head>
|
||||||
</head>
|
<body>
|
||||||
|
<div id="overlay">
|
||||||
<body class="no-overflow">
|
|
||||||
<div id="overlay">
|
|
||||||
</div>
|
|
||||||
<main class="offset-grid--top--wide--column side-a">
|
|
||||||
<div>
|
|
||||||
<h1 class="ff-serif fs-700 gap-small-bottom">
|
|
||||||
Cool Stuff
|
|
||||||
</h1>
|
|
||||||
<h3 class="gap-mid-bottom ff-serif fs-500">it's debatably cool</h3>
|
|
||||||
<span class="ff-sans fs-300 span-full-width">
|
|
||||||
<p>
|
|
||||||
If a page uses/requires JavaScript (or WASM), its link will be marked with (☕).
|
|
||||||
When relevant, a link to a Git repo will be provided (💻).
|
|
||||||
If content is useful for my job, it will be marked with
|
|
||||||
(🤵‍♀️).
|
|
||||||
</p>
|
|
||||||
</span>
|
|
||||||
<h1 class="gap-small-bottom ff-serif fs-700">
|
|
||||||
the stuff
|
|
||||||
</h1>
|
|
||||||
<h3 class="ff-serif fs-500">
|
|
||||||
Artisan Handcrafted
|
|
||||||
</h3>
|
|
||||||
<span class="ff-sans fs-300 span-full-width">
|
|
||||||
<ul>
|
|
||||||
<li><a href="plate-tool-beta">Plate tool</a>
|
|
||||||
<a href="https://git.ilia.moe/emilia/plate-tool">☕💻
|
|
||||||
🤵‍♀️</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="../">
|
<main class="grid-center--offset-wide">
|
||||||
</a>
|
<div>
|
||||||
<div class="side-a__main-content-cover"></div>
|
<h1>
|
||||||
</main>
|
Cool Stuff
|
||||||
<footer class="lock-bottom">
|
</h1>
|
||||||
<p><a href="../">Return</a></p>
|
<h2>it's debatable</h2>
|
||||||
</footer>
|
<p>
|
||||||
</body>
|
Cool stuff is code for links to subpages.
|
||||||
|
If a page uses/requires JavaScript, its link will be marked with (☕).
|
||||||
|
</p>
|
||||||
|
<h1>
|
||||||
|
the stuff
|
||||||
|
</h1>
|
||||||
|
<a href="css-purgatory"><h3>
|
||||||
|
css purgatory
|
||||||
|
</h3></a>
|
||||||
|
<h3>
|
||||||
|
Static
|
||||||
|
</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="recipes">Recipes</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p><a href="../">Return</a></p>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
</html>
|
</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:type" content="website">
|
||||||
<meta property="og:url" content="https://ilia.moe/">
|
<meta property="og:url" content="https://ilia.moe/">
|
||||||
<meta property="og:title" content="what">
|
<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">
|
<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 -->
|
<!-- Twitter -->
|
||||||
<meta property="twitter:card" content="summary_large_image" />
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
</head>
|
</head>
|
||||||
<body class="vsc-initialized">
|
<body>
|
||||||
<div id="overlay"></div>
|
<div id="overlay">
|
||||||
<main class="offset-grid--top fullsize">
|
</div>
|
||||||
<div>
|
<main class="grid-center--offset">
|
||||||
<h1 class="text-dark ff-mono fs-800 gap-large-bottom">
|
<div>
|
||||||
Em<span class="waltuh-gradient-underline">ilia</span>.
|
<div>
|
||||||
</h1>
|
<h1>Emilia</h1>
|
||||||
<div class="ff-sans fs-400">
|
<p>mathematics enjoyer</p>
|
||||||
<p>allegedly an engineer???</p>
|
<p id="pgp_p">pgp:
|
||||||
<p id="pgp_p">pgp:
|
|
||||||
<a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a" class="fixed">
|
<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
|
8CBC 050E 7BBB 8779 ECCD 4207 4B33 E52E 3BD2 5455
|
||||||
</a>
|
</a></p>
|
||||||
</p>
|
<p>bottom text</p>
|
||||||
<p class="fs-100 padding-mid-top">bottom text (now with extra spice™)</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<footer class="links">
|
||||||
<footer class="lock-bottom flex row">
|
<a title="about" href="about">
|
||||||
<a title="about" href="about">
|
📄
|
||||||
📄
|
</a>
|
||||||
</a>
|
<a id="moonlink" title="cool stuff" href="cool-stuff">
|
||||||
<a id="moonlink" title="cool stuff" href="cool-stuff">
|
🌜
|
||||||
🌜
|
</a>
|
||||||
</a>
|
<a title="git provider" href="https://github.com/em-ilia">
|
||||||
<a title="git provider" href="https://git.ilia.moe/explore/repos">
|
💻
|
||||||
💻
|
</a>
|
||||||
</a>
|
<a title="i love email" href="mailto:em@ilia.moe">
|
||||||
<a title="i love email" href="mailto:em@ilia.moe">
|
📠
|
||||||
📠
|
</a>
|
||||||
</a>
|
</footer>
|
||||||
<a id="camera" title="picture" href="pictures">
|
</main>
|
||||||
📷
|
</body>
|
||||||
</a>
|
|
||||||
</footer>
|
|
||||||
</main>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -12,9 +12,6 @@ if (is_mobile === '1') {
|
||||||
}
|
}
|
||||||
|
|
||||||
const moon = document.getElementById('moonlink');
|
const moon = document.getElementById('moonlink');
|
||||||
|
console.log(moon);
|
||||||
moon.onmouseover = function() {moon.innerHTML = "🌛"}
|
moon.onmouseover = function() {moon.innerHTML = "🌛"}
|
||||||
moon.onmouseout = 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";
|
@import "ilia1";
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-top: 3vh;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -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";
|
@import "ilia1";
|
||||||
@use "waltuh/variables" as *;
|
|
||||||
|
|
||||||
#pgp_a {
|
|
||||||
position: fixed;
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
font-size: $fs-200;
|
|
||||||
margin-top: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
width: 100%;
|
a {
|
||||||
font-size: clamp(2rem, $fs-800, 15vw);
|
display: table-cell;
|
||||||
justify-content: center !important;
|
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