From be215575b825ab118601cbabdcd9b64a7a2d1759 Mon Sep 17 00:00:00 2001
From: Christian Cleberg <hello@cleberg.net>
Date: Fri, 16 Jan 2026 22:39:21 -0600
Subject: update site theme

---
 theme/static/styles.css   | 329 ++++++++++++++++++++++++++++++++++++++++------
 theme/templates/post.html |  21 ++-
 2 files changed, 308 insertions(+), 42 deletions(-)

(limited to 'theme')

diff --git a/theme/static/styles.css b/theme/static/styles.css
index 71acb7e..6987a80 100644
--- a/theme/static/styles.css
+++ b/theme/static/styles.css
@@ -1,81 +1,334 @@
 body {
-    font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
-    font-size: 0.85rem;
+    border: 3px solid black;
+    display: flex;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
     line-height: 1.5;
     margin: 0 auto;
+    height: 100%;
     max-width: 50em;
+    min-height: 100vh;
 }
 
-body {
+main {
+    flex: 1 0 auto;
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+footer {
     padding: 1rem;
 }
 
+img {
+    max-width: 100%;
+}
+
+.skip-link {
+    height: 1px;
+    left: -10000px;
+    overflow: hidden;
+    position: absolute;
+    top: auto;
+    width: 1px;
+}
+
+.skip-link:focus {
+    height: auto;
+    position: static;
+    width: auto;
+}
+
 footer {
-    margin: 1rem 0;
+    background-color: black;
+    border-top: 3px solid black;
+    color: white;
+}
+
+footer a {
+    color: white;
 }
 
 nav {
-    align-items: center;
+    width: 100vw;
+    border-bottom: 3px solid black;
     display: flex;
-    justify-content: space-around;
-    margin: 1rem 0;
+    justify-content: center;
+    background-color: #0066ff;
 }
 
 nav ul {
-    display: flex;
-    list-style-type: none;
+    list-style: none;
     margin: 0;
     padding: 0;
+    display: flex;
     width: 100%;
 }
 
 nav ul li {
-    height: 100%;
-    margin-bottom: 0.5rem;
-    margin-right: 1rem;
+    flex: 1;
+}
+
+nav a {
+    display: block;
+    width: 100%;
+    padding: 0.75rem 0;
     text-align: center;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #fff;
+    background-color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+    border: none;
+    border-radius: 0;
+    transition: background 0.2s ease,
+                color 0.2s ease,
+                transform 0.1s ease;
 }
 
-img {
-    max-width: 100%;
+nav a:hover,
+nav a:focus {
+    background-color: #004fcc;
+    outline: none;
 }
 
-pre {
+nav a:focus-visible {
+    box-shadow: 0 0 0 3px rgba(0,102,255,.4);
+}
+
+nav a:active {
+    transform: translateY(1px);
+}
+
+nav ul li:hover a {
+    background-color: #fff;
+    color: #0066ff;
+}
+
+@media (max-width: 480px) {
+    nav a {
+        padding: 0.75rem 0;
+    }
+
+    nav ul {
+        flex-direction: row !important;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+
+table,
+th,
+td {
     border: 1px solid black;
-    overflow: scroll;
-    padding: 0.5rem;
 }
 
-:not(pre) > code {
-    color: red;
+thead {
+    background-color: blue;
+    color: white;
+    font-weight: bold;
 }
 
-.skip-link {
-    height: 1px;
-    left: -10000px;
-    overflow: hidden;
-    position: absolute;
-    top: auto;
-    width: 1px;
+blockquote {
+    border: 3px solid black;
+    margin: 0;
+    margin-bottom: 1rem;
+    padding: 1rem;
+    background-color: blue;
+    color: white;
 }
 
-.skip-link:focus {
-    height: auto;
-    position: static;
-    width: auto;
+blockquote p {
+    margin: 0;
+    padding: 0;
 }
 
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: #000000;
-        color: #dfdfdf;
+time {
+    font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
+    font-size: 0.85rem;
+}
+
+section {
+    border-bottom: 3px solid black;
+}
+
+.post time {
+    margin-right: 0.5rem;
+}
+
+pre {
+    border: 3px solid black;
+    background-color: lightgrey;
+    padding: 1rem;
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow-x: auto;
+    white-space: pre;
+}
+
+main {
+    height: 100%;
+}
+
+section {
+    margin: 0 -1rem;
+    padding: 2rem;
+}
+
+.post:last-of-type {
+    margin-bottom: 2rem;
+}
+
+.reply-link {
+    padding: 2rem 0;
+}
+
+.reply-link a {
+    display: inline-block;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #fff;
+    background-color: #0066ff;
+    border: none;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.2s ease,
+                transform 0.1s ease;
+}
+
+reply-link a:hover,
+reply-link a:focus {
+    background-color: #004fcc;
+    outline: none;
+}
+
+reply-link a:focus-visible {
+    box-shadow: 0 0 0 3px rgba(0,102,255,.4);
+}
+
+reply-link a:active {
+    transform: translateY(1px);
+}
+
+.post-metadata {
+    margin: 0 auto;
+    padding: 1rem;
+    margin: 0 -1rem;
+}
+
+.meta-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: baseline;
+    padding: 0.4rem 0;
+    border-bottom: 1px solid black;
+}
+
+.meta-row:last-of-type {
+    border-bottom: none;
+}
+
+.meta-label {
+    flex: 0 0 120px;
+    font-weight: bold;
+    color: #333;
+}
+
+.meta-value {
+    flex: 1 1 auto;
+    color: #555;
+}
+
+@media (max-width: 500px) {
+    .meta-label {
+        flex-basis: 100%;
+        margin-bottom: 0.2rem;
+    }
+
+    .meta-value {
+        flex-basis: 100%;
     }
+}
+
+table {
+    width: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+}
 
-    a {
-        color: #67c0ff;
+th,
+td {
+    word-break: break-word;
+    overflow-wrap: anywhere;
+    padding: 0.5rem;
+}
+
+thead {
+    background-color: blue;
+    color: white;
+    font-weight: bold;
+}
+
+th,
+td {
+    min-width: 60px;
+}
+
+.table-fixed {
+    table-layout: fixed;
+}
+
+html,
+body {
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+
+nav {
+    width: 100%;
+    max-width: 100%;
+}
+
+section > .inner {
+    margin: 0 -1rem;
+    padding: 2rem;
+}
+
+body {
+    overflow-x: hidden;
+}
+
+@media (max-width: 480px) {
+    nav ul {
+        flex-direction: row !important;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
     }
 
-    pre {
-        border-color: white;
+    nav a {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
     }
 }
+
+.post {
+    align-items: center;
+    display: flex;
+    margin: 0.5rem 0;
+}
+
+.post time {
+    flex-shrink: 0;
+    margin-right: 1rem;
+}
diff --git a/theme/templates/post.html b/theme/templates/post.html
index 66c335c..407b3b0 100644
--- a/theme/templates/post.html
+++ b/theme/templates/post.html
@@ -8,10 +8,23 @@
 <meta property="og:description" content="{{ project_description }}" />
 {% endif %} {% endblock %} {% block main %}
 <article>
-	<section>
-		<b>Title</b>: {{ post.title }}
-		<br><b>Date</b>: <time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time>
-		<br><b>Description</b>: {{ post.description }}
+	<section class="post-metadata">
+		<div class="meta-row">
+			<span class="meta-label">Title:</span>
+			<span class="meta-value">{{ post.title }}</span>
+		</div>
+
+		<div class="meta-row">
+			<span class="meta-label">Date:</span>
+			<time class="meta-value" datetime='{{ post.date | strftime("%Y-%m-%d") }}''>
+			{{ post.date | strftime("%Y-%m-%d %H:%M:%S") }}
+			</time>
+		</div>
+
+		<div class="meta-row">
+			<span class="meta-label">Description:</span>
+			<span class="meta-value">{{ post.description }}</span>
+		</div>
 	</section>
 	<section>{{ post.html | safe }}</section>
 	<div class="reply-link"><a href="mailto:hello@cleberg.net">Reply via email &rarr;</a></div>
-- 
cgit v1.2.3