3 files changed, 85 insertions(+), 1 deletions(-)

M layouts/_default/baseof.html
M layouts/_default/terms.html
M static/css/style.css

@@ 69,6 69,47 @@
   </div>
 
     <footer>
+    <section class="webring">
+<h2>
+  Articles from blogs we recommend
+  <small class="attribution">Generated by openring</small>
+</h2>
+<section class="articles row is-center">
+<div class="card article col-4">
+  <header>
+    <h4>Card title 1</h4>
+  </header>
+  <p>A nisi ullam ... cupiditate?</p>
+  <footer class="is-right">
+    <a class="button primary">Submit</a>
+    <a class="button">Cancel</a>
+  </footer>
+</div>
+
+<div class="card article col-4">
+  <header>
+    <h4>Card title 2</h4>
+  </header>
+  <p>A nisi ullam ... cupiditate?</p>
+  <footer class="is-right">
+    <a class="button primary">Submit</a>
+    <a class="button">Cancel</a>
+  </footer>
+</div>
+
+<div class="card article col-4">
+  <header>
+    <h4>Card title 3</h4>
+  </header>
+  <p>A nisi ullam ... cupiditate?</p>
+  <footer class="is-right">
+    <a class="button primary">Submit</a>
+    <a class="button">Cancel</a>
+  </footer>
+</div>
+</section>
+
+      </section>
       <div class="footer">
         <span>&copy; {{ now.Year }} <a href="https://www.netlandish.com" target="_blank">Netlandish Inc.</a></span> 
 	<a href="https://man.code.netlandish.com/~netlandish/policies/terms-of-service.md" target="_blank">Terms of Use</a>

@@ 8,7 8,7 @@
 
 <section class="card shadow-card">
   {{ range .Data.Terms.Alphabetical }}
-    <a class="button primary icon is-small" href="{{ .Page.Permalink }}">{{ .Page.Title }}&nbsp;<small>({{ .Count }})</small></a>
+    <a class="button primary is-small" href="{{ .Page.Permalink }}">{{ .Page.Title }}&nbsp;<small>({{ .Count }})</small></a>
   {{ end }}
 </section>
 

@@ 45,6 45,49 @@ footer .footer>*:last-child {
   margin-right:0;
 }
 
+footer .webring {
+  margin-top: 2rem;
+}
+
+footer .webring h2 {
+  font-size: 1.2rem;
+}
+
+footer .webring .articles {
+  display: flex;
+
+  @media(max-width: 640px) {
+    flex-direction: column;
+  }
+}
+
+footer .webring .article {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  background: #eee;
+  padding: 0.5rem;
+  margin: 0 0.5rem;
+  @media(max-width: 640px) {
+    margin: 0.5rem 0;
+  }
+}
+
+footer .webring .article:first-child {
+  margin-left: 0;
+}
+
+footer .webring .article:last-child {
+  margin-left: 0;
+}
+
+footer .webring .attribution {
+  float: right;
+  font-size: 0.8rem;
+  color: #555;
+  line-height: 3;
+}
+
 footer blockquote {
   background:0 0;
   text-align:center;