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>
<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,7 +13,7 @@
<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
@ -21,7 +21,7 @@
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,25 @@
<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>
@ -93,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.
@ -108,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
@ -144,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,
@ -167,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

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