1 html,
2 body {
3 color:#3f3b33;
4 font-family:"Iosevka Aile", "Dejavu Sans", sans-serif;
5 background-color:#292929;
6 font-size:1.1em;
7 margin:0px;
8 padding:0px;
9 }
10
11 a,
12 a:visited {
13 color:#107d8e;
14 }
15
16
17 h1,
18 h1.title {
19 font-size:2.5em;
20 font-weight:300;
21 display:block;
22 border:none;
23 border-bottom:1px solid #aaa;
24 padding-left:0px;
25 }
26
27 h1 a:link,
28 h1 a:visited {
29 color:#444;
30 }
31
32
33 h2, h3, h4, h5, h6 {
34 font-weight:300;
35 font-family:"Dejavu Sans", sans-serif;
36 word-spacing:-.05em;
37 letter-spacing:-.02em;
38 padding-left:0px;
39 }
40
41 h2 {
42 color:#107d8e;
43 font-size:2.2em;
44 }
45
46 h3 {
47 color:#207d8e;
48 font-size:1.8em;
49 }
50
51 h4 {
52 color:#207d8e;
53 font-size:1.5em;
54 border:none;
55 }
56
57 h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
58 border-left:3px solid #55aacc;
59 padding-left:3px;
60 font-weight:400;
61 border-radius:4px;
62 }
63
64 .index h2:hover {
65 border:none;
66 padding-left:0px;
67 font-weight:300;
68 border-radius:0px;
69 }
70
71
72 h2 a.link,
73 h3 a.link,
74 h4 a.link,
75 h5 a.link,
76 h6 a.link {
77 text-decoration:none;
78 }
79
80
81
82 span.line-through,
83 .strikethrough,
84 .strike {
85 text-decoration: line-through;
86 }
87
88
89 span.monospaced {
90 font-family:monospace;
91 background-color:#e0e0e0;
92 padding:2px;
93 border:1px solid #bbb;
94 border-radius:3px;
95 }
96
97
98 /**
99 * Text Styles
100 */
101 span.green {
102 color:#66dd66;
103 }
104
105 span.blue {
106 color:#6666dd;
107 }
108
109 span.red {
110 color:#dd6666;
111 }
112
113 span.yellow {
114 color:#dddd66;
115 }
116
117
118 /**
119 * Navbar Styles
120 */
121 div#nav-header {
122 background-color:#333;
123 background:linear-gradient(#0000, #0000, #0000, #0000, #221), #333;
124 box-shadow:0px 0px 4px #4f4b43;
125 color:#eee;
126 display:flex;
127 }
128
129 div#nav-header div#nav-header-logo {
130 width:30%;
131 }
132
133 /**
134 * Nav header link bar
135 */
136 div#nav-header-links {
137 border:none;
138 padding:2px 1px 7px 0px;
139 text-align:right;
140 vertical-align:top;
141 width:70%;
142 }
143
144 div#nav-header-links ul {
145 padding:4px;
146 margin:0px;
147 }
148
149 div#nav-header-links ul li {
150 list-style:none;
151 display:inline;
152 padding:0px 7px;
153 border-right:1px solid #999;
154 }
155
156 div#nav-header-links ul li:last-child {
157 border:none;
158 }
159
160 div#nav-header-links a,
161 div#nav-header-links a:link,
162 div#nav-header-links a:visited {
163 color:#dff;
164 text-decoration:none;
165 }
166
167 div#nav-header-links a:hover {
168 text-decoration:underline;
169 }
170
171
172 /**
173 * Body Styles
174 */
175 div#body-wrapper {
176 background-color:#eee;
177 padding:7px 0px 20px 0px;
178 }
179
180
181 div#body-content {
182 background:none;
183 padding:10px;
184 margin-left:auto;
185 margin-right:auto;
186 max-width:70em;
187 }
188
189
190 div.quoteblock,
191 pre {
192 background-color:#f9f9f9;
193 border:1px dotted #999;
194 padding:5px 15px 7px 15px;
195 border-radius:5px;
196 margin:5px 0px;
197 color:#555;
198 font-size:1.0em;
199 display:inline-block;
200 }
201
202 pre {
203 display:block;
204 overflow:auto;
205 }
206
207 blockquote {
208 background-color:#eee;
209 padding:5px;
210 border:1px dotted #aaa;
211 border-radius:4px;
212 margin-top:10px;
213 margin-bottom:10px;
214 }
215
216 div.index-post {
217 width:98%;
218 margin: 10px auto 10px auto;
219 border:1px solid #ccc;
220 background-color:#e5e5e5;
221 border-radius:5px;
222 padding:10px;
223 }
224
225 div.index-post .readmore {
226 display:block;
227 width:98%;
228 margin-left:0px;
229 margin-right:auto;
230 text-align:right;
231 font-size:.9em;
232 }
233
234 div#footer {
235 background:none;
236 background-color:#292929;
237 color:#eee;
238 margin:5px 0px 0px 0px;
239 width:100%;
240 text-align:center;
241 font-size:.9em;
242 padding:20px 0px;
243 }
244
245 div#footer a,
246 div#footer a:visited {
247 color:#40adbe;
248 }
249
250 div#left-navigation {
251 margin-left:176px;
252 }
253
254 div#p-logo {
255 height:85px;
256 position:relative;
257 top:5px;
258 left:0px;
259 }
260
261 div#p-logo a {
262 height:65px;
263 width:140px;
264 }
265
266
267 div#p-personal { background:none; }
268
269 div#p-personal a:link,
270 div#p-personal a:visited {
271 color:#eee;
272 }
273
274
275 /**
276 * Table styles
277 */
278 table { border-collapse: collapse; }
279
280 table td, table th {
281 border: 1px solid #999;
282 padding:1px 5px;
283 background-color:#f5f5f5;
284 }
285
286
287 /**
288 * Definition lists
289 */
290 dl dt {
291 color:#333;
292 font-size:1.04em;
293 font-weight:800;
294 padding-top:5px;
295 line-height:.9em;
296 }
297
298 dl dd p {
299 line-height:.5em;
300 color:#555;
301 }
302
303 dl {
304 padding:10px 0px;
305 }
306
307 div.terminal div {
308 display:block;
309 padding:5px;
310 margin:5px 0px;
311 background-color:#222;
312 border:1px solid #999;
313 border-radius:5px;
314 overflow:auto;
315 }
316
317 div.terminal div pre,
318 div.terminal div div.paragraph,
319 div.terminal div div.paragraph p {
320 font-family: monospace;
321 background:none;
322 padding:0px;
323 margin:0px 0px;
324 border:none;
325 overflow:auto;
326 color:#ddd;
327 }
328
329 ul li p {
330 line-height:1.2em;
331 margin-top:5px;
332 margin-bottom:5px;
333 }
334
335 /*
336 * Header sections
337 */
338
339 /*
340 * Zeroth level (page label)
341 */
342 div.sect1.index {
343 width:100%;
344 }
345
346 /*
347 * First level (section headers on index page)
348 */
349 div.index.sect1 {
350 background-color:#e7e7e7;
351 padding:0px;
352 border:1px solid #ccc;
353 width: 100%;
354 border-radius:4px;
355 margin:10px 0px 10px 0px;
356 }
357
358 div.index.sect1 h2 {
359 padding:3px 0px 3px 7px;
360 margin:0px;
361 background-color:#dadada;
362 border-bottom:2px solid #aaa;
363 color:#333;
364 font-size:1.5em;
365 font-weight:300;
366 }
367
368 div.index.sect1 div.ulist {
369 padding-left:0px;
370 }
371
372 div.index.sect1 div.ulist ul {
373 list-style-type:none;
374 padding-left:7px;
375 margin-left:0px;
376 }
377
378 div.index.sect1 div.ulist ul li {
379 border-left:4px solid #bbb;
380 padding-left:5px;
381 margin-left:0px;
382 }
383
384 div.index.sect1 div.ulist ul li:hover {
385 border-left:4px solid #cc7733;
386 }
387
388
389
390 /*
391 * Second-level nested header sections
392 */
393 div.index.sect1 div.sect2 {
394 padding-left:5px;
395 width: 96%;
396 margin: 10px auto 10px auto;
397 }
398
399 div.index.sect1 div.sect2 h3 {
400 padding:7px 0px 2px 0px;
401 margin:0px;
402 }
403
404 div.index.sect1 div.sect2 div.ulist {
405 padding-left:0px;
406 }
407
408 div.index.sect1 div.sect2 div.ulist ul {
409 list-style-type:none;
410 padding-left:2px;
411 margin-left:0px;
412 }
413
414 div.index.sect1 div.sect2 div.ulist ul li {
415 border-left:4px solid #bbb;
416 padding-left:5px;
417 margin-left:0px;
418 }
419
420
421 div.datelastedit p {
422 margin-top:2em;
423 margin-bottom:0px;
424 color:#888;
425 font-style:italic;
426 text-align:right;
427 }
428
429 div.center,
430 .align-center,
431 p.center {
432 text-align:center;
433 margin-left:auto;
434 margin-right:auto;
435 }
436
437 img {
438 max-width: 100%;
439 }
440
441 img.align-center {
442 display:block;
443 }
444
445 div.title {
446 font-weight:700;
447 margin-top:1.5em;
448 }
449
450 img#piwik-img {
451 display:none;
452 }
453
454
455 /**
456 .grid-container-left {
457 display:grid;
458 grid-template-columns:39% 60%;
459 grid-column-gap: 15px;
460 }
461
462 .grid-container-right {
463 display:grid;
464 grid-template-columns:60% 39%;
465 grid-column-gap: 15px;
466 }
467 **/
468
469
470 span.docutils.literal {
471 font-family:monospace;
472 border:1px dotted #aaa;
473 border-radius:3px;
474 background-color:#e0e0e0;
475 color:#555;
476 }
477
478 /**
479 * Overrides for portrait mode (EG: a phone or tablet)
480 */
481 /* Smaller mobile displays with a lower resolution */
482 @media only screen and (orientation: portrait) and (max-width: 850px) {
483 /*html, body { font-size: 15px; }*/
484 /*div#nav-header, .grid-container-left, .grid-container-right {
485 grid-template-columns:100%;
486 }*/
487 }
488
489 /* More modern mobile displays with a higher resolution */
490 @media screen and (orientation: portrait) {
491 html, body { font-size: 1em; }
492 div#nav-header {
493 position:fixed;
494 width:100%;
495 font-size:.9em;
496 }
497 div#nav-header div#nav-header-logo img {
498 padding:4px;
499 }
500 div#nav-header div#nav-header-logo {
501 display:inline-block;
502 }
503 div#nav-header-links {
504 display:inline-block;
505 }
506 div#body-wrapper {
507 padding-top:30px;
508 }
509 }
|
