cmc/cleberg.net
My personal web garden & blog.
clone: git clone https://gitbay.org/cmc/cleberg.net.git
037a40e4a59d9a516ae9e4a1c8e547c37850ad72
unsigned
author: Christian Cleberg <hello@cleberg.net> · 2025-07-06T06:55:57Z
theme/static/styles.css | 210 ++++++++++++++++++++++++++++++++++------------ theme/templates/base.html | 3 +- 2 files changed, 160 insertions(+), 53 deletions(-) @@ -9,8 +9,10 @@ */ html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ + line-height: 1.15; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } /* Sections @@ -43,9 +45,12 @@ h1 { */ hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } /* Text-level semantics @@ -65,9 +70,12 @@ a { */ abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } /** @@ -121,10 +129,14 @@ input, optgroup, select, textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ } /** @@ -199,12 +211,18 @@ fieldset { */ legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ } /** @@ -230,8 +248,10 @@ textarea { [type="checkbox"], [type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } /** @@ -249,8 +269,10 @@ textarea { */ [type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } /** @@ -267,8 +289,10 @@ textarea { */ ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } /* Misc @@ -316,11 +340,21 @@ body { Liberation Mono, Lucida Console, monospace; - font-size: 0.9rem; + font-size: clamp(0.95rem, 1vw + 0.5rem, 1.1rem); line-height: 1.5; max-width: 50em; margin: 0 auto; - padding: 0 1rem; + padding: 0 clamp(1rem, 5vw, 3rem); +} + +@media (min-width: 768px) { + body { + padding: 0 2rem; + } +} + +main>*+* { + margin-top: 2rem; } .site-nav, @@ -329,7 +363,7 @@ footer { } footer { - border-top: 1px dotted; + /* border-top: 1px dotted; */ padding-top: 1rem; margin: 1rem 0; } @@ -342,9 +376,9 @@ ul { list-style-type: "- "; } -.site-nav { +/* .site-nav { border-bottom: 1px dotted; -} +} */ .site-nav ul { list-style-type: none; @@ -362,12 +396,43 @@ h2, h3, h4 { color: var(--fg); + text-transform: uppercase; +} + +h1 { + font-size: 2rem; + font-weight: bold; + /* border-bottom: 1px solid var(--border); */ + margin-top: 2rem; + margin-bottom: 1rem; +} + +h2 { + font-size: 1.5rem; + margin-top: 1.5rem; + margin-bottom: .75rem; +} + +h3 { + font-size: 1.25rem; + margin-top: 1.25rem; + margin-bottom: .5rem; +} + +#text-table-of-contents li { + text-transform: uppercase; } a, a:visited { color: var(--link); - text-decoration: none; + text-decoration: underline; + text-decoration-skip-ink: auto; +} + +a:focus-visible { + outline: 2px solid var(--link); + outline-offset: 2px; } a:hover { @@ -393,7 +458,7 @@ table { Liberation Mono, Lucida Console, monospace; - font-size: 0.9rem; + font-size: inherit; width: 100%; } @@ -406,7 +471,7 @@ td { } pre, -pre > code, +pre>code, time, code { font-family: @@ -426,7 +491,7 @@ pre { overflow-x: auto; } -:not(pre) > code { +:not(pre)>code { color: var(--code); font-family: inherit; } @@ -471,8 +536,8 @@ blockquote p { } .post-metadata { - border: 1px dotted var(--fg); - border-top: none; + border: 1px dotted var(--border); + /* border-top: none; */ padding: 1rem; } @@ -526,39 +591,80 @@ span.tag::before { } .post { - display: flex; - flex-direction: row; - margin-bottom: 1rem; + display: flex; + flex-direction: row; + margin-bottom: 1rem; } .post-content { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .post-tags { - font-size: 0.75rem; - color: #999; - margin-top: 0.1rem; + font-size: 0.85rem; + color: #999; + margin-top: 0.1rem; } .tag { - margin-right: 0.3rem; - font-style: normal; - opacity: 0.8; + margin-right: 0.3rem; + font-style: normal; + opacity: 0.8; } .tag::before { - content: "#"; + content: "#"; +} + +.skip-link { + position: absolute; + left: -999px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} + +.skip-link:focus { + left: 1rem; + top: 1rem; + width: auto; + height: auto; + background: var(--bg-bright); + color: var(--fg); + padding: .5rem; + border: 1px solid var(--fg); } @media (prefers-color-scheme: dark) { :root { - --bg: #141617; - --bg-bright: #191c1d; - --fg: #b2aea9; - --link: gold; - --code: red; + --bg: #121212; + --bg-bright: #1e1e1e; + --fg: #e0e0e0; + --link: #8ab4f8; + --code: #f28b82; --border: #333; } } + +@media print { + body { + background: #fff; + color: #000; + font-size: 12pt; + padding: 0; + max-width: none; + } + + .site-nav, + footer, + aside { + display: none; + } + + a::after { + content: " (" attr(href) ")"; + font-size: 90%; + } +} \ No newline at end of file @@ -17,6 +17,7 @@ {% endblock %} </head> <body> + <a href="#main" class="skip-link">Skip to content</a> <nav class="site-nav" aria-label="site-nav" role="navigation"> <ul> <li><a href="/">Home</a></li> @@ -25,7 +26,7 @@ <li><a href="/wiki/">Wiki</a></li> </ul> </nav> - <main>{% block main %}{% endblock %}</main> + <main id="main">{% block main %}{% endblock %}</main> <footer> <p>Donate: <a href="monero:82frXv83WVsGbTwuqSyb27cvy67JpD7Ktaij12Avy6ogfZatsgPG67YgsmEmvTFLKd1Rk7MUwx8D31ieGwLdD4wa4KdtxDB">XMR</a> | <a href="ethereum:0x11255046Ccd637f1ACc78ae7c8849870f85638B3">ETH</a>