summaryrefslogtreecommitdiff
path: root/bookshelf.html
diff options
context:
space:
mode:
authorJJ2024-07-25 19:30:39 +0000
committerJJ2024-07-25 19:30:39 +0000
commitab8ef130ba0d0b3920eaeadaa9e3a22ab81ea23f (patch)
tree21fa5c3ddb81c331bc90c6d6dcad27ff05b8370e /bookshelf.html
parentba4cf28d24a29b8eb191f6481e52a68d0a443d2a (diff)
update various assorted webpages for hakyll
Diffstat (limited to 'bookshelf.html')
-rw-r--r--bookshelf.html419
1 files changed, 237 insertions, 182 deletions
diff --git a/bookshelf.html b/bookshelf.html
index ad47a45..35f5850 100644
--- a/bookshelf.html
+++ b/bookshelf.html
@@ -1,185 +1,240 @@
---
-layout: default
+layout: main
title: bookshelf
---
- <link rel="stylesheet" href="css/bookshelf.css"/>
- {% include header.html %}
- <main>
- <h2>Classics</h2>
- <div class="shelf" id="classics">
- <div>
- <img src="assets/books/the-picture-of-dorian-gray.jpg" class="cover"/>
- <h3>The Picture of Dorian Gray</h3>
- <i>Oscar Wilde</i>
- </div>
- <div>
- <img src="assets/books/the-secret-history.jpg" class="cover"/>
- <h3>The Secret History</h3>
- <i>Donna Tartt</i>
- </div>
- </div>
- <hr>
- <h2>Dystopian</h2>
- <div class="shelf" id="dystopia">
- <div>
- <img src="assets/books/the-giver.jpg" class="cover"/>
- <h3>The Giver</h3>
- <i>Lois Lowry</i>
- </div>
- <div>
- <img src="assets/books/fahrenheit-451.jpg" class="cover"/>
- <h3>Fahrenheit 451</h3>
- <i>Ray Bradbury</i>
- </div>
- <!-- <div>
- <img src="assets/books/nineteen-eighty-four.jpeg" class="cover"/>
- <h3>Nineteen Eighty-Four</h3>
- <i>George Orwell</i>
- </div> -->
- <div>
- <img src="assets/books/the-handmaids-tale.jpg" class="cover"/>
- <h3>The Handmaid's Tale</h3>
- <i>Margaret Atwood</i>
- </div>
- </div>
- <hr>
- <h2>Philosophy</h2>
- <div class="shelf" id="philosophy">
- <div>
- <img src="assets/books/ishmael.jpg" class="cover"/>
- <h3>Ishmael</h3>
- <i>Daniel Quinn</i>
- </div>
- <div>
- <img src="assets/books/notes-from-the-underground.jpg" class="cover"/>
- <h3>Notes from the Underground</h3>
- <i>Fyodor Dostoevsky</i>
- </div>
- <div>
- <img src="assets/books/slaughterhouse-five.jpg" class="cover"/>
- <h3>Slaughterhouse-Five</h3>
- <i>Kurt Vonnegut</i>
- </div>
- <div>
- <img src="assets/books/siddhartha.jpg" class="cover"/>
- <h3>Siddhartha</h3>
- <i>Hermann Hesse</i>
- </div>
- <div>
- <img src="assets/books/catch-22.jpg" class="cover"/>
- <h3>Catch-22</h3>
- <i>Joseph Heller</i>
- </div>
- </div>
- <hr>
- <h2>Fantasy</h2>
- <div class="shelf" id="fantasy">
- <div>
- <img src="assets/books/narnia.jpg" class="cover"/>
- <h3>Narnia</h3>
- <i>C.S. Lewis</i>
- </div>
- <div>
- <img src="assets/books/harry-potter.jpg" class="cover"/>
- <h3>Harry Potter</h3>
- <i>J.K. Rowling</i>
- </div>
- <div>
- <img src="assets/books/the-lord-of-the-rings.jpg" class="cover"/>
- <h3>The Lord of the Rings</h3>
- <i>J.R.R. Tolkien</i>
- </div>
- </div>
- <hr>
- <h2>Short Stories</h2>
- <div class="shelf" id="short-stories">
- <div>
- <img src="assets/books/the-library-of-babel.png" class="icon"/>
- <h3>The Library of Babel</h3>
- <i>Jorge Luis Borges</i>
- </div>
- <div>
- <img src="assets/books/the-lottery.png" class="icon"/>
- <h3>The Lottery</h3>
- <i>Shirley Jackson</i>
- </div>
- <div>
- <img src="assets/books/harrison-bergeron.jpg" style="width: 80px;" class="icon"/>
- <h3>Harrison Bergeron</h3>
- <i>Kurt Vonnegut</i>
- </div>
- </div>
- <hr>
- <h2>Comics</h2>
- <div class="shelf" id="comics">
- <div>
- <img src="assets/comics/calvin-and-hobbes.jpg" class="cover"/>
- <h3>Calvin and Hobbes</h3>
- <i>Bill Watterson</i>
- </div>
- <div>
- <img src="assets/books/bone.jpg" class="cover"/>
- <h3>BONE</h3>
- <i>Jeff Smith</i>
- </div>
- <div>
- <img src="assets/comics/copper.jpg" class="cover"/>
- <h3><a href="https://www.boltcityproductions.com/copper/">Copper</a></h3>
- <i>Kazu Kibuishi</i>
- </div>
- <div>
- <img src="assets/comics/hark.png" class="cover"/>
- <h3><a href="http://www.harkavagrant.com/">Hark! a Vagrant</a></h3>
- <i>Kate Beaton</i>
- </div>
- <div>
- <img src="assets/comics/homestuck.svg" class="icon"/>
- <h3><a href="https://homestuck.com">Homestuck</a></h3>
- <i>Andrew Hussie</i>
- </div>
- <div>
- <img src="assets/comics/avasdemon.jpg" class="cover"/>
- <h3><a href="https://www.avasdemon.com/">Ava's Demon</a></h3>
- <i>Michelle Czajkowski</i>
- </div>
- <div>
- <img src="assets/comics/a-softer-world.png" class="icon"/>
- <h3><a href="https://www.asofterworld.com/">a softer world</a></h3>
- <i>Emily Horne and Joey Comeau</i>
- </div>
- <div>
- <img src="assets/comics/xkcd.png" class="icon"/>
- <h3><a href="https://xkcd.com/">xkcd</a></h3>
- <i>Randall Munroe</i>
- </div>
- </div>
- <hr>
- <h2>Media</h2>
- <div class="shelf" id="media">
- <div>
- <img src="assets/posters/2001-a-space-odyssey.jpg" class="poster"/>
- <p><h3>2001: A Space Odyssey</h3></p>
- </div>
- <div>
- <img src="assets/posters/blade-runner.jpg" class="poster"/>
- <p><h3>Blade Runner</h3></p>
- </div>
- <div>
- <img src="assets/posters/dr-strangelove.jpg" class="poster"/>
- <p><h3>Dr. Strangelove</h3></p>
- </div>
- <div>
- <img src="assets/posters/avatar-the-last-airbender.jpg" class="poster"/>
- <p><h3>Avatar: The Last Airbender</h3></p>
- </div>
- <div>
- <img src="assets/posters/coraline.jpg" class="poster"/>
- <p><h3>Coraline</h3></p>
- </div>
- <div>
- <img src="assets/posters/my-neighbor-totoro.jpg" class="poster"/>
- <p><h3>My Neighbor Totoro</h3></p>
- </div>
- </div>
- <hr>
- </main>
+<style>
+a {
+ color: inherit;
+}
+
+h2 {
+ margin-bottom: 4px;
+}
+
+hr {
+ background: black;
+ height: 6px;
+ margin-bottom: 20px;
+}
+
+.cover, .poster, .icon {
+ max-height: 250px;
+ /* max-width: 165px; */
+ max-width: 200px;
+ border-radius: 10px;
+}
+
+.cover {
+ border: 2px solid black;
+ box-shadow: 8px 8px grey;
+}
+
+.icon {
+ filter: drop-shadow(0px 0px 2px black);
+}
+
+.shelf {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ text-align: center;
+ align-items: flex-end;
+ flex-wrap: wrap;
+}
+
+.shelf div {
+ margin-right: 1em;
+ margin-top: 20px;
+}
+
+.shelf h3 {
+ margin-bottom: 0px;
+}
+
+@media screen and (max-width: 700px) {
+ h2 {
+ text-align: center;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ /* invert library of babel icon */
+}
+</style>
+<h2>Classics</h2>
+<div class="shelf" id="classics">
+ <div>
+ <img src="/files/covers/books/the-picture-of-dorian-gray.jpg" class="cover"/>
+ <h3>The Picture of Dorian Gray</h3>
+ <i>Oscar Wilde</i>
+ </div>
+ <div>
+ <img src="/files/covers/books/the-secret-history.jpg" class="cover"/>
+ <h3>The Secret History</h3>
+ <i>Donna Tartt</i>
+ </div>
+</div>
+<hr>
+<h2>Dystopian</h2>
+<div class="shelf" id="dystopia">
+ <div>
+ <img src="/files/covers/books/the-giver.jpg" class="cover"/>
+ <h3>The Giver</h3>
+ <i>Lois Lowry</i>
+ </div>
+ <div>
+ <img src="/files/covers/books/fahrenheit-451.jpg" class="cover"/>
+ <h3>Fahrenheit 451</h3>
+ <i>Ray Bradbury</i>
+ </div>
+ <!-- <div>
+ <img src="/files/covers/books/nineteen-eighty-four.jpeg" class="cover"/>
+ <h3>Nineteen Eighty-Four</h3>
+ <i>George Orwell</i>
+ </div> -->
+ <div>
+ <img src="/files/covers/books/the-handmaids-tale.jpg" class="cover"/>
+ <h3>The Handmaid's Tale</h3>
+ <i>Margaret Atwood</i>
+ </div>
+</div>
+<hr>
+<h2>Philosophy</h2>
+<div class="shelf" id="philosophy">
+ <div>
+ <img src="/files/covers/books/ishmael.jpg" class="cover"/>
+ <h3>Ishmael</h3>
+ <i>Daniel Quinn</i>
+ </div>
+ <div>
+ <img src="/files/covers/books/notes-from-the-underground.jpg" class="cover"/>
+ <h3>Notes from the Underground</h3>
+ <i>Fyodor Dostoevsky</i>
+ </div>
+ <div>
+ <img src="/files/covers/books/slaughterhouse-five.jpg" class="cover"/>
+ <h3>Slaughterhouse-Five</h3>
+ <i>Kurt Vonnegut</i>
+ </div>
+ <div>
+ <img src="/files/covers/books/siddhartha.jpg" class="cover"/>
+ <h3>Siddhartha</h3>
+ <i>Hermann Hesse</i>
+ </div>
+ <div>
+ <img src="/files/covers/books/catch-22.jpg" class="cover"/>
+ <h3>Catch-22</h3>
+ <i>Joseph Heller</i>
+ </div>
+</div>
+<hr>
+<h2>Fantasy</h2>
+<div class="shelf" id="fantasy">
+ <div>
+ <img src="/files/covers/books/narnia.jpg" class="cover"/>
+ <h3>Narnia</h3>
+ <i>C.S. Lewis</i>
+ </div>
+ <div>
+ <img src="/files/covers/books/harry-potter.jpg" class="cover"/>
+ <h3>Harry Potter</h3>
+ <i>J.K. Rowling</i>
+ </div>
+ <div>
+ <img src="/files/covers/books/the-lord-of-the-rings.jpg" class="cover"/>
+ <h3>The Lord of the Rings</h3>
+ <i>J.R.R. Tolkien</i>
+ </div>
+</div>
+<hr>
+<h2>Short Stories</h2>
+<div class="shelf" id="short-stories">
+ <div>
+ <img src="/files/covers/books/the-library-of-babel.png" class="icon"/>
+ <h3>The Library of Babel</h3>
+ <i>Jorge Luis Borges</i>
+ </div>
+ <div>
+ <img src="/files/covers/books/the-lottery.png" class="icon"/>
+ <h3>The Lottery</h3>
+ <i>Shirley Jackson</i>
+ </div>
+ <div>
+ <img src="/files/covers/books/harrison-bergeron.jpg" style="width: 80px;" class="icon"/>
+ <h3>Harrison Bergeron</h3>
+ <i>Kurt Vonnegut</i>
+ </div>
+</div>
+<hr>
+<h2>Comics</h2>
+<div class="shelf" id="comics">
+ <div>
+ <img src="/files/covers/comics/calvin-and-hobbes.jpg" class="cover"/>
+ <h3>Calvin and Hobbes</h3>
+ <i>Bill Watterson</i>
+ </div>
+ <div>
+ <img src="/files/covers/books/bone.jpg" class="cover"/>
+ <h3>BONE</h3>
+ <i>Jeff Smith</i>
+ </div>
+ <div>
+ <img src="/files/covers/comics/copper.jpg" class="cover"/>
+ <h3><a href="https://www.boltcityproductions.com/copper/">Copper</a></h3>
+ <i>Kazu Kibuishi</i>
+ </div>
+ <div>
+ <img src="/files/covers/comics/hark.png" class="cover"/>
+ <h3><a href="http://www.harkavagrant.com/">Hark! a Vagrant</a></h3>
+ <i>Kate Beaton</i>
+ </div>
+ <div>
+ <img src="/files/covers/comics/homestuck.svg" class="icon"/>
+ <h3><a href="https://homestuck.com">Homestuck</a></h3>
+ <i>Andrew Hussie</i>
+ </div>
+ <div>
+ <img src="/files/covers/comics/avasdemon.jpg" class="cover"/>
+ <h3><a href="https://www.avasdemon.com/">Ava's Demon</a></h3>
+ <i>Michelle Czajkowski</i>
+ </div>
+ <div>
+ <img src="/files/covers/comics/a-softer-world.png" class="icon"/>
+ <h3><a href="https://www.asofterworld.com/">a softer world</a></h3>
+ <i>Emily Horne and Joey Comeau</i>
+ </div>
+ <div>
+ <img src="/files/covers/comics/xkcd.png" class="icon"/>
+ <h3><a href="https://xkcd.com/">xkcd</a></h3>
+ <i>Randall Munroe</i>
+ </div>
+</div>
+<hr>
+<h2>Media</h2>
+<div class="shelf" id="media">
+ <div>
+ <img src="/files/posters/2001-a-space-odyssey.jpg" class="poster"/>
+ <p><h3>2001: A Space Odyssey</h3></p>
+ </div>
+ <div>
+ <img src="/files/posters/blade-runner.jpg" class="poster"/>
+ <p><h3>Blade Runner</h3></p>
+ </div>
+ <div>
+ <img src="/files/posters/dr-strangelove.jpg" class="poster"/>
+ <p><h3>Dr. Strangelove</h3></p>
+ </div>
+ <div>
+ <img src="/files/posters/avatar-the-last-airbender.jpg" class="poster"/>
+ <p><h3>Avatar: The Last Airbender</h3></p>
+ </div>
+ <div>
+ <img src="/files/posters/coraline.jpg" class="poster"/>
+ <p><h3>Coraline</h3></p>
+ </div>
+ <div>
+ <img src="/files/posters/my-neighbor-totoro.jpg" class="poster"/>
+ <p><h3>My Neighbor Totoro</h3></p>
+ </div>
+</div>
+<hr>