Add a review of "IBM and the Holocaust"
[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 {
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: 10px;
25   margin-bottom: 10px;
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 table.book_metadata {
109   border-collapse: collapse;
110   margin-bottom: 1em;
111 }
112
113 td {
114   padding-right: 10px;
115   padding-top:    3px;
116   padding-bottom: 3px;
117 }
118
119 th {
120   text-align: left;
121 }
122
123 footer {
124   border-top: 0.25px solid #bfbfbf;
125   color: #999;
126   font-size: 0.75em;
127   margin-top: 2em;
128   padding: 1em;
129   padding-bottom: 2em;
130 }
131
132 footer a {
133   color: gray;
134 }
135
136 footer a:hover {
137   background: rgba(128, 128, 128, 0.3);
138 }
139
140 .reading {
141   min-height: 161px;
142 }
143
144 .review_preview, .reading {
145   border: 2px solid #00a892;
146   background: rgba(0, 255, 221, 0.05);
147   border-radius: 6px;
148   margin-bottom: 1em;
149 }
150
151 .review_fave {
152   background: rgba(0, 255, 221, 0.2);
153 }
154
155 .review_preview a, .reading_inner {
156   grid-template-columns: 135px auto;
157   display: grid;
158   grid-gap: 8px;
159   height: 100%;
160   width: 100%;
161   color: black;
162   text-decoration: none;
163 }
164
165 .review_preview a:hover {
166   background: rgba(0, 255, 221, 0.3);
167 }
168
169 .review_preview img, .reading_inner img {
170   max-width: 110px;
171   max-height: 130px;
172   margin-top: 12px;
173   margin-bottom: 7px;
174   box-shadow: 0px 2.5px 2.5px rgba(0,0,0,0.25);
175 }
176
177 @media screen and (max-width: 500px) {
178   .review_preview img, .reading_inner img {
179     max-width: 70px;
180   }
181
182   .review_preview a, .reading_inner {
183     grid-template-columns: 95px auto;
184   }
185 }
186
187 .book_thumbnail {
188   text-align: center;
189 }
190
191 .book_metadata {
192   grid-row: 1/1;
193   grid-column: 2/2;
194   display: inline-block;
195   margin-top:    auto;
196   margin-bottom: auto;
197   line-height: 1.25em;
198   padding-right: 10px;
199   padding-top:    10px;
200   padding-bottom: 10px;
201 }
202
203 .book_metadata p.title {
204   font-style: italic;
205   font-size: 1.15em;
206   margin-bottom: 0.5em;
207   line-height: 1.3em;
208 }
209
210 .book_metadata .did_not_finish {
211   font-weight: normal;
212 }
213
214 .book_metadata p {
215   margin: 0;
216 }
217
218 .nav {
219 /*  margin-top: 0;*/
220 }
221
222 .nav .selected {
223   font-weight: bold;
224 }
225
226 .note {
227   margin-left:  1em;
228   margin-right: 1em;
229 }
230
231 .note p:first-child {
232   margin-top: 0;
233 }
234
235 .note p:last-child {
236   margin-bottom: 0.75em;
237 }
238
239 .divider {
240   text-align: center;
241   margin-top:    1.5em;
242   margin-bottom: 1em;
243 }
244
245 .divider img {
246   width: 50px;
247 }
248
249 #jump_to {
250   margin-bottom: -0.5em;
251 }