Lots of updates - restructured, added things...

static/style.css

@@ -48,8 +48,7 @@ body {
   padding: 0 1.25rem;
 }
 
-/* ── Layout — center preamble and content ────────────── */
-#preamble,
+/* ── Layout — center content ─────────────────────────── */
 #content,
 #postamble {
   max-width: var(--max-width);
@@ -57,8 +56,11 @@ body {
   margin-right: auto;
 }
 
-/* ── Navigation ──────────────────────────────────────── */
-#preamble nav {
+/* ── Contact header ──────────────────────────────────── */
+.site-contact {
+  max-width: var(--max-width);
+  margin-left: auto;
+  margin-right: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -67,27 +69,23 @@ body {
   margin-bottom: 2.5rem;
 }
 
-.nav-links {
-  display: flex;
-  gap: 1.5rem;
+/* ── Blog back nav ───────────────────────────────────── */
+.blog-nav {
+  max-width: var(--max-width);
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1.25rem 0;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 2.5rem;
 }
 
-.nav-links a {
-  color: var(--fg);
+.back-link {
+  color: var(--muted);
   text-decoration: none;
-  font-weight: 500;
-  font-size: 0.95rem;
-  letter-spacing: 0.01em;
+  font-size: 0.9rem;
 }
 
-.nav-links a:hover { color: var(--accent); }
-
-.nav-contact {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.25rem;
-}
+.back-link:hover { color: var(--accent); }
 
 /* ── Content ─────────────────────────────────────────── */
 #content {
@@ -223,3 +221,48 @@ th {
 }
 
 .contact-link:hover { color: var(--accent); }
+
+/* ── Things grid ─────────────────────────────────────── */
+.things-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1.25rem;
+  margin-top: 1.5rem;
+}
+
+.things-card {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--code-bg);
+  display: flex;
+  flex-direction: column;
+}
+
+
+.things-card-body {
+  padding: 0.9rem 1rem 1rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.things-card-body h3 {
+  margin-top: 0;
+  margin-bottom: 0.4rem;
+  font-size: 1rem;
+}
+
+.things-card-body h3 a {
+  color: var(--fg);
+  text-decoration: none;
+}
+
+.things-card-body h3 a:hover { color: var(--accent); }
+
+.things-card-body p {
+  color: var(--muted);
+  font-size: 0.88rem;
+  margin-bottom: 0;
+  line-height: 1.5;
+}