Add an entry for "Notes from Small Planets"
[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 img, .reading_inner img {
162   max-width: 110px;
163   max-height: 130px;
164   vertical-align: middle;
165 }
166
167 .thumbnail_helper {
168   display: inline-block;
169   height: 100%;
170   vertical-align: middle;
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   padding-right: 10px;
185   padding-top:    10px;
186   padding-bottom: 10px;
187 }
188
189 .book_metadata p.title {
190   font-style: italic;
191   font-size: 1.15em;
192   margin-bottom: 0.5em;
193   line-height: 1.3em;
194 }
195
196 .book_metadata .did_not_finish {
197   font-weight: normal;
198 }
199
200 .book_metadata p {
201   margin: 0;
202 }
203
204 .nav .selected {
205   font-weight: bold;
206 }
207
208 .note {
209   margin-left:  1em;
210   margin-right: 1em;
211 }
212
213 .note p:first-child {
214   margin-top: 0;
215 }
216
217 .note p:last-child {
218   margin-bottom: 0.75em;
219 }
220
221 .divider {
222   text-align: center;
223   margin-top:    1.5em;
224   margin-bottom: 1em;
225 }
226
227 .divider img {
228   width: 50px;
229 }
230
231 #jump_to {
232   margin-bottom: -0.5em;
233 }
234
235 .star_rating {
236   font-size: 100%;
237   letter-spacing: 4px;
238 }
239
240 @media screen and (max-width: 500px) {
241   .review_preview img, .reading_inner img {
242     max-width: 250px;
243     max-height: 150px;
244     margin-top: 15px;
245     margin-bottom: 10px;
246   }
247
248   .review_preview a, .reading_inner {
249     grid-template-columns: auto;
250   }
251
252   .book_thumbnail {
253     grid-column: 1/1;
254     grid-row: 1/2;
255   }
256
257   .book_metadata {
258     grid-column: 1/1;
259     grid-row: 2/2;
260     padding: 15px;
261     padding-top: 0;
262   }
263 }