A bit more for articles

thsackos · thsackos · commit 70bd200c97b6 · 2025-09-21T14:41:04.000-07:00
diff --git a/out/www/2025/09/25/abstractionholics-anonymous.html b/out/www/2025/09/25/abstractionholics-anonymous.html
@@ -2,7 +2,7 @@
 <html lang="en-US"><head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Sackosoft</title>
+    <title>Abstractionholics Anonymous</title>
     <meta name="description" content="Sackosoft Blog">
     <link rel="icon" href="/favicon.png" type="image/png">
     <link rel="canonical" href="https://sackosoft.github.io">
@@ -15,7 +15,11 @@
       </nav>
     </header>
     <main>
+            <article>
+                <header>
 <h1 id="abstractionholics-anonymous">Abstractionholics Anonymous</h1>
+<time class="meta" datetime="2025-09-25">Sep 25, 2025</time>
+                </header>
 <p>Hello, everyone, my name is Theodore, and I’m an
 Abstractionholic.</p>
 <blockquote>
@@ -92,20 +96,22 @@ <h2 id="realization">Realization</h2>
 href="https://en.wikipedia.org/wiki/SWIM_Protocol">SWIM Protocol</a>
 with the impression that I would need these components to build the
 Dream Stream.</p>
+<a href="/2025/09/25/swim-demo.gif">
 <figure>
-<img src="/2025/09/25/swim-demo.gif"
-alt="An animated video of the SWIM protocol simulator in the abandoned sackosoft/frieze project. A user interacts with buttons to add nodes to a circle representing a cluster. Each node that joins contacts a seed node to join the cluster. The nodes then gossip information between themselves as they run a failure detection protocol based on pinging each other. The user clicks a button to stop a node, within a few seconds some nodes learn of the node failure due to failed ping requests, they gossip this information to other nodes, and each node eventually drops the information for the stopped node." />
-<figcaption aria-hidden="true">An animated video of the SWIM protocol
-simulator in the abandoned sackosoft/frieze project. A user interacts
-with buttons to add nodes to a circle representing a cluster. Each node
-that joins contacts a seed node to join the cluster. The nodes then
-gossip information between themselves as they run a failure detection
-protocol based on pinging each other. The user clicks a button to stop a
-node, within a few seconds some nodes learn of the node failure due to
-failed ping requests, they gossip this information to other nodes, and
-each node eventually drops the information for the stopped
-node.</figcaption>
-</figure>
+    <img src="/2025/09/25/swim-demo.gif"
+    alt="An animated video of the SWIM protocol simulator in the abandoned sackosoft/frieze project. A user interacts with buttons to add nodes to a circle representing a cluster. Each node that joins contacts a seed node to join the cluster. The nodes then gossip information between themselves as they run a failure detection protocol based on pinging each other. The user clicks a button to stop a node, within a few seconds some nodes learn of the node failure due to failed ping requests, they gossip this information to other nodes, and each node eventually drops the information for the stopped node." />
+    <figcaption aria-hidden="true">An animated video of the SWIM protocol
+    simulator in the abandoned sackosoft/frieze project. A user interacts
+    with buttons to add nodes to a circle representing a cluster. Each node
+    that joins contacts a seed node to join the cluster. The nodes then
+    gossip information between themselves as they run a failure detection
+    protocol based on pinging each other. The user clicks a button to stop a
+    node, within a few seconds some nodes learn of the node failure due to
+    failed ping requests, they gossip this information to other nodes, and
+    each node eventually drops the information for the stopped
+    node.</figcaption>
+    </figure>
+</a>
 <p>While these were great learning experiences, they make it so
 painfully obvious that I only have one ‘tool in the toolbox’, so to say.
 Every step along the way I was drawing boxes and arrows; pondering
@@ -117,6 +123,7 @@ <h2 id="realization">Realization</h2>
 benefit of making a decision at all.</p>
 <p>I can’t help but feel there must be a better way. I have a problem.
 I’m an Abstractionholic.</p>
+            </article>
     </main>
   </body>
 </html>
diff --git a/out/www/css/main.css b/out/www/css/main.css
@@ -1,5 +1,32 @@
+body {
+    max-width: 80ch;
+    padding: 2ch;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .title {
 }
 
 .post-list {
+    list-style: none;
+    padding-left: 0;
+}
+
+.post-list > li > h2 {
+    margin-top: 0;
+}
+
+.meta {
+    display: block;
+    font-size: 1.5rem;
+    font-family: sans-serif;
+}
+
+article > * {
+    max-width: 65ch;
+}
+
+img {
+    max-width: 65ch;
 }
