Compare commits

..

1 Commits

Author SHA1 Message Date
Emilia Allison 820a5aed93
fix: base.scss not importable correctly 2022-10-02 17:46:10 -04:00
56 changed files with 426 additions and 1860 deletions

1
.gitignore vendored
View File

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

3
.gitmodules vendored
View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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 />

View File

@ -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

View File

@ -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&deg;F for 35 to 40 minutes

View File

@ -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

View File

@ -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

View File

@ -6,51 +6,48 @@
<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
the modern internet is bloated
<ol>
<li>i will contribute to this bloat</li>
</ol>
</li>
<li>open source software is very cool</li>
<li>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 &#x1f525; &#x1F5E3;</li>
<li>&#129424 &#127844</li>
</ul>
</span>
<li>my taste in music is objectively just ok</li>
<li>&#129424</li>
</div>
</div>
</div>
<a href="../">
</a>
<div class="side-a__main-content-cover"></div>
<footer>
<p><a href="../">Return</a></p>
</footer>
</main>
<footer class="lock-bottom">
<p><a href="../">Return</a></p>
</footer>
</body>
</html>

View File

@ -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>

View File

@ -1,5 +1,4 @@
@use "sass:math";
@mixin reset {
/* ----------------- */
/* Custom Properties */
/* ----------------- */
@ -31,6 +30,7 @@ $ff-serif: serif;
$ff-sans-cond: sans-serif;
$ff-sans: sans-serif;
@mixin utility{
/* --------------- */
/* Utility Classes */
/* --------------- */
@ -133,7 +133,9 @@ section:not(:last-of-type) {
footer {
margin-top: 3vh;
}
}
@mixin reset {
/* ----- */
/* Reset */
/* ----- */
@ -168,6 +170,13 @@ body {
main {
margin-left: 1vw;
margin-top: 1vh;
* {
z-index: 2;
}
}
footer {
z-index: 2;
}
img, picture {
@ -189,9 +198,8 @@ input, button, textarea, select {
scroll-behaviour: auto !important;
}
}
}
@include reset;
}
/* -------------------- */
/* Non-Reusable Classes */

View File

@ -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>
@ -52,14 +54,6 @@
Second candidate format for the homepage
</p>
</li>
<li>
<h3>
<a href="waltuh">Waltuh</a>
</h3>
<p>
wacky and zany purple theme, collaborative
</p>
</li>
</ol>
</div>
</div>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,39 +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;
}

View File

@ -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;
}

View File

@ -1,74 +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: 100%;
width: 100%;
div {
justify-self: center;
grid-area: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
h1, h2, h3 {
display: inline-block;
width: min-content;
}
}
}
// Grid Offset Hell
$offset-amt: 0.33fr;
@each $dir in [top, bottom, left, right] {
$dir_adj: "";
@if $dir {
$dir_adj: "--#{$dir}";
}
@each $size, $size_val in (null: 1fr, wide: 0.8fr, narrow: 1.2fr) {
$size_adj: "";
@if $size {
$size_adj: "--#{$size}";
}
.offset-grid#{$dir_adj}#{$size_adj} {
$-l: [1fr, 1fr, 1fr, 1fr];
@if $dir == top {
$-l: [$offset-amt, 1fr, $size_val, $size_val];
} @else if $dir == bottom {
$-l: [1fr, $offset-amt, $size_val, $size_val];
} @else if $dir == left {
$-l: [$size_val, $size_val, $offset-amt, 1fr];
} @else if $dir == right {
$-l: [$size_val, $size_val, 1fr, $offset-amt];
}
@debug "list: #{$-l}";
@debug list.nth($-l, 1);
@include grid-3x3-offset($top: list.nth($-l,1), $bottom: list.nth($-l,2),
$left: list.nth($-l,3), $right: list.nth($-l,4));
@extend %offset-grid;
}
}
}

View File

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

View File

@ -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;
}
}
}

View File

@ -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;}

View File

@ -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">
<div id="overlay">
</div>
<main class="offset-grid--top--wide--column side-a">
<div>
<h1 class="ff-serif fs-700 gap-small-bottom">
Cool Stuff
</h1>
<h3 class="gap-mid-bottom ff-serif fs-500">it's debatably cool</h3>
<span class="ff-sans fs-300 span-full-width">
<p>
If a page uses/requires JavaScript (or WASM), its link will be marked with (&#x2615).
When relevant, a link to a Git repo will be provided (&#128187).
If content is useful for my job, it will be marked with
(&#x1f935;&#x200d;&#x2640;&#xfe0f;).
</p>
</span>
<h1 class="gap-small-bottom ff-serif fs-700">
the stuff
</h1>
<h3 class="ff-serif fs-500">
Artisan Handcrafted
</h3>
<span class="ff-sans fs-300 span-full-width">
<ul>
<li><a href="plate-tool-beta">Plate tool</a>
<a href="https://git.ilia.moe/emilia/plate-tool">&#x2615;&#128187;
&#x1f935;&#x200d;&#x2640;&#xfe0f;</a>
</li>
</ul>
</span>
<h3 class="ff-serif fs-500 padding-low-top">
Static Generated (sometimes)
</h3>
<span class="ff-sans fs-300 span-full-width">
<ul>
<li><a href="recipes">Recipes</a>
<ul>
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>
<head>
<title>Emilia Allison</title>
<link rel="stylesheet" href="/css/about.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div id="overlay">
</div>
<a href="../">
</a>
<div class="side-a__main-content-cover"></div>
</main>
<footer class="lock-bottom">
<p><a href="../">Return</a></p>
</footer>
</body>
<main class="grid-center--offset-wide">
<div>
<h1>
Cool Stuff
</h1>
<h2>it's debatable</h2>
<p>
Cool stuff is code for links to subpages.
If a page uses/requires JavaScript, its link will be marked with (&#x2615).
</p>
<h1>
the stuff
</h1>
<a href="css-purgatory"><h3>
css purgatory
</h3></a>
<h3>
Static
</h3>
<ul>
<li><a href="recipes">Recipes</a></li>
</ul>
</div>
<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.

View File

@ -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">
<div>
<h1 class="text-dark ff-mono fs-800 gap-large-bottom">
Em<span class="waltuh-gradient-underline">ilia</span>.
</h1>
<div class="ff-sans fs-400">
<p>allegedly an engineer???</p>
<p id="pgp_p">pgp:
<body>
<div id="overlay">
</div>
<main class="grid-center--offset">
<div>
<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&trade;)</p>
</div>
</div>
<footer class="lock-bottom flex row">
<a title="about" href="about">
&#128196
</a>
<a id="moonlink" title="cool stuff" href="cool-stuff">
&#127772
</a>
<a title="git provider" href="https://git.ilia.moe/explore/repos">
&#128187
</a>
<a title="i love email" href="mailto:em@ilia.moe">
&#128224
</a>
<a id="camera" title="picture" href="pictures">
&#128247
</a>
</footer>
</main>
</a></p>
<p>bottom text</p>
</div>
</div>
<footer class="links">
<a title="about" href="about">
&#128196
</a>
<a id="moonlink" title="cool stuff" href="cool-stuff">
&#127772
</a>
<a title="git provider" href="https://github.com/em-ilia">
&#128187
</a>
<a title="i love email" href="mailto:em@ilia.moe">
&#128224
</a>
</footer>
</main>
</body>
</html>

View File

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

View File

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

View File

@ -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;
}

243
src/scss/ilia1.scss Normal file
View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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;
}
}
}

59
src/scss/reset.scss Normal file
View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

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

View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -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);
}
}

View File

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

View File

@ -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;
}
}
}

View File

@ -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;}