diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 418 |
1 files changed, 418 insertions, 0 deletions
diff --git a/style.css b/style.css new file mode 100644 index 0000000..e16ea88 --- /dev/null +++ b/style.css @@ -0,0 +1,418 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-kerning: auto; +} + +body { + font: 16px / 1.44 Lucida Grande, system-ui, "Segoe UI", sans-serif; + position: relative; + max-width: 45em; /* column width */ + margin: 0 auto; +} + +pre { + background: rgba(255,255,255,0.1); + border: 1px solid; +} + +/* Show & hide sections */ + +section, section:target ~ section:last-of-type { + height: 0; + overflow: hidden; + padding: 0; +} + +section:target, section:last-of-type { + height: auto; + overflow: visible; + padding: calc(5vw + 2.6em) 4vw 1.6em; +} + +section:focus { + outline: 0; +} + +/* Webkit fix for overflowing text? */ + +section { + overflow-wrap: break-word; + width: 100%; +} + +section .posted-on { + display: block; + font-size: 80%; + margin-bottom: -0.8em; + padding-top: 1em; +} + +/* Vertical spacing */ + +section * + * { + margin-top: .7em; +} + +/* Header */ + +header { + padding: 5vw 4vw 0 4vw; + position: absolute; + width: 100%; + z-index: 1; +} + +/* Footer */ + +footer { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 1em 4vw 5vw 4vw; +} + +footer .footer-links { + display: block; + width: 100%; +} + +footer .footer-links a { + display: inline-block; +} + +footer .footer-links span.divider { + display: inline-block; + margin: 0 5px; +} +footer .footer-links span.divider:last-of-type { + display: none; +} + +/* Stop the homepage content from appearing as a footer link */ +footer .footer-links a.home-content, footer .footer-links a.home-content + span.divider { + display: none; +} + +footer * + * { + margin-top: 0; +} + +/* Table of contents */ + +ul.toc { + overflow: hidden; +} + +ul.toc * + * { + margin: 0; +} + +ul.toc li { + line-height:1.5; + position: relative; + display: flex; + align-items: flex-end; + margin: 0; +} + +ul.toc li a { + flex: 1; +} + +ul.toc li a span { + padding-right: .3em; +} + +ul.toc li time { + font-variant-numeric: tabular-nums; + padding-left:.3em; + z-index: 1; +} + +ul.toc li:after { + width: 100%; + font-size: .55em; + position: absolute; + bottom: .3em; + white-space: nowrap; + opacity: 0.3; + pointer-events: none; + content: + ' . . . . . . . . . . . . . . . . . . . . . .' + ' . . . . . . . . . . . . . . . . . . . . . .' + ' . . . . . . . . . . . . . . . . . . . . . .' + ' . . . . . . . . . . . . . . . . . . . . . .' + ' . . . . . . . . . . . . . . . . . . . . . .' + ' . . . . . . . . . . . . . . . . . . . . . .'; +} + +/* General */ + +a { + text-decoration: none; + overflow-wrap: break-word; +} + +@media (hover: hover) and (pointer: fine) { + a:hover {text-decoration: underline;} +} + +a[href*="//"]:after { + font-size: .65em; + content: "\2197"; + display: inline-block; +} + +a[href*="//"]:hover:after { + color: inherit; +} + +/* Headings */ + +header h1 { + margin-bottom: 1em; +} +header h1 a { + font-weight: normal; + display: block; +} + +section h1 { + font-size: 1.4em; + line-height:1.5; + padding-top: 0; +} + +header h1, h2, h3, h4, strong, b, dt { + font-size: 1em; +} + +* + h2, * + h3, * + h4 { + margin-top: 1.4em; +} + +h2.cute, h3 { + text-transform: uppercase; + letter-spacing: .06em; + font-size: .9em; + font-weight: 400; +} + +/* Lists */ + +li, dd { + margin-left: 1.5em; +} + +li + li, li ol, li ul { + margin-top: .1em; +} + +.footnotes li { + margin-top:.5em; + max-width:95%; +} + +/* Images */ + +img { + display: block; + max-width: 100%; + min-height:6em; + height: auto; + position: relative; +} + +img:after { /* style offline images */ + align-content:center; + border:1px dashed; + content: attr(alt); + display: grid; + font-size: .8em; + height: 100%; + left: 0; + position: absolute; + text-align:center; + top: 0; + width: 100%; + z-index: 2; +} + +figure { + padding: 1em; +} + +figcaption, small, .footnotes { + font-size: .865em; +} + +/* Other elements */ + +blockquote { + padding: 0 1em; +} + +cite { + font-style: normal; +} + +abbr[title] { + text-decoration: none; + cursor: help; +} + +a abbr[title] { + cursor: pointer; + color: inherit; +} + +hr { + border: 0; + height: 0; + border-bottom: 1px solid; + opacity: .1; + margin: 1.4em 0; +} + +sup { + line-height: 1; + font-size: .75em; + margin-left: .05em; +} + +code, kbd { + font-family: ui-monospace, SF Mono, SFMono-Regular, Menlo, Andale Mono, monospace; + font-size: .9em; + overflow-wrap: break-word; +} + +kbd { + box-shadow:0 .5px 1px; + border-radius:2px; + padding:.05em .325em; + font-size:.85em; + margin: 0 .1em; +} + +pre { + line-height: 1.55; + overflow: auto; + background: rgba(0,0,0,.03); + padding: .5em .85em .6em .85em; + border-radius: 4px; +} + +pre code { + font-size:.9em; + position: relative; + display:block; + overflow-wrap: normal; +} + +pre code:after { + content: attr(class); + position: absolute; + right: -.6em; + top: -.3em; + text-transform: uppercase; + font-size: .7em; + opacity:.45; +} + +input, select, textarea, button { + font: inherit; + font-size: .85em; + line-height: inherit; + border: 0; + box-shadow: 0 0 .05em; + padding: .2em .4em; + width: 100%; +} + +/* Tables */ + +table { + border-collapse: collapse; + min-width: 100%; + margin: 1em 0; +} + +thead { + text-align: left; + border-bottom: 1px solid; +} + +tr + tr { + border-top: 1px solid; +} + +th, td { + padding: .4em .3em .2em; +} + +/* Disable footnotes #links */ + +sup a { + color: currentColor; + pointer-events: none; +} + +a.footnote-backref { + display: none; +} + +/* Print */ + +@media print { + + header { + position: relative; + } + + section { + height: auto; + overflow: visible; + + page-break-after: always; + page-break-inside: avoid; + break-inside: avoid; + display: block; + padding: 2em 4vw; + } + + section * { + page-break-inside: avoid; + break-inside: avoid; + } + +} + +@media only screen and (max-width: 500px) { + footer .footer-links a { display: block; margin: 0.2em 0; } + footer .footer-links span.divider { display: none; } + blockquote, figure { padding-left: 4vw; padding-right: 4vw; } + ul.toc li { + align-items: flex-start; + flex-direction: column-reverse; + } + ul.toc li a { padding-bottom:1em; } + ul.toc li time { font-size: .8em; padding-left: 0; } + ul.toc li a:after { + height: 0; + overflow: hidden; + position: absolute; + } +} + +@supports (color-scheme: dark light) { + @media screen and (prefers-color-scheme: dark) { + a:link {color: #9e9eff;} + a:visited {color: #d0adf0;} + a:active {color: red;} + } +} |