Skip to content

Instantly share code, notes, and snippets.

@jvns

jvns/tinybooks.html Secret

Created March 8, 2022 13:58
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jvns/de0671d09f5752d36cbe6082d4fb2af2 to your computer and use it in GitHub Desktop.
Save jvns/de0671d09f5752d36cbe6082d4fb2af2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tinybooks.html
<html>
<head>
<style>
@page {
size: 11in 8.5in;
margin: 0;
}
body {
margin-top: .7in;
}
.book {
height: 1.3in;
width: 2in; /* 1.6 + 0.4 */
border: 1px solid black;
position: relative;
margin: .05in;
page-break-inside: avoid;
}
img {
height: 1.3in;
page-break-inside: avoid;
transform: rotate(180deg);
}
.reversed {
position: absolute;
bottom: 0;
right: 0;
transform: rotate(180deg);
}
body {
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="book" style="background-color: #19283b">
<!-- hench -->
<div class="cover">
<img src="./hench-2.jpg">
</div>
<div class="cover reversed">
<img src="./hench-2.jpg">
</div>
</div>
<div class="book" style="background-color: #454c52">
<div class="cover">
<img src="./50892288.jpg">
</div>
<div class="cover reversed">
<img src="./50892288.jpg">
</div>
</div>
<div class="book" style="background-color: #77ced8">
<div class="cover">
<img src="./41xntFTttiL._SX330_BO1,204,203,200_.jpg">
</div>
<div class="cover reversed">
<img src="./41xntFTttiL._SX330_BO1,204,203,200_.jpg">
</div>
</div>
<div class="book" style="background-color: #ffc50c">
<div class="cover">
<img src="./81++qN-RI1L.jpg">
</div>
<div class="cover reversed">
<img src="./81++qN-RI1L.jpg">
</div>
</div>
<div class="book" style="background-color: #130d0d">
<div class="cover">
<img src="./81Z2EmhnH3L.jpg">
</div>
<div class="cover reversed">
<img src="./81Z2EmhnH3L.jpg">
</div>
</div>
<div class="book" style="background-color: #a03629">
<div class="cover">
<img src="./81F5lEHYtoL.jpg">
</div>
<div class="cover reversed">
<img src="./81F5lEHYtoL.jpg">
</div>
</div>
<div class="book" style="background-color: #d9d1bc">
<div class="cover">
<img src="./81aKum4SnrL.jpg">
</div>
<div class="cover reversed">
<img src="./81aKum4SnrL.jpg">
</div>
</div>
<div class="book" style="background-color: #21200e">
<div class="cover">
<img src="./39342285.jpg">
</div>
<div class="cover reversed">
<img src="./39342285.jpg">
</div>
</div>
<div class="book" style="background-color: #f29f1b">
<div class="cover">
<img src="./9780593133385">
</div>
<div class="cover reversed">
<img src="./9780593133385">
</div>
</div>
<div class="book" style="background-color: #2c347f">
<div class="cover">
<img src="./50892338.jpg">
</div>
<div class="cover reversed">
<img src="./50892338.jpg">
</div>
</div>
<div class="book" style="background-color: #00bbda">
<div class="cover">
<img src="./41Eai-M4uKL._SX356_BO1,204,203,200_.jpg">
</div>
<div class="cover reversed">
<img src="./41Eai-M4uKL._SX356_BO1,204,203,200_.jpg">
</div>
</div>
<div class="book" style="background-color: #96a479">
<div class="cover">
<img src="./91EBMA21mAL.jpg">
</div>
<div class="cover reversed">
<img src="./91EBMA21mAL.jpg">
</div>
</div>
<div class="book" style="background-color: #000000">
<div class="cover">
<img src="./81bNu1rYutL.jpg">
</div>
<div class="cover reversed">
<img src="./81bNu1rYutL.jpg">
</div>
</div>
<div class="book" style="background-color: #010832">
<div class="cover">
<img src="./81bdCLFVKBL.jpg">
</div>
<div class="cover reversed">
<img src="./81bdCLFVKBL.jpg">
</div>
</div>
<div class="book" style="background-color: #1beaba">
<div class="cover">
<img src="./81lhrN1QMvL.jpg">
</div>
<div class="cover reversed">
<img src="./81lhrN1QMvL.jpg">
</div>
</div>
<div class="book" style="background-color: #02121f">
<div class="cover">
<img src="./36238876.jpg">
</div>
<div class="cover reversed">
<img src="./36238876.jpg">
</div>
</div>
<div class="book" style="background-color: #872a47">
<div class="cover">
<img src="./9780525620785">
</div>
<div class="cover reversed">
<img src="./9780525620785">
</div>
</div>
<div class="book" style="background-color: #2b25c3">
<div class="cover">
<img src="./81ICvbFe2+L.jpg">
</div>
<div class="cover reversed">
<img src="./81ICvbFe2+L.jpg">
</div>
</div>
<div class="book" style="background-color: #3a3172">
<div class="cover">
<img src="./81hJZsChj2L.jpg">
</div>
<div class="cover reversed">
<img src="./81hJZsChj2L.jpg">
</div>
</div>
<div class="book" style="background-color: #2c2827">
<div class="cover">
<img src="./81eTGGX8yyL.jpg">
</div>
<div class="cover reversed">
<img src="./81eTGGX8yyL.jpg">
</div>
</div>
<div class="book" style="background-color: #32312c">
<div class="cover">
<img src="./39863238.jpg">
</div>
<div class="cover reversed">
<img src="./39863238.jpg">
</div>
</div>
<div class="book" style="background-color: #221e36">
<div class="cover">
<img src="station-eleven.jpg">
</div>
<div class="cover reversed">
<img src="station-eleven.jpg">
</div>
</div>
<div class="book" style="background-color: #f8f0d9">
<div class="cover">
<img src="./81-+DUW5ZdL.jpg">
</div>
<div class="cover reversed">
<img src="./81-+DUW5ZdL.jpg">
</div>
</div>
<div class="book" style="background-color: #812b6c">
<div class="cover">
<img src="./10874177.jpg">
</div>
<div class="cover reversed">
<img src="./10874177.jpg">
</div>
</div>
<div class="book" style="background-color: #dceadd">
<div class="cover">
<img src="./9780593081938">
</div>
<div class="cover reversed">
<img src="./9780593081938">
</div>
</div>
<!--
<div class="book" style="background-color: ">
<div class="cover">
<img src="">
</div>
<div class="cover reversed">
<img src="">
</div>
</div>
-->
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment