Tweak appearance for mobile
[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: 300px;
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: 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);
57   background-size: auto 100%;
58   height: 45px;
59   z-index: 2;
60 }
61
62 aside #aside_inner {
63   padding: 3px 1em;
64 }
65
66 aside a {
67   text-decoration: none;
68 }
69
70 aside img {
71   height: 30px;
72   margin-bottom: -8px;
73   margin-top:    -2px;
74 }
75
76 aside h1 {
77   margin-top: 0;
78   margin-bottom: 0;
79   display: inline;
80   font-size: 1em;
81 }
82
83 main, aside #aside_inner, footer #footer_inner {
84   max-width: 780px;
85   margin-left:  auto;
86   margin-right: auto;
87 }
88
89 main {
90   padding: 1em;
91 }
92
93 a {
94   color: black;
95 }
96
97 a:hover {
98   background: rgba(0, 0, 0, 0.3);
99 }
100
101 aside a {
102   color: white;
103 }
104
105 aside a:hover {
106   background: rgba(255, 255, 255, 0.3);
107 }
108
109 table.book_metadata {
110   border-collapse: collapse;
111   margin-bottom: 1em;
112 }
113
114 td {
115   padding-right: 10px;
116   padding-top:    3px;
117   padding-bottom: 3px;
118 }
119
120 th {
121   text-align: left;
122 }
123
124 footer {
125   border-top: 0.25px solid #bfbfbf;
126   color: #999;
127   font-size: 0.75em;
128   margin-top: 2em;
129   padding: 1em;
130   padding-bottom: 2em;
131 }
132
133 footer a {
134   color: gray;
135 }
136
137 footer a:hover {
138   background: rgba(128, 128, 128, 0.3);
139 }
140
141 .reading {
142   min-height: 161px;
143 }
144
145 .review_preview, .reading {
146   border: 2px solid #00a892;
147   background: rgba(0, 255, 221, 0.05);
148   border-radius: 6px;
149   margin-bottom: 1em;
150 }
151
152 .review_fave {
153   background: rgba(0, 255, 221, 0.2);
154 }
155
156 .review_preview a, .reading_inner {
157   grid-template-columns: 135px auto;
158   display: grid;
159   grid-gap: 8px;
160   height: 100%;
161   width: 100%;
162   color: black;
163   text-decoration: none;
164 }
165
166 .review_preview a:hover {
167   background: rgba(0, 255, 221, 0.3);
168 }
169
170 .review_preview img, .reading_inner img {
171   max-width: 110px;
172   max-height: 130px;
173   margin-top: 12px;
174   margin-bottom: 7px;
175   box-shadow: 0px 2.5px 2.5px rgba(0,0,0,0.25);
176 }
177
178 @media screen and (max-width: 500px) {
179   .review_preview img, .reading_inner img {
180     max-width: 70px;
181   }
182
183   .review_preview a, .reading_inner {
184     grid-template-columns: 95px auto;
185   }
186 }
187
188 .book_thumbnail {
189   text-align: center;
190 }
191
192 .book_metadata {
193   grid-row: 1/1;
194   grid-column: 2/2;
195   display: inline-block;
196   margin-top:    auto;
197   margin-bottom: auto;
198   line-height: 1.25em;
199   padding-right: 10px;
200   padding-top:    10px;
201   padding-bottom: 10px;
202 }
203
204 .book_metadata p.title {
205   font-style: italic;
206   font-size: 1.15em;
207   margin-bottom: 0.5em;
208   line-height: 1.3em;
209 }
210
211 .book_metadata .did_not_finish {
212   font-weight: normal;
213 }
214
215 .book_metadata p {
216   margin: 0;
217 }
218
219 .nav {
220 /*  margin-top: 0;*/
221 }
222
223 .nav .selected {
224   font-weight: bold;
225 }
226
227 .note {
228   margin-left:  1em;
229   margin-right: 1em;
230 }
231
232 .note p:first-child {
233   margin-top: 0;
234 }
235
236 .note p:last-child {
237   margin-bottom: 0.75em;
238 }
239
240 .divider {
241   text-align: center;
242   margin-top:    1.5em;
243   margin-bottom: 1em;
244 }
245
246 .divider img {
247   width: 50px;
248 }
249
250 #jump_to {
251   margin-bottom: -0.5em;
252 }