/* page layout */ html { max-width: 55em; margin: 0 0 0 auto; } body { position: relative; margin: 8px auto 8px 16px; padding: 5em 1em 0 5em; max-width: 70ch; } @media (max-width: 65ch) { body { padding: 4em 1em 0 4em; } } @media (max-width: 55ch) { body { padding: 3em 1em 0 2.5em; } } @media (max-width: 45ch) { body { padding: 2em 1em 0 1em; } } /* Typography */ body { font-variant-ligatures: common-ligatures; font-variant-numeric: oldstyle-nums; font-family: "Crimson", baskerville, Georgia, serif; line-height: 1.5; font-kerning: normal; hyphens: auto; font-synthesis: none; } :lang(fr), :lang(en) { font-variant-numeric: oldstyle-nums; font-family: "Crimson", baskerville, Georgia, serif; } article:lang(ja), article:lang(zh), article:lang(ko) { font-variant-numeric: lining-nums; font-family: sans-serif; font-variant-caps: normal; } :lang(ko) { word-break: keep-all; } :not(:lang(ko)) { word-break: normal; } h1, article header { font-variant-numeric: lining-nums; hyphens: none; } pre, code { hyphens: none; } h1 { margin-top: 0; line-height: 1; font-size: 2em; letter-spacing: 0.1em; font-variant-caps: small-caps; } h2 { font-size: 1.2em; } p { margin-bottom: 1em; } body:not(:lang(ja)):not(:lang(zh)):not(:lang(ko)) > p:first-of-type::first-letter, article:not(:lang(ja)):not(:lang(zh)):not(:lang(ko)) > p:first-of-type::first-letter { initial-letter: 2; font-weight: bold; font-size: 2em; line-height: 1em; } body:not(:lang(ja)):not(:lang(zh)):not(:lang(ko)) > p:first-of-type::first-line, article:not(:lang(ja)):not(:lang(zh)):not(:lang(ko)) > p:first-of-type::first-line { font-variant-caps: small-caps; } h1 abbr:not(.specificity):not(.specificity):not(.specificity) { font-variant-caps: normal; font-variant-numeric: lining-nums; } abbr:not(:lang(ja)):not(:lang(zh)):not(:lang(ko)), .key-name:not(:lang(ja)):not(:lang(zh)):not(:lang(ko)) { font-variant-numeric: oldstyle-nums; font-variant-caps: all-small-caps; } code:not([data-lang]) { background: lightgray; border: solid gray 0.51px; border-radius: 2px; white-space: pre-wrap; padding: 2px 0.5ch; margin: 0 0.5ch; } .fixme { color: red; background: yellow; text-transform: uppercase; border: dashed orange; } .note { border-left: 2px solid lightgray; padding-left: 1em; padding-left: calc(1em - 2px); } .note:not(:lang(ja)):not(:lang(zh)):not(:lang(ko)) { font-style: italic; } .note:lang(ja), .note:lang(zh), .note:lang(ko) { font-family: serif; font-weight: lighter; } blockquote::before { content: "“"; font-size: 4em; position: absolute; top: 0; left: -1ch; line-height: 1; } blockquote { position:relative; font-size: 0.85em; margin-left: 3em; margin-right: 0; } /* link styling */ a[href] { color: #07f; text-decoration-skip: ink edges; } a:visited { color: #537; } @media print { a[href], a:visited { color: black; text-decoration: none; } } h1 a, a[rel=bookmark] { color: black; text-decoration: none; } h1 a:hover, a[rel=bookmark]:hover { text-decoration: underline; } a[rel=bookmark]::before { float: left; margin-left: -1em; content: "§"; } a[rel=bookmark]:not(:hover)::before { color: lightgrey; } /* list styles */ ul, dl { list-style: none; position: relative; } ul, ol, dl { padding: 0; margin-top: 1em; margin-left: 0; } li ul, li ol, li dl { margin-top: 0; } ul > li, ol >li, dt { padding-left: 1em; margin-left: 1em; } li + li, li + li , dd + dt { margin-top: 0.25em; } dt::before, ul > li::before { float: left; margin-left: -2.5em; height: 20px; width: 20px; content: ""; border: 3px solid gray; border-bottom: 6px solid gray; border-top: 1px solid gray; border-radius: 16px; background: lightgrey; -webkit-transform: translateY(3px) scale(0.3); transform: translateY(3px) scale(0.3); /* drawing at larger scale and then scaling down to work around chrome doing ugly things with borders less than 1px */ margin-top: -5px; page-break-after: avoid; break-after: avoid; } dt:hover::before, ul > li:hover::before { background: white; border-color: lightgrey; -webkit-transform: translateY(1px) scale(0.4); transform: translateY(1px) scale(0.6); } /* Footer layout */ footer { font-size: smaller; margin: 2em 0 2em; } #subscribe a::before, #contact-list a::before { display: inline-block; content: ""; width: 16px; height: 16px; line-height: 0; margin-right: 0.5ch; vertical-align: middle; background-size: contain; } #subscribe { margin: 1em 0; text-align: center; } #subscribe a::before { background-image: url("/assets/feed-icon.svg"); } #contact-list #twitter a::before { background-image: url("/assets/twitter-icon.svg"); } #contact-list #email a::before { background-image: url("/assets/mail-icon.svg"); } #contact-list #github a::before { background-image: url("/assets/github-icon.svg"); } #contact-list { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center; /*fallback if flexbox isn't supported. Has no effect if it is.*/ } #contact-list li { display: inline-block; /*fallback if flexbox isn't supported. Has no effect if it is.*/ margin: 1em auto; white-space: nowrap; flex: 1 0 0; text-align: center; padding: 0 1em; } @supports not (min-width:auto) { /* Chrome supports flexbox but not min-width: auto. * Bail out to the fallback */ #contact-list { display: block; } } #contact-list li::before { content: none; display: none; } footer [rel=license] { text-align: center; display: block; } /* Blog layout */ article header { display: flex; flex-wrap: wrap; align-items: baseline; page-break-inside: avoid; break-inside: avoid; page-break-after: avoid; break-after: avoid; } article header h2 { margin-left: 1em; margin-right: 0.5em; flex: 1; text-wrap: balance; } article header time { color: grey; margin-right: 1em; font-size: 0.7em; wrap-inside: avoid; } article { border-top: solid lightgrey 1px; padding: 0 1em 2em; page-break-after: always; break-after: page; box-decoration-break: slice; } article:last-of-type { border-bottom: solid lightgrey 1px; page-break-after: auto; break-after: auto; } /* Navigation */ body > header { display: contents; } nav { position: absolute; top: 1ch; right: 1ch; line-height: 1; } nav a { display: inline-block; padding: 0.5em 1em; font-variant: small-caps } nav a:hover, nav a:active { background: lightgray; } @supports (writing-mode: sideways-lr) or ((writing-mode: vertical-rl) and (transform: rotate(180deg))) { @supports not (writing-mode: sideways-lr) { nav { writing-mode: vertical-rl; transform: rotate(180deg); } } nav { writing-mode: sideways-lr; float: left; margin-top: -1em; margin-left: -3em; position: static; position: sticky; right: auto; left: 0; top: 0; } nav a { padding: 1em 0.5em; } } #pagination { margin: 1em 0; display: flex; flex-wrap: wrap; justify-items: space-between; } #pagination a { display: block; display: flex; align-items: stretch; flex: 1; hyphens: none; text-wrap: balance; } #pagination::after { content: " "; display: block; visibility: hidden; clear: both; } #pagination a[rel=archives] { width: 100%; flex: auto; text-align: center; justify-content: center; } #pagination [rel=next] { float: left; text-align: left; justify-content: flex-start; margin-right: 0.5em; } #pagination [rel=next]::before { content: "â†"; padding-right: 1ch; text-decoration: underline white; align-self: center; } #pagination [rel=prev] { float: right; text-align: right; justify-content: flex-end; margin-left: 0.5em; } #pagination [rel=prev]:after { content: "→"; padding-left: 1ch; text-decoration: underline white; align-self: center; } @media (max-width: 55ch) { #pagination { display: block; } #pagination a { display: block; } } @media print { nav { display: none; } #pagination { display: none; } #subscribe { display: none; } a[href][rel=license]::after { content: ": " attr(href); } .analytics { display: none; } } /* Archive Layout */ .archive-entry > * { display: inline-block; font-size: 1.17em; } .archive-entry :not(:first-child)::before { content: "/ " } /* Animations and transitions */ ::before, ::after { transition-property: padding, margin, border, margin, background, transform, -webkit-transform; transition-duration: 0.3s; }