021d73cc8c14623a9f36ea51994385b675cba30d
[~bandali/bndl.org] / styles.css
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 }