few css changes to make it work with my website

in.html

@@ -1,6 +1,6 @@
 <!-- License-Id: CC0-1.0 -->
 <section class="webring">
-  <h3>Articles from blogs I follow around the net</h3>
+  <h3 class="header">Articles from blogs I follow around the net</h3>
   <section class="articles">
     {{range .Articles}}
     <div class="article">
@@ -21,13 +21,16 @@
   </p>
 </section>
 <style>
+.webring .header {
+    margin: 0 0 12px;
+}
 .webring .articles {
   display: flex;
   flex-wrap: wrap;
   margin: -0.5rem;
 }
 .webring .title {
-  margin: 0;
+  margin: 4px 0 12px;
 }
 .webring .article {
   flex: 1 1 0;
@@ -35,7 +38,7 @@
   flex-direction: column;
   margin: 0.5rem;
   padding: 0.5rem;
-  background: #eee;
+  background: var(--openring-bg);
   min-width: 10rem;
 }
 .webring .summary {

out.html

@@ -0,0 +1,77 @@
+
+<section class="webring">
+  <h3 class="header">Articles from blogs I follow around the net</h3>
+  <section class="articles">
+    
+    <div class="article">
+      <h4 class="title">
+        <a href="https://world.hey.com/dhh/back-to-america-7e878fa2" target="_blank" rel="noopener">Back to America</a>
+      </h4>
+      <p class="summary">
+  After spending much of the past three years in Denmark, our family is returning to America full time this summer. The original reasons for temporarily emigrating – the prolonged school lockdowns and other pandemic madness – have long since evaporated, a…</p>
+      <small class="source">
+        via <a href="https://world.hey.com/dhh">David Heinemeier Hansson</a>
+      </small>
+      <small class="date">June 25, 2023</small>
+    </div>
+    
+    <div class="article">
+      <h4 class="title">
+        <a href="https://mtlynch.io/notes/nix-first-impressions/" target="_blank" rel="noopener">My First Impressions of Nix</a>
+      </h4>
+      <p class="summary">Nix is a tool for configuring software environments according to source files. I’ve been hearing more and more about Nix on Hacker News and Twitter. The idea of it appeals to me, so I’ve been tinkering with it over the past few weeks.
+My history with infra…</p>
+      <small class="source">
+        via <a href="https://mtlynch.io/">mtlynch.io</a>
+      </small>
+      <small class="date">June 17, 2023</small>
+    </div>
+    
+    <div class="article">
+      <h4 class="title">
+        <a href="https://earlyretirementnow.com/2023/06/16/flexibility-swr-series-part-58/" target="_blank" rel="noopener">Flexibility is Overrated – SWR Series Part 58</a>
+      </h4>
+      <p class="summary">June 16, 2023 I wonder if I’ll ever run out of material for the Safe Withdrawal Series. Fifty-eight parts now, and the new ideas come faster than I can write posts these days. This month, I initially planned to write about the effects of timing Social Sec…</p>
+      <small class="source">
+        via <a href="https://earlyretirementnow.com/">Early Retirement Now</a>
+      </small>
+      <small class="date">June 16, 2023</small>
+    </div>
+    
+  </section>
+  <p class="attribution">
+    Generated by
+    <a href="https://git.sr.ht/~sircmpwn/openring">openring</a>
+  </p>
+</section>
+<style>
+.webring .header {
+    margin: 0 0 12px;
+}
+.webring .articles {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -0.5rem;
+}
+.webring .title {
+  margin: 4px 0 12px;
+}
+.webring .article {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  background: var(--openring-bg);
+  min-width: 10rem;
+}
+.webring .summary {
+  font-size: 0.8rem;
+  flex: 1 1 0;
+}
+.webring .attribution {
+  text-align: right;
+  font-size: 0.8rem;
+  color: #555;
+}
+</style>