webrings in their own page

site/_includes/-footer.njk

@@ -1,21 +1,12 @@
 <footer>
-  <section>
-    &copy; Joshua Seigler 2025.
-        -
-    <a rel="me" href="mailto:joshua@seigler.net?subject=Hello">Contact</a>
-    -
-    <a href="/feed.xml">RSS</a>
-    -
-    <a href="/unoffice-hours/">Unoffice Hours</a>
-  </section>
-  <section>
-    Webrings:
-    <strong>Unoffice Hours</strong>
-    <a href="https://unofficehours.com/prev.html" rel="noopener">Prev</a>
-    <a href="https://unofficehours.com/next.html" rel="noopener">Next</a>
-    <a href="https://unofficehours.com/random.html" rel="noopener">Random</a>
-    <a href="https://unofficehours.com" rel="noopener">List</a>
-  </section>
+  &copy; Joshua Seigler 2025.
+  -
+  <a rel="me" href="mailto:joshua@seigler.net?subject=Hello">Contact</a>
+  -
+  <a href="/feed.xml">RSS</a>
+  -
+  <a href="/unoffice-hours/">Unoffice Hours</a>
+  -
+  <a href="/webrings/">Web Rings</a>
 </footer>
-<div id="effects">
-</div>
+<div id="effects"></div>

site/_includes/css/site.css

@@ -90,6 +90,7 @@ mark {
 a, label {
   color: inherit;
   --glowColor: var(--c-accent);
+  --c-accent: oklch(45% 0.135 var(--hue-main) / 0.8);
 }
 a[href] {
   appearance: none;
@@ -154,7 +155,7 @@ header.toc {
   li {
     display: inline;
     list-style: none;
-    &:nth-child(n + 2):before {
+    &:nth-child(n + 2)::before {
       content: " · ";
     }
   }
@@ -417,10 +418,17 @@ body > footer {
   & a {
     white-space: nowrap;
   }
-}
-
-footer section {
-  margin-top: 0;
+  ul {
+    padding: 0;
+    display: inline;
+    > li {
+      display: inline;
+      + li::before {
+        content: " · ";
+        padding-inline: 0.5ch;
+      }
+    }
+  }
 }
 
 .nav-toggle-button {
@@ -652,8 +660,9 @@ body .isso-preview {
   );
 }
 body .isso-post-action > input,
-button {
+button, a.button {
   color: inherit;
+  text-decoration: none;
   background-color: var(--c-text-background-light);
   font-size: 1rem;
   padding: calc(0.5rem + 1px) 0.5rem;
@@ -670,6 +679,7 @@ button {
       0 0 1rem var(--c-accent);
   }
 }
+
 body .isso-post-action {
   margin: 0;
 }

site/pages/unoffice-hours.md

@@ -8,6 +8,6 @@ keywords: Unoffice hours
 
 Working remotely has a lot of benefits, but we miss out on the serendipitous connections and socialization that happened just from being in the same room. Unoffice hours is part of an attempt to make new connections, but without applying the giant invisible filter of my own preferences.
 
-If you want to talk about pretty much anything, [book 30 minutes on my calendar](https://cal.com/joshuaseigler/unoffice-hours).
+We could do some pair programming, talk about tech, life, matters of aesthetics or philosophy - the point is serendipity. If you want to call with no agenda, that's fine too, we can just get to know each other.
 
-We could do some pair programming, talk about tech, life, matters of aesthetics or philosophy - the point is serendipity.
+<a class="button" href="https://cal.com/joshuaseigler/unoffice-hours" rel="noopener" target="_blank">Book 30 minutes on my calendar</a>

site/pages/webrings.md

@@ -0,0 +1,24 @@
+---
+title: Webrings
+layout: "page.njk"
+omitTOC: true
+keywords: webrings
+---
+
+<h3>
+  <a href="https://unofficehours.com" target="_blank" rel="noopener">Unoffice Hours</a>
+</h3>
+Sites that allow you to book a web meeting to talk about stuff. Like office hours, if you remember those.
+
+[< prev](https://unofficehours.com/prev.html) [list](https://unofficehours.com) [join](https://unofficehours.com/join.html) [random](https://unofficehours.com/random.html) [next >](https://unofficehours.com/next.html)
+
+<h3>
+  <a href="https://512kb.club/" rel="noopener" target="_blank" style="--hue-main: 144.2">512KB Club <span style="color:#4caf50;">Green Team</span></a>
+</h3>
+Sites whose uncompressed bytes for the front page are less than 512KB. You can do a lot with that much. Green club weighs in under 100KB.
+
+<h3>
+  <a href="https://darktheme.club/" rel="noopener" target="_blank" style="--glowColor:black;">👻 Darktheme Club 👻</a>
+</h3>
+Sites with a dark theme.
+