emilia
/
personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: emilia:master
Branches Tags
emilia:master
emilia:new-style
emilia:waltuh
emilia:feature-base-v1.1
emilia:style-2
emilia:v1.0.2
emilia:v1.0.1
emilia:v1.0.0
..
compare: emilia:new-style
Branches Tags
emilia:master
emilia:new-style
emilia:waltuh
emilia:feature-base-v1.1
emilia:style-2
emilia:v1.0.2
emilia:v1.0.1
emilia:v1.0.0

1 Commits
master ... new-style

Author SHA1 Message Date
Emilia Allison 81a8c1cf79
a draft that neither em nor i really like 2023-11-15 23:37:00 -05:00
28 changed files with 286 additions and 460 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

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

2
src/Makefile
View File

@ -8,7 +8,7 @@ css-watch:
sass -w scss:css sass -w scss:css
server: server:
python -m http.server -b 127.0.0.1 python -m http.server
dev: dev:
make -j 2 css-watch server make -j 2 css-watch server

31
src/about.html
View File

@ -9,24 +9,22 @@
<div id="overlay"></div> <div id="overlay"></div>
<main class="offset-grid--top--wide fullsize side-a"> <main class="offset-grid--top--wide fullsize side-a">
<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 <span class="waltuh-gradient">internet</span>.
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 <span class="waltuh-gradient">internet</span>.
</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 just completed a degree in mathematics at Penn State.
(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> <ul>
<li> <li>
the modern internet is bloated the modern internet is bloated
@ -35,13 +33,16 @@ Here's some information about myself, posted on the aforementioned <span class="
</ol> </ol>
</li> </li>
<li>open source software is very cool</li> <li>open source software is very cool</li>
<li>
linux distros don't matter
<ol>
<li>btw i use</li>
</ol>
</li>
<li>social media is kinda yucky!</li> <li>social media is kinda yucky!</li>
<li>the military industrial complex</li>
<li>my taste in music is <s>objectively just ok</s> taylor swift</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> <li>&#129424 &#127844</li>
</ul> </ul>
</span>
</div> </div>
</div> </div>
</div> </div>

59
src/cool-stuff/books.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title>Emilia Allison</title> <title>Emilia Allison</title>
<link rel="stylesheet" href="/css/books.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 class="no-overflow"> <body class="no-overflow">
@ -13,15 +13,15 @@
<h1> <h1>
Books Books
</h1> </h1>
<h3 class="padding-none-top padding-low-bottom">primarily those that I've read</h3> <h3>primarily those that I've read</h3>
<p> <p>
I wouldn't say that I read a lot. I wouldn't say that I read a lot.
This page exists because I am generally dissatisfied with Goodreads This page exists because I am generally dissatisfied will Goodreads
and its competitors. and its competitors.
My commentary may or may not include spoilers (clearly marked). My commentary may or may not include spoilers (clearly marked).
The contents are placed here in no particular order. The contents are placed here in no particular order.
</p> </p>
<h1 class="padding-mid-top"> <h1>
the books the books
</h1> </h1>
@ -46,45 +46,6 @@
<div class="book-entry-container"> <div class="book-entry-container">
<!-- Put books below --> <!-- 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"> <section class="book-entry">
<details> <details>
<summary><h2>Dune</h2></summary> <summary><h2>Dune</h2></summary>
@ -112,7 +73,7 @@
<p class="book-entry__year"> 1969 </p> <p class="book-entry__year"> 1969 </p>
<p class="book-entry__score"> 8 </p> <p class="book-entry__score"> 8 </p>
<p class="book-entry__comments"> <p class="book-entry__comments">
Messiah is more philosophical than Dune. Messiah is far more philosophical than Dune.
Herbert's anti-theocracy and anti-autocracy messaging is far stronger here. Herbert's anti-theocracy and anti-autocracy messaging is far stronger here.
One might say that Herbert's rejection of charismatically driven tyranny One might say that Herbert's rejection of charismatically driven tyranny
was prescient. was prescient.
@ -127,7 +88,7 @@
<div> <div>
<p class="book-entry__author"> Frank Herbert </p> <p class="book-entry__author"> Frank Herbert </p>
<p class="book-entry__year"> 1976 </p> <p class="book-entry__year"> 1976 </p>
<p class="book-entry__score"> 6 </p> <p class="book-entry__score"> 7.5 </p>
<p class="book-entry__comments"> <p class="book-entry__comments">
In my mind, Children of Dune exists almost solely to set up its sequel. In my mind, Children of Dune exists almost solely to set up its sequel.
This book has some very uncomfortable moments This book has some very uncomfortable moments
@ -163,7 +124,7 @@
<div> <div>
<p class="book-entry__author"> Frank Herbert </p> <p class="book-entry__author"> Frank Herbert </p>
<p class="book-entry__year"> 1984 </p> <p class="book-entry__year"> 1984 </p>
<p class="book-entry__score"> 5 </p> <p class="book-entry__score"> 6.5 </p>
<p class="book-entry__comments"> <p class="book-entry__comments">
How I adore Herbert's writing of women. How I adore Herbert's writing of women.
There are many interesting ideas in Heretics, There are many interesting ideas in Heretics,
@ -186,7 +147,7 @@
<div> <div>
<p class="book-entry__author"> William Gibson </p> <p class="book-entry__author"> William Gibson </p>
<p class="book-entry__year"> 1984 </p> <p class="book-entry__year"> 1984 </p>
<p class="book-entry__score"> 5 </p> <p class="book-entry__score"> 7 </p>
<p class="book-entry__comments"> <p class="book-entry__comments">
Although I found it hard to follow at times, Although I found it hard to follow at times,
Neuromancer's numerous contributions (if not outright creation of) to the genre Neuromancer's numerous contributions (if not outright creation of) to the genre
@ -222,10 +183,6 @@
<p class="book-entry__author"> Harper Lee </p> <p class="book-entry__author"> Harper Lee </p>
<p class="book-entry__year"> 1960 </p> <p class="book-entry__year"> 1960 </p>
<p class="book-entry__score"> 10 </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> </div>
</details> </details>
</section> </section>

52
src/cool-stuff/index.html
View File

@ -1,68 +1,43 @@
<!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 class="no-overflow"> <body class="no-overflow">
<div id="overlay"> <div id="overlay">
</div> </div>
<main class="offset-grid--top--wide--column side-a"> <main class="offset-grid--top--wide--column side-a">
<div> <div>
<h1 class="ff-serif fs-700 gap-small-bottom"> <h1>
Cool Stuff Cool Stuff
</h1> </h1>
<h3 class="gap-mid-bottom ff-serif fs-500">it's debatably cool</h3> <h3>it's debatably cool</h3>
<span class="ff-sans fs-300 span-full-width">
<p> <p>
Cool stuff is code for links to subpages.
If a page uses/requires JavaScript (or WASM), its link will be marked with (&#x2615). If a page uses/requires JavaScript (or WASM), its link will be marked with (&#x2615).
When relevant, a link to a Git repo will be provided (&#128187). 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> </p>
</span> <h1>
<h1 class="gap-small-bottom ff-serif fs-700">
the stuff the stuff
</h1> </h1>
<h3 class="ff-serif fs-500"> <h3>
Artisan Handcrafted Artisan Handcrafted
</h3> </h3>
<span class="ff-sans fs-300 span-full-width">
<ul> <ul>
<li><a href="plate-tool-beta">Plate tool</a> <li><a href="css-purgatory">css purgatory</a></li>
<a href="https://git.ilia.moe/emilia/plate-tool">&#x2615;&#128187; <li><a href="plate-tool">Plate tool</a> &#x2615
&#x1f935;&#x200d;&#x2640;&#xfe0f;</a> <a href="https://git.ilia.moe/emilia/plate-tool">&#128187</a></li>
</li> <li><a href="cool-spotify-blend">Cool spotify blend</a> &#x2615
<a href="https://git.ilia.moe/emilia/cool-spotify-blend">&#128187</a></li>
</ul> </ul>
</span> <h3>
<h3 class="ff-serif fs-500 padding-low-top"> Static Generated
Static Generated (sometimes)
</h3> </h3>
<span class="ff-sans fs-300 span-full-width">
<ul> <ul>
<li><a href="recipes">Recipes</a> <li><a href="recipes">Recipes</a></li>
<ul>
I so desperately need to update this section.
None of these are up-to-date.
</ul> </ul>
</li>
<li><a href="/pictures">Pictures</a>
<ul>
Password protected for your non-enjoyment.
intentionally bizarre pictures blasted onto your screen
by way of a terrible python pipeline.
</ul>
</li>
<li><a href="books">Books</a>
<ul>
proof of basic literacy
</ul>
</li>
</ul>
</span>
</div> </div>
<a href="../"> <a href="../">
</a> </a>
@ -72,5 +47,4 @@
<p><a href="../">Return</a></p> <p><a href="../">Return</a></p>
</footer> </footer>
</body> </body>
</html> </html>

BIN
src/fonts/Playfair.ttf
View File

Binary file not shown.

BIN
src/fonts/PlayfairItalic.ttf
View File

Binary file not shown.

BIN
src/fonts/Shantell.ttf
View File

Binary file not shown.

BIN
src/fonts/ShantellItalic.ttf
View File

Binary file not shown.

30
src/index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Emilia Allison</title> <title>Emilia Allison</title>
<link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/index.css">
@ -13,43 +14,46 @@
<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? 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 --> <!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:card" content="summary_large_image" />
</head> </head>
<body class="vsc-initialized"> <body class="vsc-initialized">
<div id="overlay"></div> <div id="overlay"></div>
<main class="offset-grid--top fullsize"> <main class="fullsize offset-grid--left--narrow">
<div> <div>
<h1 class="text-dark ff-mono fs-800 gap-large-bottom"> <div class="main_grid">
Em<span class="waltuh-gradient-underline">ilia</span>. <h1 class="text-dark ff-serif fs-800 gap-large-bottom sideways-text">
Em<span class="new-style-gradient-sideline--right">ilia</span>
</h1> </h1>
<div class="ff-sans fs-400"> <div>
<p>allegedly an engineer???</p> <p>mathematics enjoyer</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 class="fs-100 padding-mid-top">bottom text (now with extra spice&trade;)</p> <p>bottom text (now with extra spice&trade;)</p>
</div> </div>
</div> </div>
<footer class="lock-bottom flex row"> </div>
<footer class="lock-right flex column">
<a title="about" href="about"> <a title="about" href="about">
&#128196 &#128196
</a> </a>
<a id="moonlink" title="cool stuff" href="cool-stuff"> <a id="moonlink" title="cool stuff" href="cool-stuff">
&#127772 &#127772
</a> </a>
<a title="git provider" href="https://git.ilia.moe/explore/repos"> <a title="git provider" href="https://github.com/em-ilia">
&#128187 &#128187
</a> </a>
<a title="i love email" href="mailto:em@ilia.moe"> <a title="i love email" href="mailto:em@ilia.moe">
&#128224 &#128224
</a> </a>
<a id="camera" title="picture" href="pictures">
&#128247
</a>
</footer> </footer>
</main> </main>
</html> </html>

5
src/js/index.js
View File

@ -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 = "&#127771"} moon.onmouseover = function() {moon.innerHTML = "&#127771"}
moon.onmouseout = function() {moon.innerHTML = "&#127772"} moon.onmouseout = function() {moon.innerHTML = "&#127772"}
const camera = document.getElementById('camera');
camera.onmouseover = function() {camera.innerHTML = "&#128248"}
camera.onmouseout = function() {camera.innerHTML = "&#128247"}

2
src/scss/about.scss
View File

@ -1,4 +1,4 @@
@use "waltuh/waltuh"; @use "new-style/new-style";
h1 { h1 {
margin-top: 3vh; margin-top: 3vh;

26
src/scss/books.scss
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;
}

20
src/scss/index.scss
View File

@ -1,5 +1,5 @@
@use "waltuh/waltuh"; @use "new-style/new-style";
@use "waltuh/variables" as *; @use "new-style/variables" as *;
#pgp_a { #pgp_a {
position: fixed; position: fixed;
@ -9,8 +9,22 @@
margin-top: 0.6rem; 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 { footer {
width: 100%;
font-size: clamp(2rem, $fs-800, 15vw); font-size: clamp(2rem, $fs-800, 15vw);
justify-content: center !important; justify-content: center !important;
} }

33
src/scss/new-style/_variables.scss Normal file
View File

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

57
src/scss/waltuh/base.scss → src/scss/new-style/base.scss
View File

@ -16,8 +16,8 @@
/* colors */ /* colors */
$color-dark: hsl(0 0% 0%) !default; /* Black */ $color-dark: hsl(0 0% 0%) !default; /* Black */
$color-light: hsl(0 0% 50%) !default; /* Gray */ $color-fg: hsl(0 0% 50%) !default; /* Gray */
$color-white: hsl(0 0% 100%) !default;/* White */ $color-bg: hsl(0 0% 100%) !default;/* White */
/* font */ /* font */
@ -30,12 +30,10 @@ $fs-500: math.div(28rem, 16) !default;
$fs-400: math.div(24rem, 16) !default; $fs-400: math.div(24rem, 16) !default;
$fs-300: math.div(18rem, 16) !default; $fs-300: math.div(18rem, 16) !default;
$fs-200: math.div(16rem, 16) !default; $fs-200: math.div(16rem, 16) !default;
$fs-100: math.div(12rem, 16) !default;
$ff-serif: serif !default; $ff-serif: serif !default;
$ff-sans-cond: sans-serif !default; $ff-sans-cond: sans-serif !default;
$ff-sans: sans-serif !default; $ff-sans: sans-serif !default;
$ff-mono: monospace !default;
/* --------------- */ /* --------------- */
/* Utility Classes */ /* Utility Classes */
@ -59,12 +57,6 @@ $ff-mono: monospace !default;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
align-content: center; align-content: center;
max-width: 800px;
}
.column-tight {
@extend .column;
gap: 0rem;
} }
.row { .row {
@ -90,8 +82,20 @@ $ff-mono: monospace !default;
bottom: 0%; bottom: 0%;
} }
.span-full-width { .lock-right {
width: 100%; position: fixed;
right: 0%;
}
.lock-top {
position: fixed;
top: 0%;
}
.sideways-text {
writing-mode: vertical-rl;
text-orientation: upright;
letter-spacing: -1.0rem;
} }
/* Other */ /* Other */
@ -111,12 +115,12 @@ $ff-mono: monospace !default;
/* Color Classes */ /* Color Classes */
.bg-dark { background-color: $color-dark; } .bg-dark { background-color: $color-dark; }
.bg-light { background-color: $color-light; } .bg-light { background-color: $color-fg; }
.bg-white { background-color: $color-white; } .bg-white { background-color: $color-bg; }
.text-dark { color: $color-dark; } .text-dark { color: $color-dark; }
.text-light { color: $color-light; } .text-light { color: $color-fg; }
.text-white { color: $color-white; } .text-white { color: $color-bg; }
/* Font Classes */ /* Font Classes */
@ -128,30 +132,14 @@ $ff-mono: monospace !default;
.fs-400 { font-size: $fs-400; } .fs-400 { font-size: $fs-400; }
.fs-300 { font-size: $fs-300; } .fs-300 { font-size: $fs-300; }
.fs-200 { font-size: $fs-200; } .fs-200 { font-size: $fs-200; }
.fs-100 { font-size: $fs-100; }
.ff-serif { font-family: $ff-serif; } .ff-serif { font-family: $ff-serif; }
.ff-sans-cond { font-family: $ff-sans-cond; } .ff-sans-cond { font-family: $ff-sans-cond; }
.ff-sans { font-family: $ff-sans; } .ff-sans { font-family: $ff-sans; }
.ff-mono { font-family: $ff-mono; }
.uppercase { text-transform: uppercase; } .uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; } .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 */ /* Semantic Tags and Their Classes */
header { header {
@ -163,7 +151,8 @@ section:not(:last-of-type) {
} }
footer { footer {
margin-top: 3vh; height: 100%;
margin-right: 3vw;
} }
/* ----- */ /* ----- */
@ -192,7 +181,7 @@ body {
font-family: $ff-sans; font-family: $ff-sans;
font-size: $fs-400; font-size: $fs-400;
color: $color-dark; color: $color-dark;
background-color: $color-white; background-color: $color-bg;
line-height: 1.5; line-height: 1.5;
min-height: 100vh; min-height: 100vh;
} }

21
src/scss/waltuh/components/_book_entry.scss → src/scss/new-style/components/_book_entry.scss
View File

@ -5,7 +5,6 @@
.book-entry { .book-entry {
width: 100%; width: 100%;
position: relative; position: relative;
margin-bottom: 1vh !important;
&:last-of-type { &:last-of-type {
margin-bottom: 5vh; margin-bottom: 5vh;
} }
@ -16,38 +15,23 @@
} }
div { div {
display: grid; display: grid;
grid-template-columns: 1fr 0.5fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: max-content 1fr; grid-template-rows: max-content 1fr;
grid-template-areas: grid-template-areas:
"author year score" "author year score"
"comments comments comments"; "comments comments comments"
padding: 2%;
padding-top: 0px;
}
&[open] {
border: 2px solid;
border-top: none;
} }
} }
} }
.book-entry__author { .book-entry__author {
grid-area: author; grid-area: author;
justify-self: end;
font-family: "Inconsolata", monospace;
} }
.book-entry__year { .book-entry__year {
grid-area: year; grid-area: year;
justify-self: center;
font-family: "Inconsolata", monospace;
} }
.book-entry__score { .book-entry__score {
grid-area: score; grid-area: score;
justify-self: start;
font-family: "Inconsolata", monospace;
&:before { &:before {
content: "Score: "; content: "Score: ";
} }
@ -57,5 +41,4 @@
} }
.book-entry__comments { .book-entry__comments {
grid-area: comments; grid-area: comments;
padding-top: 0.5rem;
} }

1
src/scss/waltuh/components/_index.scss → src/scss/new-style/components/_index.scss
View File

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

84
src/scss/new-style/components/_marks.scss Normal file
View File

@ -0,0 +1,84 @@
@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
src/scss/waltuh/components/_overlay.scss → src/scss/new-style/components/_overlay.scss
View File

5
src/scss/waltuh/layouts/_grid.scss → src/scss/new-style/layouts/_grid.scss
View File

@ -42,8 +42,6 @@
} }
// Grid Offset Hell // 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; $offset-amt: 0.33fr;
@each $dir in [top, bottom, left, right] { @each $dir in [top, bottom, left, right] {
$dir_adj: ""; $dir_adj: "";
@ -78,9 +76,6 @@ $offset-amt: 0.33fr;
@extend .offset-grid#{$dir_adj}#{$size_adj}; @extend .offset-grid#{$dir_adj}#{$size_adj};
div { div {
grid-area: n / s; grid-area: n / s;
* {
max-width: 800px;
}
} }
} }
} }

0
src/scss/waltuh/layouts/_index.scss → src/scss/new-style/layouts/_index.scss
View File

0
src/scss/waltuh/layouts/_modifiers.scss → src/scss/new-style/layouts/_modifiers.scss
View File

0
src/scss/waltuh/waltuh.scss → src/scss/new-style/new-style.scss
View File

55
src/scss/pictures.scss
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;
}
}
}

52
src/scss/waltuh/_variables.scss
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;
}

0
src/scss/waltuh/components/_header.scss
View File

70
src/scss/waltuh/components/_marks.scss
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;
}
}