Commit | Line | Data |
---|---|---|
2c35d3a8 AB |
1 | body { |
2 | font-family: "Noto Sans", "Arial", sans-serif; | |
3 | font-size: 1em; | |
4 | } | |
5 | ||
6 | body, | |
7 | html { | |
8 | margin: 0; | |
9 | height: 100%; | |
10 | } | |
11 | ||
12 | ||
13 | ||
14 | #light-off { | |
15 | position: absolute; | |
16 | visibility: hidden; | |
17 | } | |
18 | ||
19 | .light-off-button { | |
3b86855a AB |
20 | cursor: pointer; |
21 | vertical-align: middle; | |
2c35d3a8 AB |
22 | } |
23 | ||
24 | .light-off-button, | |
3b86855a | 25 | .light-off-button-inline { |
2c35d3a8 AB |
26 | color: #888888; |
27 | -webkit-user-select: none; | |
28 | user-select: none; | |
29 | cursor: pointer; | |
30 | text-align: right; | |
31 | } | |
32 | ||
33 | .light-off-button:hover:after, | |
34 | .light-off-button-inline:hover:after { | |
35 | color: #357edd; | |
36 | border-bottom: 0; | |
37 | } | |
38 | ||
39 | .light-off:checked ~ .page .light-off-button:hover:after, | |
40 | .light-off:checked ~ .page .light-off-button-inline:hover:after { | |
41 | color: #ddddb6; | |
42 | border-bottom: 0; | |
43 | } | |
44 | ||
45 | .light-off-button:after, | |
46 | .light-off-button-inline:after { | |
47 | content: "\1F4A1"; | |
48 | } | |
49 | ||
50 | ||
51 | ||
52 | .page { | |
53 | background-color: #ffffff; | |
54 | color: #232323; | |
55 | min-height: 100%; | |
56 | } | |
57 | ||
58 | .light-off:checked ~ .page { | |
59 | background-color: #141414; | |
60 | color: #cccccc; | |
61 | } | |
62 | ||
63 | .page:selection { | |
64 | background: #ddddb6; | |
65 | } | |
66 | .light-off:checked ~ .page:selection { | |
67 | background: #357edd; | |
68 | } | |
69 | ||
70 | .page a { | |
71 | color: #357edd; | |
72 | text-decoration: none; | |
73 | border-bottom: 1px solid #a5ceff; | |
74 | } | |
75 | ||
76 | .page a:visited { | |
77 | color: #888888; | |
78 | border-bottom: 1px solid #cccccc; | |
79 | } | |
80 | ||
81 | .page a:hover { | |
82 | color: #357edd; | |
83 | border-bottom: 1px solid #357edd; | |
84 | } | |
85 | ||
3b86855a AB |
86 | .light-off:checked ~ .page a, .light-off:checked ~ header a { |
87 | color: #ddddb6 !important; | |
2c35d3a8 AB |
88 | border-bottom: 1px solid #aaaa96; |
89 | } | |
90 | ||
91 | .light-off:checked ~ .page a:visited { | |
92 | color: #888888; | |
93 | border-bottom: 1px solid #444444; | |
94 | } | |
95 | ||
96 | .light-off:checked ~ .page a:hover { | |
97 | color: #ddddb6; | |
98 | border-bottom: 1px solid #ddddb6; | |
99 | } | |
100 | ||
101 | ||
102 | ||
103 | .announcement { | |
104 | color: #000000; | |
105 | background-color: #eeeeee; | |
106 | text-align: center; | |
107 | width: 100%; | |
108 | margin: 0; | |
109 | } | |
110 | ||
111 | .light-off:checked ~ .page .announcement { | |
112 | color: #ffffff; | |
113 | background-color: #000000; | |
114 | } | |
115 | ||
116 | .announcement__text { | |
117 | font-size: 1.2em; | |
118 | padding: 2em 1em; | |
119 | } | |
120 | ||
121 | .page .announcement a, | |
122 | .page .announcement a:visited, | |
123 | .page .announcement a:hover { | |
124 | color: #000000; | |
125 | border-bottom: 1px solid #888888; | |
126 | } | |
127 | ||
128 | .light-off:checked ~ .page .announcement a, | |
129 | .light-off:checked ~ .page .announcement a:visited, | |
130 | .light-off:checked ~ .page .announcement a:hover { | |
131 | color: #ffffff; | |
132 | border-bottom: 1px solid #888888; | |
133 | } | |
134 | ||
3b86855a | 135 | .clear { clear: both; } |
2c35d3a8 | 136 | |
3b86855a | 137 | #hello { float: left; line-height: 50px; } |
2c35d3a8 | 138 | |
3b86855a AB |
139 | #aminb { font-size: 0.9em; } |
140 | ||
141 | header, | |
142 | footer { | |
2c35d3a8 | 143 | color: #888888; |
3b86855a | 144 | padding: 1em; |
2c35d3a8 | 145 | margin: 0 auto; |
3b86855a | 146 | max-width: 34em; |
2c35d3a8 AB |
147 | } |
148 | ||
3b86855a AB |
149 | header { padding: 2em 1em 0em 1em; } |
150 | ||
151 | header h2 { display: inline; } | |
2c35d3a8 | 152 | |
3b86855a AB |
153 | header a { border: none !important; color: #888 !important; } |
154 | ||
155 | header h2 a { color: #3a89c9 !important; } | |
156 | ||
157 | header .bar { | |
158 | color: #ccc; | |
159 | font-size: 12pt; | |
160 | vertical-align: bottom; | |
161 | padding-left: 1px; | |
162 | padding-right: 1px; | |
2c35d3a8 AB |
163 | } |
164 | ||
3b86855a AB |
165 | footer a { |
166 | color: #888888 !important; | |
167 | border-bottom: 1px solid #cccccc !important; | |
2c35d3a8 AB |
168 | } |
169 | ||
170 | ||
171 | ||
172 | .article { | |
2c35d3a8 AB |
173 | line-height: 1.6em; |
174 | margin: 0 auto; | |
3b86855a AB |
175 | padding: 1em; |
176 | max-width: 34em; | |
2c35d3a8 AB |
177 | } |
178 | ||
179 | .article h1, | |
180 | .article h2 { | |
181 | line-height: 1em; | |
182 | font-weight: 700; | |
183 | letter-spacing: -0.03em; | |
184 | word-spacing: -0.03em; | |
185 | } | |
186 | ||
187 | .article h1 { | |
3b86855a | 188 | font-size: 1.6em; |
2c35d3a8 AB |
189 | } |
190 | ||
191 | .article h2 { | |
192 | font-size: 1.2em; | |
3b86855a | 193 | padding: 0.25em 0; |
2c35d3a8 AB |
194 | } |
195 | ||
196 | .article p { | |
197 | margin: 1em 0; | |
198 | } | |
199 | ||
2c35d3a8 AB |
200 | .article p img { |
201 | margin: 1em 0; | |
202 | width: 100%;} | |
203 | ||
204 | .article hr { | |
205 | border: none; | |
206 | margin-top: 4em; | |
207 | } | |
208 | .article ul { | |
209 | padding: 0; | |
3b86855a | 210 | margin: 0.3em 0 0 1.6em; |
2c35d3a8 AB |
211 | } |
212 | ||
213 | .article ul li { | |
3b86855a | 214 | /* list-style: none; */ |
2c35d3a8 AB |
215 | } |
216 | ||
217 | .article li { | |
218 | margin: 0.5em 0; | |
219 | } | |
220 | ||
221 | .article table { | |
222 | width: 100%; | |
223 | margin: 2em 0; | |
224 | } | |
225 | ||
226 | .article li em a { | |
227 | font-size: 0.7em; | |
228 | border-radius: 0.3em; | |
229 | padding: 0.3em; | |
230 | vertical-align: middle; | |
231 | margin: 0 0.5em; | |
232 | font-style: normal; | |
233 | } | |
234 | ||
235 | .article li em a { | |
236 | border: 1px solid #a5ceff; | |
237 | } | |
238 | ||
239 | .article li em a:visited { | |
240 | border: 1px solid #888888; | |
241 | } | |
242 | ||
243 | .article li em a:hover { | |
244 | border: 1px solid #357edd; | |
245 | } | |
246 | ||
247 | .light-off:checked ~ .page li em a { | |
248 | color: #aaaa96; | |
249 | border: 1px solid #aaaa96; | |
250 | } | |
251 | ||
252 | .light-off:checked ~ .page li em a:visited { | |
253 | color: #888888; | |
254 | border: 1px solid #888888; | |
255 | } | |
256 | ||
257 | .light-off:checked ~ .page li em a:hover { | |
258 | color: #ddddb6; | |
259 | border: 1px solid #ddddb6; | |
260 | } | |
261 | ||
262 | ||
263 | ||
264 | .article .picture a, | |
265 | .article .quote a, | |
266 | .light-off:checked ~ .page .picture a, | |
267 | .light-off:checked ~ .page .quote a { | |
268 | border: 0; | |
269 | } | |
270 | ||
271 | .article .picture__avatar { | |
272 | margin: 0; | |
3b86855a AB |
273 | height: 64px; |
274 | width: 64px; | |
275 | border-radius: 50%; | |
276 | float: right; | |
277 | } | |
278 | ||
279 | @media only screen and (min-width: 570px) { | |
280 | .picture__avatar { | |
281 | margin-right: 3em !important; | |
282 | } | |
2c35d3a8 AB |
283 | } |
284 | ||
285 | .article .quote { | |
286 | padding-bottom: 0.4em; | |
287 | } | |
288 | ||
289 | .article .quote__avatar { | |
290 | height: 2em; | |
291 | width: 2em; | |
292 | border: 1px solid #888888; | |
293 | border-radius: 2em; | |
294 | margin: 0 0.4em 0 0; vertical-align: middle; | |
295 | } | |
296 | ||
297 | .article .quote__name, | |
298 | .article .quote__text { | |
299 | vertical-align: middle; | |
300 | font-style: italic; | |
301 | } | |
302 | ||
303 | ||
3b86855a AB |
304 | .article code { |
305 | background-color: #f5f5f5; | |
306 | padding: 1px 3px; | |
307 | } | |
2c35d3a8 AB |
308 | |
309 | .article code, | |
310 | .article pre { | |
3b86855a | 311 | font-family: "DejaVu Sans Mono", monospace; |
2c35d3a8 AB |
312 | font-size: 0.9em; |
313 | line-height: 1.5em; | |
314 | margin: 0; | |
315 | } | |
316 | ||
317 | .article pre { | |
3b86855a | 318 | background-color: #f5f5f5; |
2c35d3a8 AB |
319 | color: #232323; |
320 | margin: 0 -1em; | |
321 | overflow-x: auto; | |
322 | padding: 1em; | |
323 | word-wrap: normal; | |
324 | } | |
325 | ||
326 | .light-off:checked ~ .page .article pre { | |
327 | background-color: #000000; | |
328 | color: #cccccc; | |
329 | } |