Compare commits
29 Commits
| Author | SHA1 | Date |
|---|---|---|
 Emilia Allison
|
8e8f8d830c
|
|
|
Emilia Allison
|
720f49587b
|
|
|
Emilia Allison
|
fcb3b42bc7
|
|
|
Emilia Allison
|
4f94881acc
|
|
|
Emilia Allison
|
64226497d8
|
|
|
Emilia Allison
|
6da3ea4df4
|
|
|
Emilia Allison
|
e4b24647c1
|
|
|
Emilia Allison
|
4ba630ecc8
|
|
|
Emilia Allison
|
18f6ff6196
|
|
|
Emilia Allison
|
4047a3c8ab
|
|
|
Emilia Allison
|
fbd4c91b9b
|
|
|
Emilia Allison
|
6dbe14b0b2
|
|
|
Emilia Allison
|
ed00f2bdfe
|
|
|
Emilia Allison
|
e2b60db31d
|
|
|
Emilia Allison
|
e9aa55a520
|
|
|
Emilia Allison
|
f54de47a25
|
|
|
Emilia Allison
|
7110401183
|
|
|
Emilia Allison
|
d9b7f73b19
|
|
|
Emilia Allison
|
a2a7268ded
|
|
|
Emilia Allison
|
8e0e18ac84
|
|
|
Emilia Allison
|
a50eeeaf79
|
|
|
Emilia Allison
|
0fda2bc258
|
|
|
Emilia Allison
|
d7bfb4a231
|
|
|
Emilia Allison
|
1e8c7c74e5
|
|
|
Emilia Allison
|
3dbac61e65
|
|
|
Emilia Allison
|
8bb2fc1542
|
|
|
Emilia Allison
|
170c0f3080
|
|
|
Emilia Allison
|
acb6e4b9a9
|
|
|
Emilia Allison
|
21855241fd
|
|
|
@ -1,4 +1,5 @@
|
|||
src/css/
|
||||
src/pictures
|
||||
push_updates.sh
|
||||
hugo/*/public/
|
||||
hugo/*/resources/_gen/
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ css-watch:
|
|||
sass -w scss:css
|
||||
|
||||
server:
|
||||
python -m http.server
|
||||
python -m http.server -b 127.0.0.1
|
||||
|
||||
dev:
|
||||
make -j 2 css-watch server
|
||||
|
|
|
|||
|
|
@ -9,22 +9,24 @@
|
|||
<div id="overlay"></div>
|
||||
<main class="offset-grid--top--wide fullsize side-a">
|
||||
<div>
|
||||
<div>
|
||||
<h1>
|
||||
<div class="flex column-tight">
|
||||
<h1 class="ff-serif fs-700 padding-high-top">
|
||||
About
|
||||
</h1>
|
||||
<h2>isn't that the page title?</h2>
|
||||
<p>
|
||||
<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>.
|
||||
Anyway, here's some information about myself, posted on the aforementioned <span class="waltuh-gradient">internet</span>.
|
||||
Here's some information about myself, posted on the aforementioned <span class="waltuh-gradient">internet</span>.
|
||||
</p>
|
||||
<p>
|
||||
I just completed a degree in mathematics at Penn State.
|
||||
<p class="ff-sans fs-300 padding-mid-top">
|
||||
I work for a pretty neat company as an associate robotic automation engineer.
|
||||
(this means I am cool, I think.)
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Opinions</h1>
|
||||
<h2>A 100% exhaustive list, of course</h2>
|
||||
<div class="flex column-tight">
|
||||
<h1 class="ff-serif fs-700 padding-high-top">Opinions</h1>
|
||||
<h3 class="ff-serif fs-500 padding-none-top">A 100% exhaustive list, of course</h3>
|
||||
<span class="ff-sans fs-300 padding-low-top">
|
||||
<ul>
|
||||
<li>
|
||||
the modern internet is bloated
|
||||
|
|
@ -33,16 +35,13 @@ the modern internet is bloated
|
|||
</ol>
|
||||
</li>
|
||||
<li>open source software is very cool</li>
|
||||
<li>
|
||||
linux distros don't matter
|
||||
<ol>
|
||||
<li>btw i use</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>social media is kinda yucky!</li>
|
||||
<li>the military industrial complex</li>
|
||||
<li>my taste in music is <s>objectively just ok</s> taylor swift</li>
|
||||
<li>FluentControl whistle noise 🔥 🗣</li>
|
||||
<li>🦐 🍤</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Emilia Allison</title>
|
||||
<link rel="stylesheet" href="/css/about.css">
|
||||
<link rel="stylesheet" href="/css/books.css">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
</head>
|
||||
<body class="no-overflow">
|
||||
|
|
@ -13,15 +13,15 @@
|
|||
<h1>
|
||||
Books
|
||||
</h1>
|
||||
<h3>primarily those that I've read</h3>
|
||||
<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 will Goodreads
|
||||
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>
|
||||
<h1 class="padding-mid-top">
|
||||
the books
|
||||
</h1>
|
||||
|
||||
|
|
@ -46,6 +46,45 @@
|
|||
<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>
|
||||
|
|
@ -73,7 +112,7 @@
|
|||
<p class="book-entry__year"> 1969 </p>
|
||||
<p class="book-entry__score"> 8 </p>
|
||||
<p class="book-entry__comments">
|
||||
Messiah is far more philosophical than Dune.
|
||||
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.
|
||||
|
|
@ -88,7 +127,7 @@
|
|||
<div>
|
||||
<p class="book-entry__author"> Frank Herbert </p>
|
||||
<p class="book-entry__year"> 1976 </p>
|
||||
<p class="book-entry__score"> 7.5 </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
|
||||
|
|
@ -124,7 +163,7 @@
|
|||
<div>
|
||||
<p class="book-entry__author"> Frank Herbert </p>
|
||||
<p class="book-entry__year"> 1984 </p>
|
||||
<p class="book-entry__score"> 6.5 </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,
|
||||
|
|
@ -147,7 +186,7 @@
|
|||
<div>
|
||||
<p class="book-entry__author"> William Gibson </p>
|
||||
<p class="book-entry__year"> 1984 </p>
|
||||
<p class="book-entry__score"> 7 </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
|
||||
|
|
@ -183,6 +222,10 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,68 @@
|
|||
<!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>
|
||||
<h1 class="ff-serif fs-700 gap-small-bottom">
|
||||
Cool Stuff
|
||||
</h1>
|
||||
<h3>it's debatably cool</h3>
|
||||
<h3 class="gap-mid-bottom ff-serif fs-500">it's debatably cool</h3>
|
||||
<span class="ff-sans fs-300 span-full-width">
|
||||
<p>
|
||||
Cool stuff is code for links to subpages.
|
||||
If a page uses/requires JavaScript (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>
|
||||
<h1>
|
||||
</span>
|
||||
<h1 class="gap-small-bottom ff-serif fs-700">
|
||||
the stuff
|
||||
</h1>
|
||||
<h3>
|
||||
<h3 class="ff-serif fs-500">
|
||||
Artisan Handcrafted
|
||||
</h3>
|
||||
<span class="ff-sans fs-300 span-full-width">
|
||||
<ul>
|
||||
<li><a href="css-purgatory">css purgatory</a></li>
|
||||
<li><a href="plate-tool">Plate tool</a> ☕
|
||||
<a href="https://git.ilia.moe/emilia/plate-tool">💻</a></li>
|
||||
<li><a href="cool-spotify-blend">Cool spotify blend</a> ☕
|
||||
<a href="https://git.ilia.moe/emilia/cool-spotify-blend">💻</a></li>
|
||||
<li><a href="plate-tool-beta">Plate tool</a>
|
||||
<a href="https://git.ilia.moe/emilia/plate-tool">☕💻
|
||||
🤵‍♀️</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>
|
||||
Static Generated
|
||||
</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></li>
|
||||
<li><a href="recipes">Recipes</a>
|
||||
<ul>
|
||||
I so desperately need to update this section.
|
||||
None of these are up-to-date.
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/pictures">Pictures</a>
|
||||
<ul>
|
||||
Password protected for your non-enjoyment.
|
||||
intentionally bizarre pictures blasted onto your screen
|
||||
by way of a terrible python pipeline.
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="books">Books</a>
|
||||
<ul>
|
||||
proof of basic literacy
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
<a href="../">
|
||||
</a>
|
||||
|
|
@ -47,4 +72,5 @@ When relevant, a link to a Git repo will be provided (💻).
|
|||
<p><a href="../">Return</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,6 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Emilia Allison</title>
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
|
|
@ -14,46 +13,43 @@
|
|||
<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: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 -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
</head>
|
||||
|
||||
<body class="vsc-initialized">
|
||||
<div id="overlay"></div>
|
||||
<main class="fullsize offset-grid--left--narrow">
|
||||
<main class="offset-grid--top fullsize">
|
||||
<div>
|
||||
<div class="main_grid">
|
||||
<h1 class="text-dark ff-serif fs-800 gap-large-bottom sideways-text">
|
||||
Em<span class="new-style-gradient-sideline--right">ilia</span>
|
||||
<h1 class="text-dark ff-mono fs-800 gap-large-bottom">
|
||||
Em<span class="waltuh-gradient-underline">ilia</span>.
|
||||
</h1>
|
||||
<div>
|
||||
<p>mathematics enjoyer</p>
|
||||
<div class="ff-sans fs-400">
|
||||
<p>allegedly an engineer???</p>
|
||||
<p id="pgp_p">pgp:
|
||||
<a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index"
|
||||
id="pgp_a" class="fixed">
|
||||
<a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a" class="fixed">
|
||||
8CBC 050E 7BBB 8779 ECCD 4207 4B33 E52E 3BD2 5455
|
||||
</a>
|
||||
</p>
|
||||
<p>bottom text (now with extra spice™)</p>
|
||||
<p class="fs-100 padding-mid-top">bottom text (now with extra spice™)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="lock-right flex column">
|
||||
<footer class="lock-bottom flex row">
|
||||
<a title="about" href="about">
|
||||
📄
|
||||
</a>
|
||||
<a id="moonlink" title="cool stuff" href="cool-stuff">
|
||||
🌜
|
||||
</a>
|
||||
<a title="git provider" href="https://github.com/em-ilia">
|
||||
<a title="git provider" href="https://git.ilia.moe/explore/repos">
|
||||
💻
|
||||
</a>
|
||||
<a title="i love email" href="mailto:em@ilia.moe">
|
||||
📠
|
||||
</a>
|
||||
<a id="camera" title="picture" href="pictures">
|
||||
📷
|
||||
</a>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@ if (is_mobile === '1') {
|
|||
}
|
||||
|
||||
const moon = document.getElementById('moonlink');
|
||||
console.log(moon);
|
||||
moon.onmouseover = function() {moon.innerHTML = "🌛"}
|
||||
moon.onmouseout = function() {moon.innerHTML = "🌜"}
|
||||
|
||||
const camera = document.getElementById('camera');
|
||||
camera.onmouseover = function() {camera.innerHTML = "📸"}
|
||||
camera.onmouseout = function() {camera.innerHTML = "📷"}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use "new-style/new-style";
|
||||
@use "waltuh/waltuh";
|
||||
|
||||
h1 {
|
||||
margin-top: 3vh;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
@use "waltuh/waltuh";
|
||||
@use "waltuh/variables"; // Needed to extend ff-serif
|
||||
|
||||
h1 {
|
||||
@extend .ff-serif;
|
||||
@extend .fs-700;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend .ff-serif;
|
||||
@extend .fs-500;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend .ff-serif;
|
||||
@extend .fs-500;
|
||||
}
|
||||
|
||||
details > div {
|
||||
@extend .padding-low-top;
|
||||
}
|
||||
|
||||
p {
|
||||
@extend .ff-sans;
|
||||
@extend .fs-300;
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use "new-style/new-style";
|
||||
@use "new-style/variables" as *;
|
||||
@use "waltuh/waltuh";
|
||||
@use "waltuh/variables" as *;
|
||||
|
||||
#pgp_a {
|
||||
position: fixed;
|
||||
|
|
@ -9,22 +9,8 @@
|
|||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.main_grid {
|
||||
height: 16em;
|
||||
display: inline-grid;
|
||||
grid-template-columns: [title] 1fr [subtext-col] 6fr;
|
||||
grid-template-rows: [blank1] 1fr [subtext-row] 1fr [blank2] 1fr;
|
||||
grid-template-areas: "t ." "t d" "t .";
|
||||
|
||||
&>h1 {
|
||||
grid-area: t;
|
||||
}
|
||||
&>div {
|
||||
grid-area: d;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
font-size: clamp(2rem, $fs-800, 15vw);
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
|
||||
$-color-bg: hsl(180 1% 10%);
|
||||
$-color-dark: color.adjust($-color-bg, $lightness: +80%);
|
||||
$-color-fg: hsl(344 65% 20%);
|
||||
$-ff-serif: "Inconsolata", monospace;
|
||||
$-ff-sans: "Jost", sans-serif;
|
||||
$-fs-900: math.div(100rem, 16);
|
||||
|
||||
@forward "base" with (
|
||||
$color-bg: $-color-bg,
|
||||
$color-dark: $-color-dark,
|
||||
$color-fg: $-color-fg,
|
||||
$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;
|
||||
}
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
@use "sass:math";
|
||||
@use "sass:color";
|
||||
@use "../variables" as *;
|
||||
|
||||
|
||||
@keyframes wipeIn {
|
||||
from { clip-path: inset(0 100% 0 0); }
|
||||
to { clip-path: inset(0 0 0 0); }
|
||||
}
|
||||
|
||||
span.new-style-gradient {
|
||||
font-weight: 600;
|
||||
|
||||
color: transparent;
|
||||
$grad1: color.adjust($color-fg, $saturation: +80%, $lightness: +10%);
|
||||
$grad2: color.adjust($grad1, $lightness: -10%);
|
||||
background: linear-gradient($grad1, $grad2);
|
||||
background-size: 30vmin 30vmin;
|
||||
background-clip: text;
|
||||
|
||||
animation: wipeIn 0.25s ease-in;
|
||||
|
||||
}
|
||||
|
||||
span.new-style-gradient-underline {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@extend span, .new-style-gradient;
|
||||
background-clip: unset;
|
||||
border-radius: 2rem;
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -0.1rem;
|
||||
left: 5%;
|
||||
height: 0.6rem;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
%new-style-gradient-sideline {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@extend span, .new-style-gradient;
|
||||
background-clip: unset;
|
||||
border-radius: 2rem;
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
height: 95%;
|
||||
width: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
span.new-style-gradient-sideline--right {
|
||||
@extend %new-style-gradient-sideline;
|
||||
&::after {
|
||||
right: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
span.new-style-gradient-sideline--left {
|
||||
@extend %new-style-gradient-sideline;
|
||||
&::after {
|
||||
left: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
span.spoiler {
|
||||
background: black;
|
||||
color: transparent;
|
||||
user-select: none;
|
||||
|
||||
transition: background 100ms ease,
|
||||
color 100ms ease;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
@use "waltuh/waltuh";
|
||||
|
||||
main {
|
||||
grid-template-rows: 0.1fr 1fr 1fr !important; // Override default
|
||||
grid-template-columns: 15vw 1fr 15vw !important; // Mobile compat is less of a concern for this page
|
||||
|
||||
div:first-child {
|
||||
div:first-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
summary {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
width: 100%;
|
||||
margin-top: 3vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
img {
|
||||
width: clamp(12rem, calc(20vw + 1vmin), calc(20vw + 1vmin)); // Add 1vmin to account for padding
|
||||
aspect-ratio: auto;
|
||||
|
||||
margin: 1vmin 1vmin;
|
||||
padding: 1vmin 1vmin;
|
||||
|
||||
background: white;
|
||||
|
||||
+ .black-bg {
|
||||
background: black !important;
|
||||
}
|
||||
+ .no-bg {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
|
||||
$-color-white: hsl(280 30% 80%);
|
||||
$-color-dark: color.adjust($-color-white, $lightness: -50%);
|
||||
$-color-light: hsl(190 80% 30%);
|
||||
$-ff-mono: "Inconsolata", monospace;
|
||||
$-ff-serif: "Playfair", serif;
|
||||
$-ff-sans: "Jost", sans-serif;
|
||||
$-fs-900: math.div(100rem, 16);
|
||||
|
||||
@forward "base" with (
|
||||
$color-white: $-color-white,
|
||||
$color-dark: $-color-dark,
|
||||
$color-light: $-color-light,
|
||||
$ff-serif: $-ff-serif,
|
||||
$ff-sans: $-ff-sans,
|
||||
$ff-mono: $-ff-mono,
|
||||
$fs-900: $-fs-900
|
||||
);
|
||||
|
||||
@font-face {
|
||||
font-family: "Inconsolata";
|
||||
src: url("/fonts/Inconsolata.ttf");
|
||||
|
||||
font-display: swap;
|
||||
font-variation-settings: "wdth" 85;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Jost";
|
||||
src: url("/fonts/Jost.ttf");
|
||||
|
||||
font-display: swap;
|
||||
font-variation-settings: "wght" 300;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Shantell";
|
||||
src: url("/fonts/Shantell.ttf");
|
||||
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Playfair";
|
||||
src: url("/fonts/Playfair.ttf");
|
||||
|
||||
font-display: swap;
|
||||
font-variation-settings: "wght" 300;
|
||||
font-variation-settings: "wdth" 85;
|
||||
}
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
/* colors */
|
||||
|
||||
$color-dark: hsl(0 0% 0%) !default; /* Black */
|
||||
$color-fg: hsl(0 0% 50%) !default; /* Gray */
|
||||
$color-bg: hsl(0 0% 100%) !default;/* White */
|
||||
$color-light: hsl(0 0% 50%) !default; /* Gray */
|
||||
$color-white: hsl(0 0% 100%) !default;/* White */
|
||||
|
||||
/* font */
|
||||
|
||||
|
|
@ -30,10 +30,12 @@ $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 */
|
||||
|
|
@ -57,6 +59,12 @@ $ff-sans: sans-serif !default;
|
|||
align-items: center;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.column-tight {
|
||||
@extend .column;
|
||||
gap: 0rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
|
|
@ -82,20 +90,8 @@ $ff-sans: sans-serif !default;
|
|||
bottom: 0%;
|
||||
}
|
||||
|
||||
.lock-right {
|
||||
position: fixed;
|
||||
right: 0%;
|
||||
}
|
||||
|
||||
.lock-top {
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
}
|
||||
|
||||
.sideways-text {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
letter-spacing: -1.0rem;
|
||||
.span-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Other */
|
||||
|
|
@ -115,12 +111,12 @@ $ff-sans: sans-serif !default;
|
|||
/* Color Classes */
|
||||
|
||||
.bg-dark { background-color: $color-dark; }
|
||||
.bg-light { background-color: $color-fg; }
|
||||
.bg-white { background-color: $color-bg; }
|
||||
.bg-light { background-color: $color-light; }
|
||||
.bg-white { background-color: $color-white; }
|
||||
|
||||
.text-dark { color: $color-dark; }
|
||||
.text-light { color: $color-fg; }
|
||||
.text-white { color: $color-bg; }
|
||||
.text-light { color: $color-light; }
|
||||
.text-white { color: $color-white; }
|
||||
|
||||
/* Font Classes */
|
||||
|
||||
|
|
@ -132,14 +128,30 @@ $ff-sans: sans-serif !default;
|
|||
.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 {
|
||||
|
|
@ -151,8 +163,7 @@ section:not(:last-of-type) {
|
|||
}
|
||||
|
||||
footer {
|
||||
height: 100%;
|
||||
margin-right: 3vw;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
/* ----- */
|
||||
|
|
@ -181,7 +192,7 @@ body {
|
|||
font-family: $ff-sans;
|
||||
font-size: $fs-400;
|
||||
color: $color-dark;
|
||||
background-color: $color-bg;
|
||||
background-color: $color-white;
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
.book-entry {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 1vh !important;
|
||||
&:last-of-type {
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
|
@ -15,23 +16,38 @@
|
|||
}
|
||||
div {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 0.5fr 1fr;
|
||||
grid-template-rows: max-content 1fr;
|
||||
grid-template-areas:
|
||||
"author year score"
|
||||
"comments comments comments"
|
||||
"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: ";
|
||||
}
|
||||
|
|
@ -41,4 +57,5 @@
|
|||
}
|
||||
.book-entry__comments {
|
||||
grid-area: comments;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
@forward "header";
|
||||
@forward "overlay";
|
||||
@forward "marks";
|
||||
@forward "book_entry";
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
@use "sass:math";
|
||||
@use "sass:color";
|
||||
@use "../variables" as *;
|
||||
|
||||
|
||||
@keyframes waltuh-gradient-anim {
|
||||
$r: 6em;
|
||||
$pd: math.div(2*math.$pi,10);
|
||||
from {
|
||||
background-position: 6em 0em;
|
||||
}
|
||||
@for $i from 1 through 9 {
|
||||
#{$i*10}% {
|
||||
background-position: $r*math.cos($i*$pd) $r*math.sin($i*$pd);
|
||||
}
|
||||
}
|
||||
to {
|
||||
background-position: 6em 0em;
|
||||
}
|
||||
}
|
||||
@keyframes wipeIn {
|
||||
from { clip-path: inset(0 100% 0 0); }
|
||||
to { clip-path: inset(0 0 0 0); }
|
||||
}
|
||||
|
||||
span.waltuh-gradient {
|
||||
font-weight: 600;
|
||||
|
||||
color: transparent;
|
||||
$grad1: color.adjust($color-dark, $saturation: +80%, $lightness: +20%);
|
||||
$grad2: color.adjust($grad1, $lightness: +30%);
|
||||
background: repeating-radial-gradient($color-dark, $grad1, $grad2 80%, white);
|
||||
background-size: 30vmin 30vmin;
|
||||
background-clip: text;
|
||||
|
||||
animation: waltuh-gradient-anim 12s linear infinite,
|
||||
wipeIn 0.25s ease-in;
|
||||
|
||||
}
|
||||
|
||||
span.waltuh-gradient-underline {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@extend span, .waltuh-gradient;
|
||||
background-clip: unset;
|
||||
border-radius: 2rem;
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0.2rem;
|
||||
left: 10%;
|
||||
height: 0.4rem;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
span.spoiler {
|
||||
background: black;
|
||||
color: transparent;
|
||||
user-select: none;
|
||||
|
||||
transition: background 100ms ease,
|
||||
color 100ms ease;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -42,6 +42,8 @@
|
|||
}
|
||||
|
||||
// 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: "";
|
||||
|
|
@ -76,6 +78,9 @@ $offset-amt: 0.33fr;
|
|||
@extend .offset-grid#{$dir_adj}#{$size_adj};
|
||||
div {
|
||||
grid-area: n / s;
|
||||
* {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue