34421fa4278eb3ac0b947b96d12ac3719b44d370
[books.alexwlchan.net] / static / style.css
1 body {
2   margin: 0;
3   padding: 0;
4   font: 13pt monospace;
5   line-height: 1.4em;
6
7   /* Background from https://www.toptal.com/designers/subtlepatterns/light-paper-fibers/ */
8   background: url('/static/lightpaperfibers.png');
9 }
10
11 h1 .book-title {
12   font-style: italic;
13   line-height: 1.2em;
14 }
15
16 .book-cover img {
17   float: right;
18   max-width:  180px;
19   max-height: 300px;
20   margin-top: 10px;
21   margin-left: 10px;
22   margin-bottom: 10px;
23   box-shadow: 0px 5px 5px rgba(0,0,0,0.25);
24 }
25
26 aside {
27   color: white;
28   font-size: 13pt;
29   line-height: 1.35em;
30   margin-bottom: 2em;
31 }
32
33 aside #fallback_background, aside #shelf_background {
34   position: absolute;
35   top: 0;
36   left: 0;
37   width: 100%;
38 }
39
40 aside #fallback_background {
41   background: #666666;
42   height: 30px;
43   z-index: 1;
44 }
45
46 aside #shelf_background {
47   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAAtCAMAAADBTQACAAAA6lBMVEUAAAAKCgoLCwsMDAwODg4PDw8TExMUFBQVFRUYGBgZGRkaGhobGxscHBwdHR0fHx8gICAjIyMkJCQnJycoKCgpKSkqKiorKyssLCwtLS0wMDAxMTEyMjIzMzM0NDQ2NjY4ODg6Ojo7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJERERFRUVGRkZHR0dISEhJSUlKSkpLS0tMTExNTU1PT09QUFBRUVFSUlJTU1NUVFRVVVVWVlZXV1dYWFhZWVlbW1tcXFxdXV1eXl5gYGBhYWFiYmJjY2NkZGRlZWVmZmZpaWlsbGxtbW1ubm6kDlq2AAAAAXRSTlMAQObYZgAABEZJREFUGBntwWlvlWUCgOG7T18kqEWdYCswKrXESHQwAl+IflA/MPH3ap1EXIiAJCMtaUc0LmVRsFAXkAqlFsqcntOevstzunm6PKf3dXUdYFEgpoe6XyjrJWeSikPE3GDetzT0s7w+5owyb5aIKcrepOEsBV00PUXVb9Q9Tt4MC96grpumISqOUXORsiOU/E7DM8QNU7KPkgkK+ok4z4LHqXpIzF5auE7e2+RNk3OFmpeZc44W+siZpOQV5oxQdZC474jYT9M/iblFzq/EjFHzDg2jzHmNqNPE9RO3n6hLND1HxQPyJom5Q9EeinZRdZGCfkp2sKiXkv9S9hbzxlnUTcl9ymbIuU3dfSKeJmaAmEdU3CJvjLo3qTtJC49RMUBFRs5d5j2g5mcaZin6Fy1cpGkvMYdo4Uta6KPoHk2XyHmBnAcUHSDqJxquUXeMBUMUHKdsjJgJorpY9G9q7hDzCxWXyHmRhkc0HaSFEWoO0zRN0zRld2n4hpjj5J2j6gR1gbILLOilIiBJkpIXkCRJyQtIkqTkBSRJUvICkiQpeQFJkpS8gCRJSl5AkiQlLyBJkpIXkCRJyQtIkqTkBSRJUvICkiQpeQFJkpS8gCRJSl5AkiQlLyBJkpIXkCRJyQtIkqTkBSRJUvICkiQpeQFJkpS8gCRJSl5AkiQlLyBJkpIXkCRJyQtIkqTkBSRJUvICkiQpeQFJkpS8jA529k9ieliJe1Pk7EYq+GqCmB1IS9k3Rt1Oiv43TdwumsaniDhEJ+sdJyZDVRk5s1eIeJ01+maMiGOswc1RavqYF25S9STp+ceH1L3HVjP+B3E9dJxnBllON6qZuUjTCXQXVTx/lrrAag2cQct6433m9VKRsXYTP7NogPYYRdLft/s7CvawvFe/RFr04yMW7WcrecB6+eEH4vayCk+co24HGylD21z376zdqUlyTiBtUV0fU3aEvIFhBC+NoWRlrNSzI6yPy5O0xZ90niP/oWgfStPlGaL2s5wbVyk7Sl7PEFvTmds0HGUjjV1GW8b5WeZ1o/WWsf1M0vQUbXD0U1Zo+AZK3+GPaZ/PiHqRpQyh9fIhS5tB2jCzg6xGhlbnwh3mvMs2NckKHfgIeJk5xz8gro+OM4OW9HCIosOU7Rhl0V5au30LrcXNCQoG2AAP2cK6vqcTZLTJGCt0nnk9bL5rVO1Cm6Lna4peYc7rJ6k4yAZ7iLRJpljGIC30ou0lQyVTrMSnSOvnKu32Fdps2bdI7TJMRYbWwSfUPEf7XWBp/XSQk7TbtRGkbWMCpeD451QMshYZm2YSSan6iJKnaWmIJYwiqS2yK2id3GDLuXefjfUBS/qaDXD9V6R1NErFEXKeGEab5NnTlD1GztW/WJ3RcRa8TdPOU7Qww0bKWNYIktRxhtlM0yTmOkUH2OZOseVkqOMdO0OH+YK4PajTjJOiYbSMM7TX7kH0f76SyBM6SrN0AAAAAElFTkSuQmCC);
48   background-size: auto 100%;
49   height: 45px;
50   z-index: 2;
51 }
52
53 aside #aside_inner {
54   padding: 3px 1em;
55 }
56
57 aside a {
58   text-decoration: none;
59 }
60
61 aside img {
62   height: 30px;
63   margin-bottom: -8px;
64   margin-top:    -2px;
65 }
66
67 aside h1 {
68   margin-top: 0;
69   margin-bottom: 0;
70   display: inline;
71   font-size: 1em;
72 }
73
74 main, aside #aside_inner, footer #footer_inner {
75   max-width: 780px;
76   margin-left:  auto;
77   margin-right: auto;
78 }
79
80 main {
81   padding: 1em;
82 }
83
84 a {
85   color: black;
86 }
87
88 a:hover {
89   background: rgba(0, 0, 0, 0.3);
90 }
91
92 aside a {
93   color: white;
94 }
95
96 aside a:hover {
97   background: rgba(255, 255, 255, 0.3);
98 }
99
100 table.book_metadata {
101   border-collapse: collapse;
102   margin-bottom: 1em;
103 }
104
105 td {
106   padding-right: 10px;
107   padding-top:    3px;
108   padding-bottom: 3px;
109 }
110
111 th {
112   text-align: left;
113 }
114
115 footer {
116   border-top: 0.25px solid #bfbfbf;
117   color: #999;
118   font-size: 0.75em;
119   margin-top: 2em;
120   padding: 1em;
121   padding-bottom: 2em;
122 }
123
124 footer a {
125   color: gray;
126 }
127
128 footer a:hover {
129   background: rgba(128, 128, 128, 0.3);
130 }
131
132 .review_preview {
133   height: 161px;
134 }
135
136 .reading {
137   min-height: 161px;
138 }
139
140 .review_preview, .reading {
141   border: 2px solid #00a892;
142   background: rgba(0, 255, 221, 0.05);
143   border-radius: 6px;
144   margin-bottom: 1em;
145 }
146
147 .review_fave {
148   background: rgba(0, 255, 221, 0.2);
149 }
150
151 .review_preview a, .reading_inner {
152   grid-template-columns: 135px auto;
153   display: grid;
154   grid-gap: 8px;
155   height: 100%;
156   width: 100%;
157   color: black;
158   text-decoration: none;
159 }
160
161 .review_preview a:hover {
162   background: rgba(0, 255, 221, 0.3);
163 }
164
165 .review_preview img, .reading_inner img {
166   max-width: 140px;
167   max-height: 130px;
168   margin-top: 12px;
169   margin-bottom: 7px;
170   box-shadow: 0px 2.5px 2.5px rgba(0,0,0,0.25);
171 }
172
173 .book_thumbnail {
174   text-align: center;
175 }
176
177 .book_metadata {
178   grid-row: 1/1;
179   grid-column: 2/2;
180   display: inline-block;
181   margin-top:    auto;
182   margin-bottom: auto;
183   line-height: 1.25em;
184 }
185
186 .book_metadata p.title {
187   font-style: italic;
188   font-size: 1.15em;
189   margin-bottom: 0.5em;
190   line-height: 1.2em;
191 }
192
193 .book_metadata .did_not_finish {
194   font-weight: normal;
195 }
196
197 .book_metadata p {
198   margin: 0;
199 }
200
201 .nav {
202   margin-top: 0;
203 }
204
205 .nav .selected {
206   font-weight: bold;
207 }
208
209 .note {
210   margin-left:  1em;
211   margin-right: 1em;
212 }
213
214 .note p:first-child {
215   margin-top: 0;
216 }
217
218 .note p:last-child {
219   margin-bottom: 0.75em;
220 }
221
222 .divider {
223   text-align: center;
224   margin-top:    1.5em;
225   margin-bottom: 1em;
226 }
227
228 .divider img {
229   width: 50px;
230 }
231
232 #jump_to {
233   margin-bottom: -0.5em;
234 }