website reshuffling

book/COLOPHON.adoc

@@ -1,13 +0,0 @@
-:layout: frontmatter.njk
-:url: /colophon/
-
-=   Colophon   =
-
-    Text:: Authored in https://asciidoc.org[AsciiDoc (markup language)].
-
-    Website:: Generated with https://lume.land[Lume (static site generator)],
-    styled with https://missing.style[Missing.css (stylesheet)].
-        
-    Fonts:: Headings in https://fontlibrary.org/en/font/chicagoflf[ChicagoFLF],
-    body text in https://www.type-together.com/literata-font[Literata],
-    code in https://berkeleygraphics.com/typefaces/berkeley-mono/[Berkeley Mono].

www/_includes/chapter.njk

@@ -57,7 +57,7 @@ layout: layout.njk
                 {{ 'Part ' + loop.index + ':' if isPart }}
                 {{ sect.getTitle() | safe }}
             </a>
-            {{ toc(sect, level + 1) if level < 2 and sect.getSections().length > 0 }}
+            {{ toc(sect, level + 1, url=url) if level < 2 and sect.getSections().length > 0 }}
         </li>
         {% endfor %}
     </ul>

www/_includes/global-footer.njk

@@ -1,10 +1,6 @@
 
-<nav class="f-row flex-wrap:wrap crowded" aria-label="Site navigation">
-    <span id="footer-book-name" class="bold allcaps">Hypermedia Systems</span>
-    <span class="f-row flex-wrap:wrap">
-        <a href="/">Cover</a>
-        <a href="/book/contents">Contents</a>
-        <a href="/colophon">Colophon</a>
-        <a href="https://github.com/bigskysoftware/hypermedia-systems">GitHub</a>
-    </span>
+<nav class="f-row flex-wrap:wrap justify-content:center crowded" aria-label="Site navigation">
+    <a href="/" id="footer-book-name" class="bold allcaps display-font italic">Hypermedia Systems</a>
+    <a href="/book/contents">Contents</a>
+    <a href="https://github.com/bigskysoftware/hypermedia-systems">GitHub</a>
 </nav>

www/_includes/layout.njk

@@ -75,13 +75,28 @@
     body > header { border-block-end: 1px dotted var(--muted-fg) }
     body > footer { border-block-start: none }
 
+    figure {
+        display: block;
+        background: none;
+        border: none;
+        padding: 0 var(--gap);
+    }
     figure>* { --density: .5 }
-    figcaption { font-size: .8em; line-height: calc(var(--rhythm) * 2 / 3); }
+    figcaption { font-size: .8em; line-height: calc(var(--rhythm) *  / 4); }
     figcaption:first-child { border-block-end: 1px solid var(--faded-fg) }
     figcaption:last-child { border-block-start: 1px solid var(--faded-fg) }
 
     .iconbutton { box-shadow: none !important; }
 
+    aside {
+        font-size: .8em;
+        line-height: calc(var(--rhythm)*3/4);
+        --gap: calc(var(--rhythm) * var(--density) * 3 / 4);
+        border-block: 1px solid var(--graphical-fg);
+        padding-block: var(--gap);
+        margin-block: calc(var(--gap)*4/3);
+    }
+
     /* #endregion */
 
     header, footer, summary, button, input, small, .\<small\>, aside, figcaption, .secondary-font { font-variation-settings: "opsz" 7 }

www/_plugins/postprocess-asciidoc.ts

@@ -17,7 +17,7 @@ export default () => {
 
             $$(document, ".listingblock, .imageblock").forEach((el) => {
                 el.tagName = "figure";
-                el.classList.add("contents"); // Don't draw box around images and code listings
+                // el.classList.add("contents"); // Don't draw box around images and code listings
                 const title = el.querySelector(".title");
                 if (title) title.tagName = "figcaption";
             })