Index: snippets-html.rkt
==================================================================
--- snippets-html.rkt
+++ snippets-html.rkt
@@ -78,16 +78,16 @@
  </a></li>})
 
 (define (html$-page-footer)
   ◊string-append{
 <footer id="main">
- <h1>The Local Yarn</h1>
- <p><a href="/">Home</a> •
+ <p class="title">The Local Yarn</p>
+ <nav><a href="/">Home</a> •
     <a href="/blog-pg1.html">Blog</a> •
     <a href="/keyword-index.html">Keyword Index</a> •
-    <a href="/code"><i><code>(Source Code)</code></i></a>
- </p>
+    <a href="/code"><i><code>◊"◊"(Source&nbsp;Code)</code></i></a>
+ </nav>
  ◊(html$-series-list)
  </footer>})
 
 (define (html$-page-body-close)
   ◊string-append{

Index: web-extra/martin.css.pp
==================================================================
--- web-extra/martin.css.pp
+++ web-extra/martin.css.pp
@@ -183,56 +183,56 @@
 
 main > aside {
     text-align: center;
 }
 
-nav {
+main nav {
     font-family: 'Triplicate T4c', monospace;
     font-feature-settings: "onum" off;
     font-size: 0.7rem;
     margin: 0;
     margin-top: 0.5rem;
     text-align: center;
 }
 
-nav ul {
+main nav ul {
     list-style-type: none;
     margin: 0.2em auto;
     padding: 0;
 }
 
-nav li {
+main nav li {
     display: none; /* Numbers not displayed on mobile */
     color: gray;
 }
 
-nav li.nav-text {
+main nav li.nav-text {
     display: inline;
     text-transform: uppercase;
     letter-spacing: 0.05rem;
     font-size: 0.6rem;
 }
 
-nav li.inactive-link {
+main nav li.inactive-link {
     color: #545454; /* Accessibility (contrast) */
 }
 
-nav li.current-page {
+main nav li.current-page {
     color: ◊color-bodytext;
     padding: 0.2rem 0.5rem;
     border-bottom: dotted ◊color-bodytext 2px;
 }
 
-nav li a {
+main nav li a {
     padding: 0.2rem 0.5rem;
 }
 
-nav li a:link, nav li a:visited {
+main nav li a:link, nav li a:visited {
     color: ◊color-bodytext;
 }
 
-nav li a:hover, nav li a:active {
+main nav li a:hover, nav li a:active {
     color: ◊color-linkhover;
     background: #ebebeb;
 }
 
 i > em { font-style: normal; }
@@ -633,20 +633,25 @@
 
 /* ******* (Mobile first) Columnar series list styling *******
  */
 
 .column-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
+    max-width: 17rem;
+    margin: 0;
+    columns: 8rem auto;
+}
+
+@media (min-width: 667px) {
+  .column-list {
+    margin: 0 auto;
+  }
 }
 
 .column-list div {
     padding-left: 0.25em; /* Keeps some italic descenders inside the box */
-    margin: 0 0.5rem;
     text-align: left;
-    width: 8rem;
+    break-inside: avoid;
 }
 
 .column-list h2 {
     font-feature-settings: "smcp" on;
     text-transform: lowercase;
@@ -657,10 +662,11 @@
 
 .column-list ul {
     margin-top: 0;
     list-style-type: none;
     padding: 0;
+    margin-bottom: 0.5rem;
 }
 
 /* ******* (Mobile first) Keyword Index styling *******
  */
 
@@ -691,16 +697,42 @@
 }
 
 /* Footer ***** */
 
 footer#main {
-  text-align: center;
-  margin-top: ◊x-lineheight[1];
-  padding-top: ◊x-lineheight[1];
-  background: #dedede;
-  border-top: dotted ◊color-bodytext 2px;
+  text-align: left;
+  font-size: 0.8rem;
+  line-height: 1rem;
+  width: 90%;
+  margin: 0 auto;
+}
+
+@media (min-width: 667px) {
+  footer#main {
+    text-align: center;
+    width: 100%;
+    background: linear-gradient(◊color-background 5%, #dedede 100%);
+  }
+}
+
+footer#main p.title {
+  font-size: 1rem;
+  font-feature-settings: "smcp" on;
+  text-transform: lowercase;
+  margin-top: ◊x-lineheight[2];
+  margin-bottom: ◊x-lineheight[0.5];
+}
+
+footer#main nav {
+  font-feature-settings: "smcp" on;
+  text-transform: lowercase;
+}
+
+footer#main nav code {
+  font-size: 0.6rem;
 }
+  
 
 /* End of mobile-first typography and layout */
 
 
 /* Here’s where we start getting funky for any viewport wider than mobile portrait.
@@ -713,11 +745,11 @@
         padding-right: 1rem;
         width: 30rem;
         max-width: 90%;
     }
 
-    nav li { display: inline; } /* Display page numbers on larger screens */
+    main nav li { display: inline; } /* Display page numbers on larger screens */
 
     @supports (grid-area: auto) {
         main { 
             width: 42rem;
             background: none;
@@ -884,6 +916,7 @@
         }
     a:link, a:visited, a:hover, a:active {
         color: black;
         border-bottom: dotted 1px black;
     }
+    footer#main { display: none; }
 }