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