get a higher-res thumbnail for "Think Black"
[books.alexwlchan.net] / static / style.css
1 body {
2   margin: 0;
3   padding: 0;
4   font: 12pt monospace;
5   line-height: 1.55em;
6
7   /* Background from https://www.toptal.com/designers/subtlepatterns/light-paper-fibers/ */
8   background: url('/static/lightpaperfibers.png');
9 }
10
11 h1 {
12   line-height: 1.15em;
13 }
14
15 h1 .book-title {
16   font-style: italic;
17 }
18
19 .book-cover img {
20   float: right;
21   max-width:  180px;
22   max-height: 240px;
23   margin-top: 10px;
24   margin-left: 20px;
25   margin-bottom: 20px;
26   box-shadow: 0px 5px 5px rgba(0,0,0,0.25);
27 }
28
29 @media screen and (max-width: 500px) {
30   .book-cover img {
31     max-width: 90px;
32   }
33 }
34
35 aside {
36   color: white;
37   font-size: 13pt;
38   line-height: 1.35em;
39   margin-bottom: 2em;
40 }
41
42 aside #fallback_background, aside #shelf_background {
43   position: absolute;
44   top: 0;
45   left: 0;
46   width: 100%;
47 }
48
49 aside #fallback_background {
50   background: #666666;
51   height: 30px;
52   z-index: 1;
53 }
54
55 aside #shelf_background {
56   background-size: auto 100%;
57   height: 45px;
58   z-index: 2;
59 }
60
61 aside #aside_inner {
62   padding: 3px 1em;
63 }
64
65 aside a {
66   text-decoration: none;
67 }
68
69 aside img {
70   height: 30px;
71   margin-bottom: -8px;
72   margin-top:    -2px;
73 }
74
75 aside h1 {
76   margin-top: 0;
77   margin-bottom: 0;
78   display: inline;
79   font-size: 1em;
80 }
81
82 main, aside #aside_inner, footer #footer_inner {
83   max-width: 780px;
84   margin-left:  auto;
85   margin-right: auto;
86 }
87
88 main {
89   padding: 1em;
90 }
91
92 a {
93   color: black;
94 }
95
96 a:hover {
97   background: rgba(0, 0, 0, 0.3);
98 }
99
100 aside a {
101   color: white;
102 }
103
104 aside a:hover {
105   background: rgba(255, 255, 255, 0.3);
106 }
107
108 .book_metadata {
109   border-collapse: collapse;
110   margin-bottom: 1em;
111   max-width: calc(100% - 230px);
112 }
113
114 td, th {
115   line-height: 1.4em;
116   vertical-align: top;
117   padding-top:    3px;
118   padding-bottom: 3px;
119 }
120
121 td {
122   font-weight: bold;
123 }
124
125 th {
126   padding-right: 10px;
127   text-align: left;
128   font-weight: normal;
129 }
130
131 footer {
132   border-top: 0.25px solid #bfbfbf;
133   color: #999;
134   font-size: 0.75em;
135   margin-top: 2em;
136   padding: 1em;
137   padding-bottom: 2em;
138 }
139
140 footer a {
141   color: gray;
142 }
143
144 footer a:hover {
145   background: rgba(128, 128, 128, 0.3);
146 }
147
148 .review_preview, .reading {
149   border: 2px solid;
150   border-radius: 6px;
151   margin-bottom: 1em;
152 }
153
154 .review_fave {
155   background: rgba(0, 255, 221, 0.2);
156 }
157
158 .review_preview a, .reading_inner {
159   grid-template-columns: 135px auto;
160   display: grid;
161   grid-gap: 8px;
162   height: 100%;
163   width: 100%;
164   color: black;
165   text-decoration: none;
166   min-height: 157px;
167 }
168
169 .review_preview img, .reading_inner img {
170   max-width: 110px;
171   max-height: 130px;
172   vertical-align: middle;
173 }
174
175 .thumbnail_helper {
176   display: inline-block;
177   height: 100%;
178   vertical-align: middle;
179 }
180
181 .book_thumbnail {
182   text-align: center;
183 }
184
185 .book_metadata {
186   grid-row: 1/1;
187   grid-column: 2/2;
188   display: inline-block;
189   margin-top:    auto;
190   margin-bottom: auto;
191   line-height: 1.25em;
192   padding-right: 10px;
193   padding-top:    10px;
194   padding-bottom: 10px;
195 }
196
197 .book_metadata p.title {
198   font-style: italic;
199   font-size: 1.15em;
200   margin-bottom: 0.5em;
201   line-height: 1.3em;
202 }
203
204 .book_metadata .did_not_finish {
205   font-weight: normal;
206 }
207
208 .book_metadata p {
209   margin: 0;
210 }
211
212 .nav .selected {
213   font-weight: bold;
214 }
215
216 .note {
217   margin-left:  1em;
218   margin-right: 1em;
219 }
220
221 .note p:first-child {
222   margin-top: 0;
223 }
224
225 .note p:last-child {
226   margin-bottom: 0.75em;
227 }
228
229 .divider {
230   text-align: center;
231   margin-top:    1.5em;
232   margin-bottom: 1em;
233 }
234
235 .divider img {
236   width: 50px;
237 }
238
239 #jump_to {
240   margin-bottom: -0.5em;
241 }
242
243 .star_rating {
244   font-size: 100%;
245   letter-spacing: 4px;
246 }
247
248 @media screen and (max-width: 500px) {
249   .review_preview img, .reading_inner img {
250     max-width: 250px;
251     max-height: 150px;
252     margin-top: 15px;
253     margin-bottom: 10px;
254   }
255
256   .review_preview a, .reading_inner {
257     grid-template-columns: auto;
258   }
259
260   .book_thumbnail {
261     grid-column: 1/1;
262     grid-row: 1/2;
263   }
264
265   .book_metadata {
266     grid-column: 1/1;
267     grid-row: 2/2;
268     padding: 15px;
269     padding-left: 0px;
270     padding-top: 0;
271     max-width: calc(100%);
272   }
273
274   .review_preview .book_metadata {
275     padding-left: 15px;
276   }
277
278   .thumbnail_helper {
279     display: none;
280   }
281
282   .book-cover {
283     text-align: center;
284   }
285
286   .book-cover img {
287     float: none;
288     max-width:  120px;
289     max-height: 240px;
290     margin-top: 10px;
291     margin-left:  auto;
292     margin-right: auto;
293     margin-bottom: 0;
294     box-shadow: 0px 5px 5px rgba(0,0,0,0.25);
295   }
296 }