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

Update books styling

This commit is contained in:
Emilia Allison 2024-11-09 13:40:48 -06:00
parent 4f94881acc
commit fcb3b42bc7
Signed by: emilia
GPG Key ID: 05D5D1107E5100A1
3 changed files with 71 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
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,7 +13,7 @@
<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 will Goodreads
@ -21,7 +21,7 @@
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,25 @@
<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"> <section class="book-entry">
<details> <details>
<summary><h2> Cowboy, Cross My Heart </h2></summary> <summary><h2> Cowboy, Cross My Heart </h2></summary>
@ -93,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.
@ -108,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
@ -144,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,
@ -167,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

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

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