~j-james/website

2f4fc94af0a2742a49979a4199457f62b37fc5ac — j-james 3 months ago bed81a6
Create bookshelf
A assets/2001-a-space-odyssey.jpg => assets/2001-a-space-odyssey.jpg +0 -0
A assets/a-softer-world.png => assets/a-softer-world.png +0 -0
A assets/avatar-the-last-airbender.jpg => assets/avatar-the-last-airbender.jpg +0 -0
A assets/blade-runner.jpg => assets/blade-runner.jpg +0 -0
A assets/bone.jpg => assets/bone.jpg +0 -0
A assets/calvin-and-hobbes.jpg => assets/calvin-and-hobbes.jpg +0 -0
A assets/dr-strangelove.jpg => assets/dr-strangelove.jpg +0 -0
A assets/fahrenheit-451.jpg => assets/fahrenheit-451.jpg +0 -0
A assets/hark.png => assets/hark.png +0 -0
A assets/harrison-bergeron.jpg => assets/harrison-bergeron.jpg +0 -0
A assets/harry-potter.jpg => assets/harry-potter.jpg +0 -0
A assets/homestuck.svg => assets/homestuck.svg +12 -0
@@ 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

A assets/ishmael.jpg => assets/ishmael.jpg +0 -0
A assets/my-neighbor-totoro.jpg => assets/my-neighbor-totoro.jpg +0 -0
A assets/narnia.jpg => assets/narnia.jpg +0 -0
A assets/nineteen-eighty-four.jpeg => assets/nineteen-eighty-four.jpeg +0 -0
A assets/notes-from-the-underground.jpg => assets/notes-from-the-underground.jpg +0 -0
A assets/siddhartha.jpg => assets/siddhartha.jpg +0 -0
A assets/slaughterhouse-five.jpg => assets/slaughterhouse-five.jpg +0 -0
A assets/the-giver.jpg => assets/the-giver.jpg +0 -0
A assets/the-library-of-babel.png => assets/the-library-of-babel.png +0 -0
A assets/the-lord-of-the-rings.jpg => assets/the-lord-of-the-rings.jpg +0 -0
A assets/the-lottery.png => assets/the-lottery.png +0 -0
A assets/the-picture-of-dorian-gray.jpg => assets/the-picture-of-dorian-gray.jpg +0 -0
A assets/the-secret-history.jpg => assets/the-secret-history.jpg +0 -0
A assets/twilight.jpg => assets/twilight.jpg +0 -0
A assets/xkcd.png => assets/xkcd.png +0 -0
M bookshelf.html => bookshelf.html +167 -2
@@ 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>

A css/bookshelf.css => css/bookshelf.css +53 -0
@@ 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;
	}
}