1ea8ce59668e84b91d1a05a835f027d3f9366749
[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: 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 .review_preview, .reading {
141   border: 2px solid;
142   border-radius: 6px;
143   margin-bottom: 1em;
144 }
145
146 .review_fave {
147   background: rgba(0, 255, 221, 0.2);
148 }
149
150 .review_preview a, .reading_inner {
151   grid-template-columns: 135px auto;
152   display: grid;
153   grid-gap: 8px;
154   height: 100%;
155   width: 100%;
156   color: black;
157   text-decoration: none;
158   min-height: 157px;
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: 110px;
167   max-height: 130px;
168 /*  margin-top: 12px;
169   margin-bottom: 7px;*/
170   vertical-align: middle;
171 }
172
173 .thumbnail_helper {
174   display: inline-block;
175   height: 100%;
176   vertical-align: middle;
177 }
178
179 .book_thumbnail {
180   text-align: center;
181 }
182
183 .book_metadata {
184   grid-row: 1/1;
185   grid-column: 2/2;
186   display: inline-block;
187   margin-top:    auto;
188   margin-bottom: auto;
189   line-height: 1.25em;
190   padding-right: 10px;
191   padding-top:    10px;
192   padding-bottom: 10px;
193 }
194
195 .book_metadata p.title {
196   font-style: italic;
197   font-size: 1.15em;
198   margin-bottom: 0.5em;
199   line-height: 1.3em;
200 }
201
202 .book_metadata .did_not_finish {
203   font-weight: normal;
204 }
205
206 .book_metadata p {
207   margin: 0;
208 }
209
210 .nav .selected {
211   font-weight: bold;
212 }
213
214 .note {
215   margin-left:  1em;
216   margin-right: 1em;
217 }
218
219 .note p:first-child {
220   margin-top: 0;
221 }
222
223 .note p:last-child {
224   margin-bottom: 0.75em;
225 }
226
227 .divider {
228   text-align: center;
229   margin-top:    1.5em;
230   margin-bottom: 1em;
231 }
232
233 .divider img {
234   width: 50px;
235 }
236
237 #jump_to {
238   margin-bottom: -0.5em;
239 }
240
241 .star_rating {
242   font-size: 100%;
243   letter-spacing: 4px;
244 }
245
246 @media screen and (max-width: 500px) {
247   .review_preview img, .reading_inner img {
248     max-width: 250px;
249     max-height: 150px;
250     margin-bottom: 0;
251   }
252
253   .review_preview a, .reading_inner {
254     grid-template-columns: auto;
255   }
256
257   .book_thumbnail {
258     grid-column: 1/1;
259     grid-row: 1/2;
260   }
261
262   .book_metadata {
263     grid-column: 1/1;
264     grid-row: 2/2;
265     padding: 15px;
266     padding-top: 0;
267   }
268 }