X-Git-Url: https://git.bts.cx/cx.git/blobdiff_plain/a33491c3a25cf858b67f279c10d93e0eb863ad92..2a75d7abba80827cd24ac0135bb562e394ec41b2:/public/design/css/style.css diff --git a/public/design/css/style.css b/public/design/css/style.css index 8bef5af..e3e88d0 100644 --- a/public/design/css/style.css +++ b/public/design/css/style.css @@ -1,195 +1,195 @@ /* Very Smol Reset */ * { - box-sizing: border-box; - margin: 0; + box-sizing: border-box; + margin: 0; } @font-face { - font-family: Fanwood; - src: url(/design/fonts/fanwood/fanwood-webfont.woff); + font-family: Fanwood; + src: url(/design/fonts/fanwood/fanwood-webfont.woff); } @font-face { - font-family: Fanwood; - src: url(/design/fonts/fanwood/fanwood_italic-webfont.woff); - font-style: italic; + font-family: Fanwood; + src: url(/design/fonts/fanwood/fanwood_italic-webfont.woff); + font-style: italic; } @font-face { - font-family: "Fanwood Text"; - src: url(/design/fonts/fanwood/fanwood_text-webfont.woff); + font-family: "Fanwood Text"; + src: url(/design/fonts/fanwood/fanwood_text-webfont.woff); } @font-face { - font-family: "Fanwood Text"; - src: url(/design/fonts/fanwood/fanwood_text_italic-webfont.woff); - font-style: italic; + font-family: "Fanwood Text"; + src: url(/design/fonts/fanwood/fanwood_text_italic-webfont.woff); + font-style: italic; } /* Layout */ body { - display: flex; - flex-direction: column; - min-height: 100vh; - padding: 5vh clamp(1rem, 5vw, 3rem) 1rem; - font-family: Fanwood, serif; - font-size: 1.4em; - line-height: 1.2em; - color: #222; + display: flex; + flex-direction: column; + min-height: 100vh; + padding: 5vh clamp(1rem, 5vw, 3rem) 1rem; + font-family: Fanwood, serif; + font-size: 1.4em; + line-height: 1.2em; + color: #222; } body > * { - --layout-spacing: max(8vh, 3rem); - --max-width: 60ch; - width: min(100%, var(--max-width)); - margin-left: auto; - margin-right: auto; + --layout-spacing: max(8vh, 3rem); + --max-width: 60ch; + width: min(100%, var(--max-width)); + margin-left: auto; + margin-right: auto; } header h1 { - font-size: 4em; + font-size: 4em; } nav ul { - list-style: none; - display: flex; - flex-wrap: wrap; - padding: 0; - margin-left: -1rem; - margin-right: -1rem; - vertical-align: bottom; + list-style: none; + display: flex; + flex-wrap: wrap; + padding: 0; + margin-left: -1rem; + margin-right: -1rem; + vertical-align: bottom; } nav ul li { - padding: 0.5rem 1rem; + padding: 0.5rem 1rem; } nav [aria-current="page"] { - font-weight: bold; + font-weight: bold; } main, main > * + * { - margin-top: var(--layout-spacing); + margin-top: var(--layout-spacing); } body > footer { - margin-top: auto; - padding-top: var(--layout-spacing); + margin-top: auto; + padding-top: var(--layout-spacing); } body > footer div { - border-top: 1px solid #ccc; - padding-top: 0.5em; - font-size: 0.9rem; - color: #767676; + border-top: 1px solid #ccc; + padding-top: 0.5em; + font-size: 0.9rem; + color: #767676; } article * + * { - margin-top: 1em; + margin-top: 1em; } article > h1 { - margin-top: 0; + margin-top: 0; } article > h1 a { - text-decoration: none; - color: #000; + text-decoration: none; + color: #000; } article > h1 + .updated { - margin-top: 0; + margin-top: 0; } hr { - width: 80%; - margin: 4em auto; - border: 0; - height: 1px; - background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); + width: 80%; + margin: 4em auto; + border: 0; + height: 1px; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); } /* Typography */ :is(h1, h2, h3) { - line-height: 1.2; + line-height: 1.2; } :is(h1, h2) { - max-width: 40ch; + max-width: 40ch; } .updated { - font-size: 0.8em; - color: #aaa; - margin: 0 !important; + font-size: 0.8em; + color: #aaa; + margin: 0 !important; } :is(h2, h3):not(:first-child) { - margin-top: 2em; + margin-top: 2em; } a { - color: navy; - text-underline-offset: 0.08em; + color: navy; + text-underline-offset: 0.08em; } a:focus { - outline: 1px solid currentColor; - outline-offset: 0.2em; + outline: 1px solid currentColor; + outline-offset: 0.2em; } /* Media */ article + article { - border-top: 1px dashed #ccc; - padding-top: var(--layout-spacing); + border-top: 1px dashed #ccc; + padding-top: var(--layout-spacing); } article img { - display: block; - width: 100%; - min-height: 20rem; - max-height: 40vh; - object-fit: cover; - margin: 0 auto 1rem !important; + display: block; + width: 100%; + min-height: 20rem; + max-height: 40vh; + object-fit: cover; + margin: 0 auto 1rem !important; } /*@supports (aspect-ratio: 1) { - article img { - max-height: unset; - aspect-ratio: 3/2; - } + article img { + max-height: unset; + aspect-ratio: 3/2; + } }*/ /* Supporting Content */ code:not([class*="language"]) { - font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; - font-size: 1.75ex; - color: #444; - background-color: rgba(0, 0, 0, 0.1); - padding-right: 0.15em; - padding-left: 0.15em; + font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; + font-size: 1.75ex; + color: #444; + background-color: rgba(0, 0, 0, 0.1); + padding-right: 0.15em; + padding-left: 0.15em; } pre code { - margin: 2rem 0; - padding: 0.5em 1rem; - display: block; - border-left: 3px solid rgba(0, 0, 0, 0.35); - background-color: rgba(0, 0, 0, 0.05); - border-radius: 0 0.25rem 0.25rem 0; - overflow-x: auto; - font-size: 0.8em !important; + margin: 2rem 0; + padding: 0.5em 1rem; + display: block; + border-left: 3px solid rgba(0, 0, 0, 0.35); + background-color: rgba(0, 0, 0, 0.05); + border-radius: 0 0.25rem 0.25rem 0; + overflow-x: auto; + font-size: 0.8em !important; } blockquote { - margin: 2rem 0; - padding: 0.5em 1rem; - border-left: 3px solid rgba(0, 0, 0, 0.35); - background-color: rgba(0, 0, 0, 0.05); - border-radius: 0 0.25rem 0.25rem 0; + margin: 2rem 0; + padding: 0.5em 1rem; + border-left: 3px solid rgba(0, 0, 0, 0.35); + background-color: rgba(0, 0, 0, 0.05); + border-radius: 0 0.25rem 0.25rem 0; }