Commit `037a40e4a5`

037a40e4a59d9a516ae9e4a1c8e547c37850ad72

parent: 36d48b11e1

Unsigned

cmc <hello@cleberg.net> · 2025-07-06 06:55 UTC

update spacing, fonts, and dark theme

Layout: unified · split

theme/static/styles.css +158 −52

  */
 html {
-    line-height: 1.15; /* 1 */
+    line-height: 1.15;
-    -webkit-text-size-adjust: 100%; /* 2 */
+    /* 1 */
+    -webkit-text-size-adjust: 100%;
+    /* 2 */
 }
 /* Sections
    */
 hr {
-    box-sizing: content-box; /* 1 */
+    box-sizing: content-box;
-    height: 0; /* 1 */
+    /* 1 */
-    overflow: visible; /* 2 */
+    height: 0;
+    /* 1 */
+    overflow: visible;
+    /* 2 */
 }
 /* Text-level semantics
    */
 abbr[title] {
-    border-bottom: none; /* 1 */
+    border-bottom: none;
-    text-decoration: underline; /* 2 */
+    /* 1 */
-    text-decoration: underline dotted; /* 2 */
+    text-decoration: underline;
+    /* 2 */
+    text-decoration: underline dotted;
+    /* 2 */
 }
 /**
 optgroup,
 select,
 textarea {
-    font-family: inherit; /* 1 */
+    font-family: inherit;
-    font-size: 100%; /* 1 */
+    /* 1 */
-    line-height: 1.15; /* 1 */
+    font-size: 100%;
-    margin: 0; /* 2 */
+    /* 1 */
+    line-height: 1.15;
+    /* 1 */
+    margin: 0;
+    /* 2 */
 }
 /**
    */
 legend {
-    box-sizing: border-box; /* 1 */
+    box-sizing: border-box;
-    color: inherit; /* 2 */
+    /* 1 */
-    display: table; /* 1 */
+    color: inherit;
-    max-width: 100%; /* 1 */
+    /* 2 */
-    padding: 0; /* 3 */
+    display: table;
-    white-space: normal; /* 1 */
+    /* 1 */
+    max-width: 100%;
+    /* 1 */
+    padding: 0;
+    /* 3 */
+    white-space: normal;
+    /* 1 */
 }
 /**
 [type="checkbox"],
 [type="radio"] {
-    box-sizing: border-box; /* 1 */
+    box-sizing: border-box;
-    padding: 0; /* 2 */
+    /* 1 */
+    padding: 0;
+    /* 2 */
 }
 /**
    */
 [type="search"] {
-    -webkit-appearance: textfield; /* 1 */
+    -webkit-appearance: textfield;
-    outline-offset: -2px; /* 2 */
+    /* 1 */
+    outline-offset: -2px;
+    /* 2 */
 }
 /**
    */
 ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
+    -webkit-appearance: button;
-    font: inherit; /* 2 */
+    /* 1 */
+    font: inherit;
+    /* 2 */
 }
 /* Misc
         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,
 }
 footer {
-    border-top: 1px dotted;
+    /* border-top: 1px dotted; */
     padding-top: 1rem;
     margin: 1rem 0;
 }
     list-style-type: "- ";
 }
-.site-nav {
+/* .site-nav {
     border-bottom: 1px dotted;
-}
+} */
 .site-nav ul {
     list-style-type: none;
 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 {
         Liberation Mono,
         Lucida Console,
         monospace;
-    font-size: 0.9rem;
+    font-size: inherit;
     width: 100%;
 }
 }
 pre,
-pre > code,
+pre>code,
 time,
 code {
     font-family:
     overflow-x: auto;
 }
-:not(pre) > code {
+:not(pre)>code {
     color: var(--code);
     font-family: inherit;
 }
 }
 .post-metadata {
-    border: 1px dotted var(--fg);
+    border: 1px dotted var(--border);
-    border-top: none;
+    /* border-top: none; */
     padding: 1rem;
 }
 }
 .post {
-  display: flex;
+    display: flex;
-  flex-direction: row;
+    flex-direction: row;
-  margin-bottom: 1rem;
+    margin-bottom: 1rem;
 }
 .post-content {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
 }
 .post-tags {
-  font-size: 0.75rem;
+    font-size: 0.85rem;
-  color: #999;
+    color: #999;
-  margin-top: 0.1rem;
+    margin-top: 0.1rem;
 }
 .tag {
-  margin-right: 0.3rem;
+    margin-right: 0.3rem;
-  font-style: normal;
+    font-style: normal;
-  opacity: 0.8;
+    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: #121212;
-        --bg-bright: #191c1d;
+        --bg-bright: #1e1e1e;
-        --fg: #b2aea9;
+        --fg: #e0e0e0;
-        --link: gold;
+        --link: #8ab4f8;
-        --code: red;
+        --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

theme/templates/base.html +2 −1

     {% 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>
 			<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>

Commit 037a40e4a5

Commit `037a40e4a5`