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

Compare commits

merge into: 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
...
pull from: 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

29 Commits
new-style ... master

Author SHA1 Message Date
Emilia Allison 8e8f8d830c
typo :( 2024-11-09 14:06:42 -06:00
Emilia Allison 720f49587b
Add books page back to cool-stuff 2024-11-09 13:42:43 -06:00
Emilia Allison fcb3b42bc7
Update books styling 2024-11-09 13:40:48 -06:00
Emilia Allison 4f94881acc
bigly styling update 2024-11-09 12:51:32 -06:00
Emilia Allison 64226497d8
New font 2024-11-09 12:42:41 -05:00
Emilia Allison 6da3ea4df4
Spring Cleaning 
girl it's 30 october what
 2024-10-30 22:48:02 -04:00
Emilia Allison e4b24647c1
hotfix: missing semicolon >:( 2024-10-28 00:28:17 -04:00
Emilia Allison 4ba630ecc8
hotfix: gallery margin 2024-10-27 23:14:10 -04:00
Emilia Allison 18f6ff6196
Change plate-tool link to beta 2024-08-11 14:00:56 -04:00
Emilia Allison 4047a3c8ab
change spacing 2024-05-04 12:59:42 -04:00
Emilia Allison fbd4c91b9b
fix column layout 2024-05-04 12:52:21 -04:00
Emilia Allison 6dbe14b0b2
Revert "this one needs fixed too smh" 
this commit was not good actually
This reverts commit ed00f2bdfe.
 2024-05-04 12:48:42 -04:00
Emilia Allison ed00f2bdfe
this one needs fixed too smh 2024-05-04 12:47:33 -04:00
Emilia Allison e2b60db31d
improve git link 2024-05-04 12:45:34 -04:00
Emilia Allison e9aa55a520
this has bothered me for so long 2024-05-04 12:43:15 -04:00
Emilia Allison f54de47a25
update cool stuff 
formatted it too :)
 2024-02-04 12:20:09 -05:00
Emilia Allison 7110401183
Content updates 2024-01-30 21:15:04 -05:00
Emilia Allison d9b7f73b19
me when i have a job 2024-01-12 21:04:05 -05:00
Emilia Allison a2a7268ded
fix about.html layout 
idk when this regressed, but it's back to the "nice" column layout
 2024-01-12 20:42:12 -05:00
Emilia Allison 8e0e18ac84
;) 2024-01-12 20:37:26 -05:00
Emilia Allison a50eeeaf79
Move image-fill.py to different repo 2023-12-07 20:38:46 -05:00
Emilia Allison 0fda2bc258
Move pictures to different repo 2023-12-07 20:32:23 -05:00
Emilia Allison d7bfb4a231
Fix for image-fill 2023-11-22 01:45:51 -05:00
Emilia Allison 1e8c7c74e5
Add convenience scripts for pictures 2023-11-22 00:10:44 -05:00
Emilia Allison 3dbac61e65
Sort images 2023-11-22 00:10:17 -05:00
Emilia Allison 8bb2fc1542
Ignore pictures directory 2023-11-22 00:00:22 -05:00
Emilia Allison 170c0f3080
Automation for image files in html 2023-11-21 23:44:01 -05:00
Emilia Allison acb6e4b9a9
Template pictures file 2023-11-21 23:15:33 -05:00
Emilia Allison 21855241fd
Pictures page base 2023-11-21 22:38:26 -05:00
18 changed files with 309 additions and 82 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,4 +1,5 @@
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 python -m http.server -b 127.0.0.1
dev: dev:
make -j 2 css-watch server make -j 2 css-watch server

31
src/about.html
View File

@ -9,22 +9,24 @@
<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> <div class="flex column-tight">
<h1> <h1 class="ff-serif fs-700 padding-high-top">
About About
</h1> </h1>
<h2>isn't that the page title?</h2> <h3 class="ff-serif fs-500 padding-none-top">there used to be a subtitle here</h3>
<p> <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>. 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>
<p> <p class="ff-sans fs-300 padding-mid-top">
I just completed a degree in mathematics at Penn State. I work for a pretty neat company as an associate robotic automation engineer.
(this means I am cool, I think.)
</p> </p>
</div> </div>
<div> <div class="flex column-tight">
<h1>Opinions</h1> <h1 class="ff-serif fs-700 padding-high-top">Opinions</h1>
<h2>A 100% exhaustive list, of course</h2> <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> <ul>
<li> <li>
the modern internet is bloated the modern internet is bloated
@ -33,16 +35,13 @@ the modern internet is bloated
</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/about.css"> <link rel="stylesheet" href="/css/books.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>primarily those that I've read</h3> <h3 class="padding-none-top padding-low-bottom">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 will Goodreads This page exists because I am generally dissatisfied with 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> <h1 class="padding-mid-top">
the books the books
</h1> </h1>
@ -46,6 +46,45 @@
<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>
@ -73,7 +112,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 far more philosophical than Dune. Messiah is 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.
@ -88,7 +127,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"> 7.5 </p> <p class="book-entry__score"> 6 </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
@ -124,7 +163,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"> 6.5 </p> <p class="book-entry__score"> 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,
@ -147,7 +186,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"> 7 </p> <p class="book-entry__score"> 5 </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
@ -183,6 +222,10 @@
<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,43 +1,68 @@
<!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> <h1 class="ff-serif fs-700 gap-small-bottom">
Cool Stuff Cool Stuff
</h1> </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> <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>
<h1> </span>
<h1 class="gap-small-bottom ff-serif fs-700">
the stuff the stuff
</h1> </h1>
<h3> <h3 class="ff-serif fs-500">
Artisan Handcrafted Artisan Handcrafted
</h3> </h3>
<span class="ff-sans fs-300 span-full-width">
<ul> <ul>
<li><a href="css-purgatory">css purgatory</a></li> <li><a href="plate-tool-beta">Plate tool</a>
<li><a href="plate-tool">Plate tool</a> &#x2615 <a href="https://git.ilia.moe/emilia/plate-tool">&#x2615;&#128187;
<a href="https://git.ilia.moe/emilia/plate-tool">&#128187</a></li> &#x1f935;&#x200d;&#x2640;&#xfe0f;</a>
<li><a href="cool-spotify-blend">Cool spotify blend</a> &#x2615 </li>
<a href="https://git.ilia.moe/emilia/cool-spotify-blend">&#128187</a></li>
</ul> </ul>
<h3> </span>
Static Generated <h3 class="ff-serif fs-500 padding-low-top">
Static Generated (sometimes)
</h3> </h3>
<span class="ff-sans fs-300 span-full-width">
<ul> <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> </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>
@ -47,4 +72,5 @@ When relevant, a link to a Git repo will be provided (&#128187).
<p><a href="../">Return</a></p> <p><a href="../">Return</a></p>
</footer> </footer>
</body> </body>
</html> </html>

BIN
src/fonts/Playfair.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/PlayfairItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/Shantell.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/ShantellItalic.ttf Normal file
View File

Binary file not shown.

13
src/index.html
View File

@ -21,16 +21,18 @@
<div id="overlay"></div> <div id="overlay"></div>
<main class="offset-grid--top fullsize"> <main class="offset-grid--top fullsize">
<div> <div>
<h1 class="text-dark ff-serif fs-800 gap-large-bottom"> <h1 class="text-dark ff-mono fs-800 gap-large-bottom">
Em<span class="waltuh-gradient-underline">ilia</span>. Em<span class="waltuh-gradient-underline">ilia</span>.
</h1> </h1>
<p>mathematics enjoyer</p> <div class="ff-sans fs-400">
<p>allegedly an engineer???</p>
<p id="pgp_p">pgp: <p id="pgp_p">pgp:
<a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a" class="fixed"> <a href="https://keyserver.ubuntu.com/pks/lookup?search=0x8cbc050e7bbb8779eccd42074b33e52e3bd25455&fingerprint=on&op=index" id="pgp_a" class="fixed">
8CBC 050E 7BBB 8779 ECCD 4207 4B33 E52E 3BD2 5455 8CBC 050E 7BBB 8779 ECCD 4207 4B33 E52E 3BD2 5455
</a> </a>
</p> </p>
<p>bottom text (now with extra spice&trade;)</p> <p class="fs-100 padding-mid-top">bottom text (now with extra spice&trade;)</p>
</div>
</div> </div>
<footer class="lock-bottom flex row"> <footer class="lock-bottom flex row">
<a title="about" href="about"> <a title="about" href="about">
@ -39,12 +41,15 @@
<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://github.com/em-ilia"> <a title="git provider" href="https://git.ilia.moe/explore/repos">
&#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,6 +12,9 @@ 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 @@
@import "waltuh/waltuh"; @use "waltuh/waltuh";
h1 { h1 {
margin-top: 3vh; margin-top: 3vh;

26
src/scss/books.scss Normal file
View File

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

55
src/scss/pictures.scss Normal file
View File

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

21
src/scss/waltuh/_variables.scss
View File

@ -4,7 +4,8 @@
$-color-white: hsl(280 30% 80%); $-color-white: hsl(280 30% 80%);
$-color-dark: color.adjust($-color-white, $lightness: -50%); $-color-dark: color.adjust($-color-white, $lightness: -50%);
$-color-light: hsl(190 80% 30%); $-color-light: hsl(190 80% 30%);
$-ff-serif: "Inconsolata", monospace; $-ff-mono: "Inconsolata", monospace;
$-ff-serif: "Playfair", serif;
$-ff-sans: "Jost", sans-serif; $-ff-sans: "Jost", sans-serif;
$-fs-900: math.div(100rem, 16); $-fs-900: math.div(100rem, 16);
@ -14,6 +15,7 @@ $-fs-900: math.div(100rem, 16);
$color-light: $-color-light, $color-light: $-color-light,
$ff-serif: $-ff-serif, $ff-serif: $-ff-serif,
$ff-sans: $-ff-sans, $ff-sans: $-ff-sans,
$ff-mono: $-ff-mono,
$fs-900: $-fs-900 $fs-900: $-fs-900
); );
@ -30,4 +32,21 @@ $-fs-900: math.div(100rem, 16);
src: url("/fonts/Jost.ttf"); src: url("/fonts/Jost.ttf");
font-display: swap; 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;
} }

28
src/scss/waltuh/base.scss
View File

@ -30,10 +30,12 @@ $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 */
@ -57,6 +59,12 @@ $ff-sans: sans-serif !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 {
@ -82,6 +90,10 @@ $ff-sans: sans-serif !default;
bottom: 0%; bottom: 0%;
} }
.span-full-width {
width: 100%;
}
/* Other */ /* Other */
.hr::after { /* Add fake hr after header */ .hr::after { /* Add fake hr after header */
@ -116,14 +128,30 @@ $ff-sans: sans-serif !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 {

21
src/scss/waltuh/components/_book_entry.scss
View File

@ -5,6 +5,7 @@
.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;
} }
@ -15,23 +16,38 @@
} }
div { div {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 0.5fr 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: ";
} }
@ -41,4 +57,5 @@
} }
.book-entry__comments { .book-entry__comments {
grid-area: comments; grid-area: comments;
padding-top: 0.5rem;
} }

7
src/scss/waltuh/layouts/_grid.scss
View File

@ -22,7 +22,7 @@
height: 100vh; height: 100vh;
width: 100%; width: 100%;
div { &>div {
justify-self: center; justify-self: center;
grid-area: center; grid-area: center;
@ -42,6 +42,8 @@
} }
// 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: "";
@ -76,6 +78,9 @@ $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;
}
} }
} }
} }