Added link for JS

assets/css/override.css

@@ -17,6 +17,7 @@
 
   .content {
       background: #121212;
+      box-shadow: 0 0.7rem 2.3rem 0 rgba(255,255,255,0.3);
   }
 
   .card-container {
@@ -47,4 +48,12 @@
       background:  #121212;
       color: white;
   }
+
+  footer h3 {
+      color: white;
+  }
+
+  .webring {
+      background-color: #121212;
+  }
 }

assets/css/style.css

@@ -160,7 +160,7 @@ p {
 }
 .content {
     background-color: white;
-    padding: 2em 0;
+    /* padding: 2em 0; */
     margin-bottom: 3rem;
     margin-top: 1em;
     width: 100%;
@@ -429,7 +429,7 @@ tr:nth-child(even) td {
     background: #f5f6f7;
 }
 footer {
-    height: 17rem;
+    height: 100%;
     max-width: 50rem;
     width: 100%;
     margin-top: -10rem;
@@ -442,6 +442,10 @@ footer {
     text-align: center;
 }
 
+footer h3 {
+    margin: 1em;
+}
+
 .footer-link {
     margin: 1rem 0;
 }
@@ -450,6 +454,10 @@ footer {
     margin: 0;
 }
 
+.webring {
+    text-align: left;
+}
+
 /* Medium devices (tablets, ~641px and up) */
 @media only screen and (min-width: 40.063em) {
     body {

layouts/partials/footer.html

@@ -1,3 +1,10 @@
-<footer class="content card card-container side-padding " >
-    <h3>The Octet Press, N07070's blog. Self-hosted, low-tech, no JS and static, as it should be.</h3>
+
+<nav class="end-nav side-padding card-container card content">
+      {{ partial "openring-out.html" . }}
+
+</nav>
+
+
+<footer class="content card card-container side-padding" >
+    <h3>The Octet Press is N07070's blog. It's self-hosted, low-tech, without javascript and static, as it should be.</h3><sup><a href="https://www.wired.com/2015/11/i-turned-off-javascript-for-a-whole-week-and-it-was-glorious/" rel="nofollow">Why ?</a></sup>
 </footer>

layouts/partials/openring-out.html

@@ -0,0 +1,69 @@
+<section class="webring">
+  <h3>Articles from blogs I follow around the net</h3>
+  <section class="articles">
+    
+    <div class="article">
+      <h4 class="title">
+        <a href="https://solar.lowtechmagazine.com/2021/03/urban-fish-ponds-low-tech-sewage-treatment-for-towns-and-cities.html" target="_blank" rel="noopener">Urban Fish Ponds: Low-tech Sewage Treatment for Towns and Cities</a>
+      </h4>
+      <p class="summary">In the mid 20th century, whole cities’ sewage systems safely and successfully used fish to treat and purify their water. Waste-fed fish ponds are a low-tech, cheap, and sustainable alternative to deal with our own shit — and to obtain high protein food in…</p>
+      <small class="source">
+        via <a href="https://solar.lowtechmagazine.com/">LOW←TECH MAGAZINE</a>
+      </small>
+      <small class="date">March 28, 2021</small>
+    </div>
+    
+    <div class="article">
+      <h4 class="title">
+        <a href="https://www.laquadrature.net/2021/03/26/gendnotes-entre-flicage-inavoue-et-mauvaise-foi/" target="_blank" rel="noopener">GendNotes : entre flicage inavoué et mauvaise foi</a>
+      </h4>
+      <p class="summary">Il y a plus d&#39;un an, le gouvernement autorisait par décret la gendarmerie à utiliser une application de prise de notes sur téléphone mobile intitulée GendNotes. Nous avions déposé un recours contre ce décret devant…</p>
+      <small class="source">
+        via <a href="https://www.laquadrature.net">La Quadrature du Net</a>
+      </small>
+      <small class="date">March 26, 2021</small>
+    </div>
+    
+    <div class="article">
+      <h4 class="title">
+        <a href="https://mamot.fr/@n07070/105955483490021614" target="_blank" rel="noopener">n07070: “N&#39;empêche, …”</a>
+      </h4>
+      <p class="summary">N&#39;empêche, vu la situation actuelle, heureusement que la réforme de la sécu c&#39;était pas le premier truc à l&#39;ordre du jour des destructions prévues par Macron...</p>
+      <small class="source">
+        via <a href="https://mamot.fr/@n07070">N07070 (@n07070@mamot.fr)</a>
+      </small>
+      <small class="date">March 26, 2021</small>
+    </div>
+    
+  </section>
+  <p class="attribution">
+    Generated by
+    <a href="https://git.sr.ht/~sircmpwn/openring">openring</a>
+  </p>
+</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 {
+  font-size: 0.8rem;
+  flex: 1 1 0;
+}
+.webring .attribution {
+  text-align: right;
+  font-size: 0.8rem;
+}
+</style>