add a TOC, more nutrition info stuff, update some styles and templates

site/_includes/css/site.css

@@ -1,6 +1,6 @@
 :root {
   font-size: 16px;
-  font-size: clamp(14px, 9px + 0.5vw, 24px);
+  font-size: clamp(14px, 8px + 0.65vw, 24px);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -103,6 +103,13 @@ body[data-theme="dark"] {
   color: var(--c-text-dark);
 }
 
+mark {
+  background: var(--c-highlight);
+  color: inherit;
+  border-radius: 0.4rem;
+  box-shadow: 0 0 0.75em 0.25em var(--c-highlight);
+}
+
 *,
 :after,
 :before {
@@ -150,12 +157,40 @@ main p img {
   max-width: 100%;
 }
 
-section {
+section:nth-child(n+2) {
   margin-top: 1rem;
 }
 
-.footnote-item:target,
-.footnote-ref :target {
+header.toc {
+  display: block;
+  margin: 0;
+  font-size: var(--s-1);
+  ol {
+    display: inline;
+    margin: 0;
+    padding: 0;
+  }
+  li {
+    display: inline;
+    list-style: none;
+    &:nth-child(n+2):before {
+      content: ' · ';
+    }
+  }
+}
+.toc > ol::before {
+  content: "Contents: ";
+}
+.toc ol ol {
+  &::before {
+    content: "(";
+  }
+  &::after {
+    content: ")";
+  }
+}
+
+:target {
   animation: ping 1s ease-out;
   &,
   a {
@@ -236,6 +271,10 @@ span.aside {
   }
 }
 
+ul, ol {
+  padding-left: 1.5rem;
+}
+
 ul.collection {
   padding-left: 0;
   > li {
@@ -438,7 +477,10 @@ h4 {
   position: relative;
   font-weight: 700;
   text-shadow: 0 0 0.5em var(--c-highlight);
-  margin-top: 1.5rem;
+  margin-top: 0;
+  main > &:nth-child(n+2) {
+    margin-top: 1.5rem;
+  }
   margin-bottom: 0.5rem;
   &:hover .header-anchor {
     opacity: 1;
@@ -466,7 +508,6 @@ h1 {
   margin-bottom: 0;
 }
 .header-meta {
-  margin-bottom: calc(0.75 * var(--s3));
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -512,6 +553,7 @@ h1 {
 }
 
 main {
+  margin-top: calc(0.75 * var(--s3));
   h1,
   h2,
   h3,