diff options
Diffstat (limited to 'bookshelf.html')
| -rw-r--r-- | bookshelf.html | 419 |
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> |