diff options
| -rw-r--r-- | assets/2001-a-space-odyssey.jpg | bin | 0 -> 103668 bytes | |||
| -rw-r--r-- | assets/a-softer-world.png | bin | 0 -> 36665 bytes | |||
| -rw-r--r-- | assets/avatar-the-last-airbender.jpg | bin | 0 -> 73482 bytes | |||
| -rw-r--r-- | assets/blade-runner.jpg | bin | 0 -> 87332 bytes | |||
| -rw-r--r-- | assets/bone.jpg | bin | 0 -> 96981 bytes | |||
| -rw-r--r-- | assets/calvin-and-hobbes.jpg | bin | 0 -> 92197 bytes | |||
| -rw-r--r-- | assets/dr-strangelove.jpg | bin | 0 -> 64438 bytes | |||
| -rw-r--r-- | assets/fahrenheit-451.jpg | bin | 0 -> 48537 bytes | |||
| -rw-r--r-- | assets/hark.png | bin | 0 -> 165918 bytes | |||
| -rw-r--r-- | assets/harrison-bergeron.jpg | bin | 0 -> 16182 bytes | |||
| -rw-r--r-- | assets/harry-potter.jpg | bin | 0 -> 76411 bytes | |||
| -rw-r--r-- | assets/homestuck.svg | 12 | ||||
| -rw-r--r-- | assets/ishmael.jpg | bin | 0 -> 64667 bytes | |||
| -rw-r--r-- | assets/my-neighbor-totoro.jpg | bin | 0 -> 82737 bytes | |||
| -rw-r--r-- | assets/narnia.jpg | bin | 0 -> 116354 bytes | |||
| -rw-r--r-- | assets/nineteen-eighty-four.jpeg | bin | 0 -> 38090 bytes | |||
| -rw-r--r-- | assets/notes-from-the-underground.jpg | bin | 0 -> 30384 bytes | |||
| -rw-r--r-- | assets/siddhartha.jpg | bin | 0 -> 80008 bytes | |||
| -rw-r--r-- | assets/slaughterhouse-five.jpg | bin | 0 -> 47780 bytes | |||
| -rw-r--r-- | assets/the-giver.jpg | bin | 0 -> 100392 bytes | |||
| -rw-r--r-- | assets/the-library-of-babel.png | bin | 0 -> 5269 bytes | |||
| -rw-r--r-- | assets/the-lord-of-the-rings.jpg | bin | 0 -> 106179 bytes | |||
| -rw-r--r-- | assets/the-lottery.png | bin | 0 -> 536 bytes | |||
| -rw-r--r-- | assets/the-picture-of-dorian-gray.jpg | bin | 0 -> 84915 bytes | |||
| -rw-r--r-- | assets/the-secret-history.jpg | bin | 0 -> 29624 bytes | |||
| -rw-r--r-- | assets/twilight.jpg | bin | 0 -> 32232 bytes | |||
| -rw-r--r-- | assets/xkcd.png | bin | 0 -> 7695 bytes | |||
| -rw-r--r-- | bookshelf.html | 169 | ||||
| -rw-r--r-- | css/bookshelf.css | 53 |
29 files changed, 232 insertions, 2 deletions
diff --git a/assets/2001-a-space-odyssey.jpg b/assets/2001-a-space-odyssey.jpg Binary files differnew file mode 100644 index 0000000..449ec09 --- /dev/null +++ b/assets/2001-a-space-odyssey.jpg diff --git a/assets/a-softer-world.png b/assets/a-softer-world.png Binary files differnew file mode 100644 index 0000000..83d917f --- /dev/null +++ b/assets/a-softer-world.png diff --git a/assets/avatar-the-last-airbender.jpg b/assets/avatar-the-last-airbender.jpg Binary files differnew file mode 100644 index 0000000..bbd05cc --- /dev/null +++ b/assets/avatar-the-last-airbender.jpg diff --git a/assets/blade-runner.jpg b/assets/blade-runner.jpg Binary files differnew file mode 100644 index 0000000..08a860f --- /dev/null +++ b/assets/blade-runner.jpg diff --git a/assets/bone.jpg b/assets/bone.jpg Binary files differnew file mode 100644 index 0000000..58d8c6f --- /dev/null +++ b/assets/bone.jpg diff --git a/assets/calvin-and-hobbes.jpg b/assets/calvin-and-hobbes.jpg Binary files differnew file mode 100644 index 0000000..0657fab --- /dev/null +++ b/assets/calvin-and-hobbes.jpg diff --git a/assets/dr-strangelove.jpg b/assets/dr-strangelove.jpg Binary files differnew file mode 100644 index 0000000..2d0373e --- /dev/null +++ b/assets/dr-strangelove.jpg diff --git a/assets/fahrenheit-451.jpg b/assets/fahrenheit-451.jpg Binary files differnew file mode 100644 index 0000000..7de2c61 --- /dev/null +++ b/assets/fahrenheit-451.jpg diff --git a/assets/hark.png b/assets/hark.png Binary files differnew file mode 100644 index 0000000..30525f2 --- /dev/null +++ b/assets/hark.png diff --git a/assets/harrison-bergeron.jpg b/assets/harrison-bergeron.jpg Binary files differnew file mode 100644 index 0000000..0367e4d --- /dev/null +++ b/assets/harrison-bergeron.jpg diff --git a/assets/harry-potter.jpg b/assets/harry-potter.jpg Binary files differnew file mode 100644 index 0000000..f89148a --- /dev/null +++ b/assets/harry-potter.jpg diff --git a/assets/homestuck.svg b/assets/homestuck.svg new file mode 100644 index 0000000..e257591 --- /dev/null +++ b/assets/homestuck.svg @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg width="220pt" height="233pt" viewBox="0 0 220 233" version="1.1" xmlns="http://www.w3.org/2000/svg"> +<g id="#4be14eff"> +<path fill="#4be14e" opacity="1.00" d=" M 106.10 7.03 C 139.87 24.39 173.84 41.38 207.52 58.90 C 174.38 59.12 141.22 58.95 108.07 58.99 C 108.02 60.66 107.98 62.34 107.93 64.01 C 73.45 63.93 38.96 64.13 4.48 63.91 C 17.85 56.67 31.55 50.06 44.99 42.95 C 45.02 32.64 44.98 22.32 45.01 12.01 C 57.34 11.99 69.67 11.99 81.99 12.01 C 81.99 15.67 82.00 19.32 82.01 22.98 C 89.99 19.32 98.02 15.75 105.93 11.96 C 105.99 10.32 106.03 8.68 106.10 7.03 Z"/> +<path fill="#4be14e" opacity="1.00" d=" M 115.01 65.01 C 139.00 64.99 163.00 64.99 186.99 65.01 C 187.01 89.00 187.01 113.00 186.99 136.99 C 175.33 137.01 163.67 137.01 152.01 136.99 C 151.98 124.66 152.02 112.34 151.99 100.01 C 139.66 99.98 127.34 100.02 115.01 99.99 C 114.99 88.33 114.99 76.67 115.01 65.01 Z"/> +<path fill="#4be14e" opacity="1.00" d=" M 29.01 69.01 C 53.00 68.99 77.00 68.99 100.99 69.01 C 101.01 93.00 101.01 117.00 100.99 140.99 C 77.00 141.01 53.00 141.01 29.01 140.99 C 28.99 117.00 28.99 93.00 29.01 69.01 Z"/> +<path fill="#4be14e" opacity="1.00" d=" M 109.01 107.01 C 121.00 106.99 133.00 106.99 144.99 107.01 C 145.01 119.00 145.01 131.00 144.99 142.99 C 133.00 143.01 121.00 143.01 109.01 142.99 C 108.99 131.00 108.99 119.00 109.01 107.01 Z"/> +<path fill="#4be14e" opacity="1.00" d=" M 29.01 151.01 C 53.00 150.99 77.00 150.99 100.99 151.01 C 101.01 175.00 101.01 199.00 100.99 222.99 C 77.00 223.01 53.00 223.01 29.01 222.99 C 28.99 199.00 28.99 175.00 29.01 151.01 Z"/> +<path fill="#4be14e" opacity="1.00" d=" M 111.01 151.01 C 135.00 150.99 159.00 150.99 182.99 151.01 C 183.01 175.00 183.01 199.00 182.99 222.99 C 159.00 223.01 135.00 223.01 111.01 222.99 C 110.99 199.00 110.99 175.00 111.01 151.01 Z"/> +</g> +</svg>
\ No newline at end of file diff --git a/assets/ishmael.jpg b/assets/ishmael.jpg Binary files differnew file mode 100644 index 0000000..4b10a38 --- /dev/null +++ b/assets/ishmael.jpg diff --git a/assets/my-neighbor-totoro.jpg b/assets/my-neighbor-totoro.jpg Binary files differnew file mode 100644 index 0000000..5db60b5 --- /dev/null +++ b/assets/my-neighbor-totoro.jpg diff --git a/assets/narnia.jpg b/assets/narnia.jpg Binary files differnew file mode 100644 index 0000000..faf84f2 --- /dev/null +++ b/assets/narnia.jpg diff --git a/assets/nineteen-eighty-four.jpeg b/assets/nineteen-eighty-four.jpeg Binary files differnew file mode 100644 index 0000000..04a1ad6 --- /dev/null +++ b/assets/nineteen-eighty-four.jpeg diff --git a/assets/notes-from-the-underground.jpg b/assets/notes-from-the-underground.jpg Binary files differnew file mode 100644 index 0000000..5f4c974 --- /dev/null +++ b/assets/notes-from-the-underground.jpg diff --git a/assets/siddhartha.jpg b/assets/siddhartha.jpg Binary files differnew file mode 100644 index 0000000..0963af4 --- /dev/null +++ b/assets/siddhartha.jpg diff --git a/assets/slaughterhouse-five.jpg b/assets/slaughterhouse-five.jpg Binary files differnew file mode 100644 index 0000000..f3fcdc4 --- /dev/null +++ b/assets/slaughterhouse-five.jpg diff --git a/assets/the-giver.jpg b/assets/the-giver.jpg Binary files differnew file mode 100644 index 0000000..be21020 --- /dev/null +++ b/assets/the-giver.jpg diff --git a/assets/the-library-of-babel.png b/assets/the-library-of-babel.png Binary files differnew file mode 100644 index 0000000..5ec5aaf --- /dev/null +++ b/assets/the-library-of-babel.png diff --git a/assets/the-lord-of-the-rings.jpg b/assets/the-lord-of-the-rings.jpg Binary files differnew file mode 100644 index 0000000..4593a31 --- /dev/null +++ b/assets/the-lord-of-the-rings.jpg diff --git a/assets/the-lottery.png b/assets/the-lottery.png Binary files differnew file mode 100644 index 0000000..d43ea95 --- /dev/null +++ b/assets/the-lottery.png diff --git a/assets/the-picture-of-dorian-gray.jpg b/assets/the-picture-of-dorian-gray.jpg Binary files differnew file mode 100644 index 0000000..6ea843a --- /dev/null +++ b/assets/the-picture-of-dorian-gray.jpg diff --git a/assets/the-secret-history.jpg b/assets/the-secret-history.jpg Binary files differnew file mode 100644 index 0000000..dd5cd5e --- /dev/null +++ b/assets/the-secret-history.jpg diff --git a/assets/twilight.jpg b/assets/twilight.jpg Binary files differnew file mode 100644 index 0000000..12d41d8 --- /dev/null +++ b/assets/twilight.jpg diff --git a/assets/xkcd.png b/assets/xkcd.png Binary files differnew file mode 100644 index 0000000..b2a5482 --- /dev/null +++ b/assets/xkcd.png diff --git a/bookshelf.html b/bookshelf.html index 491302e..aaba135 100644 --- a/bookshelf.html +++ b/bookshelf.html @@ -6,6 +6,7 @@ <link rel="icon" type="image/jpg" href="assets/compass.jpg"/> <link rel="stylesheet" href="css/normalize.css"/> <link rel="stylesheet" href="css/style.css"/> + <link rel="stylesheet" href="css/bookshelf.css"/> </head> <body> <header> @@ -19,7 +20,171 @@ <a href="https://j-james.me/bookshelf">bookshelf</a> </nav> </header> - <br> - <span>Under Construction</span> + <main> + <h2>Philosophy</h2> + <div class="shelf" id="philosophy"> + <div> + <img src="assets/ishmael.jpg" class="cover"/> + <h3>Ishmael</h3> + <i>Daniel Quinn</i> + </div> + <div> + <img src="assets/notes-from-the-underground.jpg" class="cover"/> + <h3>Notes from the Underground</h3> + <i>Fyodor Dostoevsky</i> + </div> + <div> + <img src="assets/slaughterhouse-five.jpg" class="cover"/> + <h3>Slaughterhouse-Five</h3> + <i>Kurt Vonnegut</i> + </div> + <!-- <div> + <img src="assets/siddhartha.jpg" class="cover"/> + <h3>Siddhartha</h3> + <i>Hermann Hesse</i> + </div> --> + </div> + <hr> + <!-- To Kill a Mockingbird, And Then There Were None--> + <h2>Romantic</h2> + <div class="shelf" id="academia"> + <!-- The Scarlet Letter, The Fault in Our Stars --> + <div> + <img src="assets/twilight.jpg" class="cover"/> + <h3>Twilight</h3> + <i>Stephenie Meyer</i> + </div> + <div> + <img src="assets/the-picture-of-dorian-gray.jpg" class="cover"/> + <h3>The Picture of Dorian Gray</h3> + <i>Oscar Wilde</i> + </div> + <div> + <img src="assets/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/the-giver.jpg" class="cover"/> + <h3>The Giver</h3> + <i>Lois Lowry</i> + </div> + <div> + <img src="assets/fahrenheit-451.jpg" class="cover"/> + <h3>Fahrenheit 451</h3> + <i>Ray Bradbury</i> + </div> + <div> + <img src="assets/nineteen-eighty-four.jpeg" class="cover"/> + <h3>Nineteen Eighty-Four</h3> + <i>George Orwell</i> + </div> + </div> + <hr> + <h2>Fantasy</h2> + <div class="shelf" id="fantasy"> + <div> + <img src="assets/narnia.jpg" class="cover"/> + <h3>Narnia</h3> + <i>C.S. Lewis</i> + </div> + <div> + <img src="assets/harry-potter.jpg" class="cover"/> + <h3>Harry Potter</h3> + <i>J.K. Rowling</i> + </div> + <div> + <img src="assets/the-lord-of-the-rings.jpg" class="cover"/> + <h3>The Lord of the Rings</h3> + <i>J.R.R. Tolkin</i> + </div> + </div> + <hr> + <h2>Short Stories</h2> + <div class="shelf" id="short-stories"> + <div> + <img src="assets/the-library-of-babel.png" class="icon"/> + <h3>The Library of Babel</h3> + <i>Jorge Luis Borges</i> + </div> + <div> + <img src="assets/the-lottery.png" class="icon"/> + <h3>The Lottery</h3> + <i>Shirley Jackson</i> + </div> + <div> + <img src="assets/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"> + <!-- Maus, March, Perseopolis, Copper --> + <div> + <img src="assets/calvin-and-hobbes.jpg" class="cover"/> + <h3>Calvin and Hobbes</h3> + <i>Bill Watterson</i> + </div> + <div> + <img src="assets/bone.jpg" class="cover"/> + <h3>BONE</h3> + <i>Jeff Smith</i> + </div> + <div> + <img src="assets/homestuck.svg" class="icon"/> + <h3><a href="https://homestuck.com">Homestuck</a></h3> + <i>Andrew Hussie</i> + </div> + <div> + <img src="assets/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/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/xkcd.png" class="icon"/> + <h3><a href="https://xkcd.org">xkcd</a></h3> + <i>Randall Munroe</i> + </div> + </div> + <hr> + <h2>Media</h2> + <div class="shelf" id="media"> + <div> + <img src="assets/2001-a-space-odyssey.jpg" class="poster"/> + <p><h3>2001: A Space Odyssey</h3></p> + </div> + <div> + <img src="assets/blade-runner.jpg" class="poster"/> + <p><h3>Blade Runner</h3></p> + </div> + <div> + <img src="assets/dr-strangelove.jpg" class="poster"/> + <p><h3>Dr. Strangelove</h3></p> + </div> + <div> + <img src="assets/avatar-the-last-airbender.jpg" class="poster"/> + <p><h3>Avatar: The Last Airbender</h3></p> + </div> + <div> + <img src="assets/my-neighbor-totoro.jpg" class="poster"/> + <p><h3>My Neighbor Totoro</h3></p> + </div> + </div> + <hr> + </main> + <footer> + <p> © 2020-2021 j-james </p> + </footer> </body> </html> diff --git a/css/bookshelf.css b/css/bookshelf.css new file mode 100644 index 0000000..b8795fa --- /dev/null +++ b/css/bookshelf.css @@ -0,0 +1,53 @@ +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; + } +} |
