1 | @import 'normalize'; |
2 | @import 'fonts'; |
3 | @import 'sizes'; |
4 | @import 'themes/themes'; |
5 |
|
6 |
|
7 | * { |
8 | box-sizing: border-box; |
9 | } |
10 | body { |
11 | display: flex; |
12 | line-height: $line-height; |
13 | padding: 0; |
14 | flex-flow: column; |
15 | min-height: 100%; |
16 | color: var(--text-color); |
17 | overflow-wrap: break-word; |
18 | font-family: "Fira Sans", sans-serif; |
19 | font-size: $base-font-size; |
20 | text-rendering: optimizeLegibility; |
21 | background-color: var(--background-color); |
22 |
|
23 | a { |
24 | color: var(--link-color); |
25 | text-decoration: none; |
26 | &:hover { |
27 | text-decoration: underline; |
28 | } |
29 | &:visited { |
30 | color: var(--link-visited-color); |
31 | } |
32 | } |
33 |
|
34 | @media (max-width: $page-compress-width) { |
35 | font-size: $mobile-font-size; |
36 | } |
37 | } |
38 |
|
39 | @media print { |
40 | * { |
41 | color: #000 !important; |
42 | max-width: 100%; |
43 | box-sizing: border-box !important; |
44 | } |
45 | img.svg.icon { |
46 | filter: none !important; |
47 | } |
48 | a { |
49 | color: #757575 !important; |
50 | } |
51 | div.banner-image { |
52 | display: none; |
53 | } |
54 | div.topbar-container { |
55 | display: none |
56 | } |
57 | .header::before { |
58 | height: 0 !important; |
59 | } |
60 | .content-body { |
61 | h1, h2, h3, h4, h5, h6, p, pre, table, ul, li, ol { |
62 | line-height: normal; |
63 | margin: 0; |
64 | padding: 0; |
65 | } |
66 | } |
67 | .anchor { |
68 | display: none; |
69 | } |
70 | footer { |
71 | display: none; |
72 | } |
73 | } |
74 |
|
75 | div.banner-image { |
76 | width: 100%; |
77 | height: $base-banner-height; |
78 | background-image: url(/static/images/river.jpg); |
79 | background-size: cover; |
80 | background-position: 50% 30%; |
81 | transition: transform 1s linear; |
82 | } |
83 | .topbar-container { |
84 | width: 100%; |
85 | padding: $base-font-size; |
86 | font-family: 'Chivo', sans-serif !important; |
87 | /*position: sticky;*/ |
88 | top: 0; |
89 | background-color: var(--background-color); |
90 | z-index: 10; |
91 | padding-bottom: 0; |
92 | margin-bottom: $base-font-size; |
93 | a, a:visited { |
94 | color: var(--text-color); |
95 | } |
96 | ul.topbar { |
97 | display: flex; |
98 | flex-wrap: wrap; |
99 | max-width: $topbar-max-width; |
100 | margin: 0 auto; |
101 | padding: 5px 0; |
102 | line-height: 1.15; |
103 | list-style: none; |
104 | border-bottom: 2px solid var(--border-color); |
105 |
|
106 | div.wrap-group { |
107 | @media (max-width: $topbar-reduce-width) { |
108 | margin-left: 0; |
109 | margin-right: $topbar-font-size-reduced; |
110 | display: inline-block; |
111 | } |
112 | } |
113 |
|
114 | li { |
115 | display: inline-block; |
116 | white-space: nowrap; |
117 | font-size: $topbar-font-size; |
118 | &.hfill { |
119 | flex: 1; |
120 | @media (max-width: $topbar-reduce-width) { |
121 | flex: none; |
122 | } |
123 | } |
124 | &.title { |
125 | margin-right: $topbar-font-size; |
126 | } |
127 | @media (max-width: $topbar-reduce-width) { |
128 | font-size: $topbar-font-size-reduced; |
129 | padding: 4px 0; |
130 | vertical-align: middle; |
131 | } |
132 | &:not(.hfill):hover { |
133 | position: relative; |
134 | top: 1px; |
135 | transition: transform 0.3s linear; |
136 | cursor: pointer; |
137 | } |
138 | &:not(.title):not(.hfill):not(:last-of-type) { |
139 | margin-right: $topbar-font-size / 2; |
140 | } |
141 | img { |
142 | display: inline-block; |
143 | height: $topbar-font-size; |
144 | @media (max-width: $topbar-reduce-width) { |
145 | height: $topbar-font-size-reduced; |
146 | } |
147 | vertical-align: middle; |
148 | } |
149 | } |
150 | } |
151 | } |
152 |
|
153 | div.content-container { |
154 | display: flex; |
155 | flex-flow: column; |
156 | flex: 1; |
157 | width: 100%; |
158 | padding: 0 16px; |
159 |
|
160 | div.content-body { |
161 | width: 100%; |
162 | max-width: $page-max-width; |
163 | margin: 0 auto; |
164 |
|
165 | div.blog-metadata, div.blog-listing { |
166 | margin-bottom: 1.5em; |
167 | .title { |
168 | margin: 0 0 0.25em 0; |
169 | line-height: 1.25; |
170 | } |
171 | p { |
172 | margin: 0; |
173 | .readtime { |
174 | margin-left: 0.5em; |
175 | } |
176 | } |
177 | p.description { |
178 | margin-bottom: 0.5em; |
179 | } |
180 | a, a:visited { |
181 | color: var(--text-color); |
182 | &:not(.thumb):hover { |
183 | text-decoration: none; |
184 | border-bottom: 1px solid var(--text-color); |
185 | } |
186 | } |
187 | } |
188 |
|
189 | div.blog-listing { |
190 | display: flex; |
191 | flex: column; |
192 | height: fit-content; |
193 | min-height: 200px; |
194 | border-top: 1px solid var(--border-color); |
195 | padding-top: 1.5em; |
196 | a.blog-banner.thumb { |
197 | height: 100%; |
198 | padding-right: 1em; |
199 | flex: 1; |
200 | div { |
201 | width: 100%; |
202 | min-height: 200px; |
203 | height: 100%; |
204 | background-size: cover; |
205 | background-position: center; |
206 | } |
207 | } |
208 | .blog-listing-container { |
209 | flex: 2; |
210 | } |
211 | @media (max-width: $page-compress-width) { |
212 | display: block; |
213 | a.blog-banner.thumb { |
214 | height: 200px; |
215 | width: 100%; |
216 | padding-right: 0; |
217 | } |
218 | .blog-listing-container { |
219 | margin-top: 1em; |
220 | margin-bottom: 2em; |
221 | } |
222 | } |
223 | } |
224 |
|
225 | div.blog-content { |
226 | margin: 1em 0; |
227 | border-bottom: 1px solid var(--border-color); |
228 | } |
229 |
|
230 | div.blog-end { |
231 | p { |
232 | margin-top: 1em; |
233 | } |
234 | } |
235 |
|
236 | iframe { |
237 | width: 100%; |
238 | height: 600px; |
239 | border: 1px solid var(--border-color); |
240 | margin-bottom: 1em; |
241 | } |
242 |
|
243 | hr { |
244 | border: 1px solid var(--border-color); |
245 | margin-bottom: 1.5em; |
246 | } |
247 | h1, h2, h3, h4, h5, h6, p, pre { |
248 | padding: 0; |
249 | word-wrap: break-word; |
250 | } |
251 | p, pre { |
252 | line-height: 1.6; |
253 | } |
254 |
|
255 | h1, h2, h3, h4, h5, h6 { |
256 | margin: 1em 0 0.5em 0; |
257 | line-height: 1.25; |
258 | &:first-child { |
259 | margin: 0; |
260 | } |
261 | &.header { |
262 | position: relative; |
263 | scroll-margin-top: 1em; |
264 | .anchor { |
265 | opacity: 0.3; |
266 | position: absolute; |
267 | left: -$base-font-size*2; |
268 | top: calc(50% - #{$base-font-size/2}); |
269 | .svg { |
270 | vertical-align: middle; |
271 | width: $base-font-size; |
272 | height: $base-font-size; |
273 | } |
274 | &:hover { |
275 | opacity: 0.6; |
276 | } |
277 | @media (max-width: $page-compress-width + $base-font-size*8) { |
278 | position: unset; |
279 | margin-left: 6px; |
280 | } |
281 | } |
282 | } |
283 | } |
284 |
|
285 | p { |
286 | margin: 1em 0 1em 0; |
287 | &:first-of-type { |
288 | margin-top: 0; |
289 | } |
290 | } |
291 |
|
292 | blockquote { |
293 | padding: 1em; |
294 | margin: 0.5em 0; |
295 | border-left: 8px solid var(--border-color); |
296 | background-color: var(--blockquote-background-color); |
297 | p:last-of-type { |
298 | margin-bottom: 0; |
299 | } |
300 | } |
301 |
|
302 | ul, ol { |
303 | padding-left: 0; |
304 | display: block; |
305 | li { |
306 | position: relative; |
307 | margin: 0.5em 0; |
308 | margin-left: 0; |
309 | left: 1.5em; |
310 | margin-right: 1.5em; |
311 |
|
312 | &::marker { |
313 | color: var(--list-bullet-color); |
314 | } |
315 | } |
316 | } |
317 |
|
318 | div.codehilite { |
319 | border: 1px solid var(--border-color); |
320 | border-radius: 4px; |
321 | padding: 0; |
322 | margin: 0 0 1em 0; |
323 | background-color: var(--code-background-color); |
324 | pre { |
325 | padding: 1em; |
326 | margin: 0; |
327 | overflow-x: auto; |
328 | font-size: 0.8em; |
329 | } |
330 | } |
331 |
|
332 | code { |
333 | font-family: "Fira Mono", monospace; |
334 | } |
335 |
|
336 | code:not(.codehilite *) { |
337 | border: 1px solid var(--border-color); |
338 | border-radius: 4px; |
339 | padding: 0 2px; |
340 | background-color: var(--code-background-color); |
341 | color: var(--code-text-color); |
342 | font-size: 0.85em; |
343 | } |
344 |
|
345 | img, video { |
346 | position: relative; |
347 | z-index: 3; |
348 | max-width: 100%; |
349 | &.inline.svg { |
350 | height: 1em; |
351 | vertical-align: middle; |
352 | display: inline-block; |
353 | top: -1.5px; |
354 | } |
355 | &.small { |
356 | max-height: $content-image-small-height; |
357 | } |
358 | &.medium { |
359 | max-height: $content-image-medium-height; |
360 | } |
361 | } |
362 |
|
363 | table:not(#commento table) { |
364 | table-layout: auto; |
365 | max-width: 100%; |
366 | overflow-x: auto; |
367 | width: 100%; |
368 | border-spacing: 0; |
369 | border: 1px solid var(--border-color); |
370 | border-radius: 4px; |
371 | margin-bottom: 1em; |
372 | font-size: inherit; |
373 | thead tr { |
374 | font-weight: bolder; |
375 | background-color: var(--code-background-color); |
376 | td:first-child { |
377 | border-top-left-radius: 4px; |
378 | } |
379 | td:last-child { |
380 | border-top-right-radius: 4px; |
381 | } |
382 | th { |
383 | border-bottom: 1px solid var(--border-color); |
384 | } |
385 | } |
386 | tr { |
387 | //&:first-child, th { |
388 | // font-weight: bolder; |
389 | // background-color: var(--code-background-color); |
390 | // td:first-child { |
391 | // border-top-left-radius: 4px; |
392 | // } |
393 | // td:last-child { |
394 | // border-top-right-radius: 4px; |
395 | // } |
396 | //} |
397 | &:not(:last-child) td { |
398 | border-bottom: 1px solid var(--border-color); |
399 | } |
400 | } |
401 | td, th { |
402 | vertical-align: top; |
403 | padding: 8px; |
404 | margin: 0; |
405 | &:not(:last-child) { |
406 | border-right: 1px solid var(--border-color); |
407 | } |
408 | *:first-child { |
409 | margin-top: unset; |
410 | } |
411 | *:last-child { |
412 | margin-bottom: unset; |
413 | } |
414 | } |
415 | } |
416 |
|
417 | iframe.full { |
418 | width: calc(100% - #{$content-image-float-offset*2 + $base-font-size*2}); |
419 | margin-left: $content-image-float-offset; |
420 | @media (max-width: $figure-compress-width) { |
421 | & { |
422 | width: 100%; |
423 | margin-left: 0; |
424 | } |
425 | } |
426 | } |
427 | figure.heading-aligned { |
428 | margin-top: 1em !important; |
429 | } |
430 | figure { |
431 | display: table; |
432 | margin: 0; |
433 | &.float-left { |
434 | float: left; |
435 | position: relative; |
436 | left: $content-image-float-offset; |
437 | margin: 0 $content-image-float-offset+$base-font-size 8px 0; |
438 | } |
439 | &.float-right { |
440 | float: right; |
441 | position: relative; |
442 | right: $content-image-float-offset; |
443 | margin: 0 0 8px $content-image-float-offset+$base-font-size; |
444 | } |
445 | &.full { |
446 | display: block; |
447 | width: 100%; |
448 | img, video { |
449 | display: block; |
450 | margin: 0 auto; |
451 | } |
452 | figcaption { |
453 | display: block; |
454 | } |
455 |
|
456 | &.double { |
457 | display: flex; |
458 | flex-wrap: wrap; |
459 | flex-direction: row; |
460 | flex: 50%; |
461 | max-width: 100%; |
462 | img, video { |
463 | padding-bottom: 0.5em; |
464 | display: inline; |
465 | width: 50%; |
466 | object-fit: cover; |
467 | &:nth-child(2n), &:nth-child(2n) { |
468 | padding-left: 0.5em; |
469 | float: right; |
470 | } |
471 | } |
472 | } |
473 | } |
474 | @media (max-width: $page-compress-width) { |
475 | &:not(.full) { |
476 | //display: flex; |
477 | //flex-direction: column; |
478 | //max-width: 100% !important; |
479 | //float: none; |
480 | //width: fit-content; |
481 | //align-items: center; |
482 | //margin: 0 auto 8px auto !important; |
483 | img, video { |
484 | display: block; |
485 | max-width: 100%; |
486 | max-height: 30vh; |
487 | margin: 0 auto; |
488 | } |
489 | figcaption { |
490 | display: block; |
491 | margin: 1em auto 0 auto; |
492 | } |
493 | } |
494 | } |
495 | @media (max-width: $figure-compress-width) { |
496 | &:not(.full) { |
497 | max-width: 50%; |
498 | } |
499 | &.float-left { |
500 | position: inherit; |
501 | left: 0; |
502 | margin: 0 16px 8px 0; |
503 | } |
504 | &.float-right { |
505 | position: inherit; |
506 | right: 0; |
507 | margin: 0 0 8px 16px; |
508 | } |
509 | } |
510 | figcaption { |
511 | display: table-caption; |
512 | caption-side: bottom; |
513 | margin-top: 1em; |
514 | text-align: center; |
515 | width: 100%; |
516 | } |
517 | } |
518 |
|
519 | .gallery { |
520 | width: 100%; |
521 | figure { |
522 | display: none; |
523 | max-width: 700px; |
524 | margin: 0 auto; |
525 | justify-content: center; |
526 | img, video { |
527 | display: block; |
528 | margin: 0 auto; |
529 | } |
530 | figcaption { |
531 | display: inherit; |
532 | } |
533 | &.active { |
534 | display: inherit !important; |
535 | } |
536 | } |
537 | .gallery-thumbnails { |
538 | margin: 1em 0; |
539 | display: flex; |
540 | justify-content: center; |
541 | flex-wrap: wrap; |
542 | .gallery-thumbnail { |
543 | border: none; |
544 | user-select: none; |
545 | flex: none; |
546 | flex-wrap: wrap; |
547 | width: 100px; |
548 | height: 65px; |
549 | margin: 0 0.25em 0.5em 0.25em; |
550 | background-size: cover; |
551 | background-position: center; |
552 | opacity: 75%; |
553 | &:hover { |
554 | cursor: pointer; |
555 | } |
556 | &.active { |
557 | opacity: inherit !important; |
558 | } |
559 | } |
560 | } |
561 | } |
562 | } |
563 |
|
564 | figcaption { |
565 | font-size: $figure-font-size; |
566 | margin-top: 4px; |
567 | color: var(--caption-color); |
568 | } |
569 |
|
570 | div.vfill { |
571 | flex: 1; |
572 | } |
573 |
|
574 | footer { |
575 | max-width: $page-max-width; |
576 | width: 100%; |
577 | margin: 64px auto 32px auto; |
578 | text-align: center; |
579 | border-top: 2px solid var(--border-color); |
580 | padding-top: 16px; |
581 | &>p { |
582 | margin: 0; |
583 | } |
584 | } |
585 | } |
586 |
|