fix: add missing components

1 files changed, 32 insertions, 8 deletions

diff --git a/templates/openring.html b/templates/openring.html
index be91912..675c623 100644
--- a/templates/openring.html
+++ b/templates/openring.html
@@ -1,23 +1,47 @@
-<sectiong style="margin-top: 128px;">
+<section class="webring" style="margin-top: 128px;">
   <h2>Articles from blogs I read</h2>
-  <section>
+  <section class="articles">
     {{range .Articles}}
-    <div>
-      <h3>
+    <div class="article">
+      <h3 class="title">
         <a href="{{.Link}}" target="_blank" rel="noopener">{{.Title}}</a>
       </h3>
-      <p>{{.Summary}}</p>
-      <div>
+      <p class="summary">{{.Summary}}</p>
+      <div class="source">
         via <a href="{{.SourceLink}}">{{.SourceTitle}}</a>
       </div>
-      <div>{{.Date | datef "January 2, 2006"}}</div>
+      <div class="date">{{.Date | datef "January 2, 2006"}}</div>
     </div>
     {{end}}
   </section>
-  <div>
+  <div class="attribution">
     <small>
     Generated by
     <a href="https://git.sr.ht/~sircmpwn/openring">openring</a>
     </small>
   </div>
 </section>
+<style>
+.webring .articles {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -0.5rem;
+}
+.webring .title {
+  margin: 0;
+}
+.webring .article {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  min-width: 10rem;
+}
+.webring .summary {
+  flex: 1 1 0;
+}
+.webring .attribution {
+  text-align: right;
+}
+</style>