update spacing, fonts, and dark theme

2 files changed, 160 insertions, 53 deletions

diff --git a/theme/static/styles.css b/theme/static/styles.css
index d21b23f..9de0c4f 100644
--- a/theme/static/styles.css
+++ b/theme/static/styles.css
@@ -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
diff --git a/theme/templates/base.html b/theme/templates/base.html
index daa43d0..6867ec7 100644
--- a/theme/templates/base.html
+++ b/theme/templates/base.html
@@ -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>