]>
Witch of Git - web/blog/blob - _includes/style.css
2 * { box-sizing: border-box
; }
5 html
{ font-size: 1.4em; line-height: 1.5; color: #444; font-family: "Palatino Linotype", Palatino
, serif
; }
6 body
{ padding: 1em; max-width: 700px; margin: 0 auto
; min-height: 100vh; }
7 header
{ margin-bottom: 1em; }
8 footer
{ margin-top: 1em; }
12 h1
, h2
, h3
, h4
, h5
, h6
{ margin-bottom: 0; }
13 code
{ font-size: 1.2em; word-spacing: -0.2em; }
15 /* leaving out because Safari doesn't do hyphens well */
16 /* text-align: justify; */
17 /* Firefox's & Chrome's hyphenation is too agressive for no justification,
18 Safari's is too relaxed for justification enabled. */
20 /* Currently only supported on Safari. Looks nice tho. */
21 hanging-punctuation: first allow-end last
;
24 .c-sun { color: #f78123; }
25 .dec-none { text-decoration: none
; }
26 @media (min-width: 825px) { .header-anchor
{ margin-left: -1em; } }
29 border-left: solid
10px #bbb;
36 /* @TODO: Make this width managing simpler? */
37 img
{ max-width: 800px; border-radius: 4px; background: #f5f2f0; }
38 @media (max-width: 825px) { img
{ max-width: calc
(100vw - 1em); } }
40 figcaption
> :first-child
, aside
> :first-child
{ margin-top: 0; }
41 figcaption
> :last-child
, aside
> :first-child
{ margin-bottom: 0; }
42 figcaption
{ font-style: italic
; }
43 .youtube > iframe { border-radius: 4px; }
46 border: 1px solid black
;
51 aside
.warning
{ background: #ffecbf; }
55 .row { display: flex
; flex-direction: row
; }
56 .col { display: flex
; flex-direction: column
; }
57 .hgroup { display: flex
; flex-direction: row
; }
58 @media (max-width: 500px) { .hgroup
{ flex-direction: column
; } }
59 .row.hcenter { justify-content: center
; }
60 .col.hcenter { align-items: center
; }
61 .rigid { flex-shrink: 0; }
62 .baseline { align-items: baseline
; }
63 .spacer { flex-grow: 1; }
64 .ls-none { list-style: none
; padding: 0; margin: 0; }
65 .im-icon { background: none
; width: 2em; }
66 .fwrap { flex-wrap: wrap
; }
67 .hov-fade:hover { filter: invert
(50%); }
68 .wide-1, .row > .block-1 { display: inline-block
; width: 1em; }
69 .tall-1, .col > .block-1 { display: inline-block
; height: 1em; }
71 /* Barebones un-highlighted code blocks */
74 width: calc
(100% + 8em);
76 display: inline-block
;
79 box-sizing: border-box
;
85 @media (max-width: 825px) {
86 pre
> code
{ margin: 0 -1em; width: calc
(100% + 2em); }
89 .animated-decoration-alt { display: none
; }
90 @media (prefers-reduced-motion: reduce
) {
91 img
.animated-decoration-alt
{ display: inline
; }
92 .animated-decoration { display: none
; }