Use a book icon as a separator, not leaves
[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 .book-title {
12   font-style: italic;
13   line-height: 1.2em;
14 }
15
16 .book-cover img {
17   float: right;
18   max-width:  180px;
19   max-height: 300px;
20   margin-top: 10px;
21   margin-left: 10px;
22   margin-bottom: 10px;
23   box-shadow: 0px 5px 5px rgba(0,0,0,0.25);
24 }
25
26 aside {
27   background: url('/static/specktre_tQt7j.png') #333366;
28   background-size: auto 100%;
29   color: white;
30   padding: 6px 1em;
31   font-size: 13pt;
32   line-height: 1.35em;
33 }
34
35 aside a {
36   text-decoration: none;
37 }
38
39 aside img {
40   height: 30px;
41   margin-bottom: -8px;
42   margin-top:    -2px;
43 }
44
45 aside h1 {
46   margin-top: 0;
47   margin-bottom: 0;
48   display: inline;
49   font-size: 1em;
50 }
51
52 main, aside #aside_inner, footer #footer_inner {
53   max-width: 780px;
54   margin-left:  auto;
55   margin-right: auto;
56 }
57
58 main {
59   padding: 1em;
60 }
61
62 a {
63   color: #4c3dae;
64 }
65
66 a:hover {
67   background: rgba(76, 61, 174, 0.3);
68 }
69
70 aside a {
71   color: white;
72 }
73
74 aside a:hover {
75   background: rgba(255, 255, 255, 0.3);
76 }
77
78 table.book_metadata {
79   border-collapse: collapse;
80   margin-bottom: 1em;
81 }
82
83 td {
84   padding-right: 10px;
85   padding-top:    3px;
86   padding-bottom: 3px;
87 }
88
89 th {
90   text-align: left;
91 }
92
93 footer {
94   border-top: 0.25px solid #bfbfbf;
95   color: #999;
96   font-size: 0.75em;
97   margin-top: 2em;
98   padding: 1em;
99   padding-bottom: 2em;
100 }
101
102 footer a {
103   color: gray;
104 }
105
106 footer a:hover {
107   background: rgba(128, 128, 128, 0.3);
108 }
109
110 .review_preview {
111   height: 161px;
112 }
113
114 .reading {
115   min-height: 161px;
116 }
117
118 .review_preview, .reading {
119   border: 2px solid #00a892;
120   background: rgba(0, 255, 221, 0.05);
121   border-radius: 6px;
122   margin-bottom: 1em;
123 }
124
125 .review_fave {
126   background: rgba(0, 255, 221, 0.2);
127 }
128
129 .review_preview a, .reading_inner {
130   grid-template-columns: 135px auto;
131   display: grid;
132   grid-gap: 8px;
133   height: 100%;
134   width: 100%;
135   color: black;
136   text-decoration: none;
137 }
138
139 .review_preview a:hover {
140   background: rgba(0, 255, 221, 0.3);
141 }
142
143 .review_preview img, .reading_inner img {
144   max-width: 140px;
145   max-height: 130px;
146   margin-top: 12px;
147   margin-bottom: 7px;
148   box-shadow: 0px 2.5px 2.5px rgba(0,0,0,0.25);
149 }
150
151 .book_thumbnail {
152   text-align: center;
153 }
154
155 .book_metadata {
156   grid-row: 1/1;
157   grid-column: 2/2;
158   display: inline-block;
159   margin-top:    auto;
160   margin-bottom: auto;
161   line-height: 1.25em;
162 }
163
164 .book_metadata p.title {
165   font-style: italic;
166   font-size: 1.15em;
167   margin-bottom: 0.5em;
168   line-height: 1.2em;
169 }
170
171 .book_metadata .did_not_finish {
172   font-weight: normal;
173 }
174
175 .book_metadata p {
176   margin: 0;
177 }
178
179 .nav {
180   margin-top: 0;
181 }
182
183 .nav .selected {
184   font-weight: bold;
185 }
186
187 .note {
188   margin-left:  1em;
189   margin-right: 1em;
190 }
191
192 .note p:first-child {
193   margin-top: 0;
194 }
195
196 .note p:last-child {
197   margin-bottom: 0.75em;
198 }
199
200 .divider {
201   text-align: center;
202   margin-top:    1.5em;
203   margin-bottom: 1em;
204 }
205
206 .divider img {
207   width: 50px;
208 }
209
210 #jump_to {
211   margin-bottom: -0.5em;
212 }