X-Git-Url: https://git.bts.cx/cx.git/blobdiff_plain/d4ec97e97b01a12a8fdf6d473b05e6c496842e85..85fe5bf672260a88151fa02d1d6d224762edd6a2:/public/design/css/style.css?ds=inline diff --git a/public/design/css/style.css b/public/design/css/style.css index 8fb9544..a09110f 100644 --- a/public/design/css/style.css +++ b/public/design/css/style.css @@ -1,194 +1,189 @@ /* 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-face { - 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-face { - font-family: "Fanwood Text"; - src: url(/design/fonts/fanwood/fanwood_text_italic-webfont.woff); - font-style: italic; + font-family: "League Spartan"; + src: url(/design/fonts/raleway/LeagueSpartan-VF.woff); } /* 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: "League Spartan", sans-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: 4em; + --max-width: 50ch; + width: min(100%, var(--max-width)); + margin-left: auto; + margin-right: auto; +} + +header { + margin-bottom: 8vh; } header h1 { - font-size: 4em; + font-size: 2em; +} + +header h1 a { + color: #000; + text-decoration: none; } 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 { + font-weight: lighter; } 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)); + margin: 4em auto; + border: 0; + height: 1px; + background: #ccc; } /* 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 solid #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; + 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; }