Create bookshelf

29 files changed, 232 insertions, 2 deletions

diff --git a/assets/2001-a-space-odyssey.jpg b/assets/2001-a-space-odyssey.jpg
new 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
new 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
new 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
new file mode 100644
index 0000000..08a860f
--- /dev/null
+++ b/assets/blade-runner.jpg
diff --git a/assets/bone.jpg b/assets/bone.jpg
new 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
new 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
new 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
new file mode 100644
index 0000000..7de2c61
--- /dev/null
+++ b/assets/fahrenheit-451.jpg
diff --git a/assets/hark.png b/assets/hark.png
new file mode 100644
index 0000000..30525f2
--- /dev/null
+++ b/assets/hark.png
diff --git a/assets/harrison-bergeron.jpg b/assets/harrison-bergeron.jpg
new 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
new 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
new 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
new file mode 100644
index 0000000..5db60b5
--- /dev/null
+++ b/assets/my-neighbor-totoro.jpg
diff --git a/assets/narnia.jpg b/assets/narnia.jpg
new 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
new 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
new 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
new file mode 100644
index 0000000..0963af4
--- /dev/null
+++ b/assets/siddhartha.jpg
diff --git a/assets/slaughterhouse-five.jpg b/assets/slaughterhouse-five.jpg
new 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
new 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
new 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
new 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
new 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
new 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
new file mode 100644
index 0000000..dd5cd5e
--- /dev/null
+++ b/assets/the-secret-history.jpg
diff --git a/assets/twilight.jpg b/assets/twilight.jpg
new file mode 100644
index 0000000..12d41d8
--- /dev/null
+++ b/assets/twilight.jpg
diff --git a/assets/xkcd.png b/assets/xkcd.png
new 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;
+	}
+}