M assets/styles/style.css → assets/styles/style.css

@@ -554,9 +554,9 @@ }
 
 @media screen and (max-width: 500px) {
     p[style*="float"]:has(img) {
-      float: none !important;
-      margin: 1rem auto;
-      text-align: center;
+        float: none !important;
+        margin: 1rem auto;
+        text-align: center;
     }
 }
 
@@ -697,6 +697,14 @@ width: 16px;
     height: 16px;
     border: none;
     vertical-align: text-top;
+}
+
+.heading-anchor {
+    top: -50px;
+}
+
+#toc {
+    padding-left: 1.5px;
 }
 
 /* Used only in Glyph Book */

M rules.min → rules.min

@@ -200,9 +200,24 @@ matches 1 get :level
       matches 2 get :title
       title "[^a-zA-Z0-9_-]" "_" replace :id
       "heading__$#" (id) =% @id
-      (id title) headings append @headings
-      "<h$1 id='$2'>$3</h$1>" (level id title) =%
+      {}
+        title %title
+        id %id 
+      headings append @headings
+      "<a class='heading-anchor' id='$2'></a><h$1>$3</h$1><a class='go2toc' href='#toc'>:chevron-up:</a>" (level id title) =%
     ) replace-apply @result
+    (headings size 3 >=)
+      (
+        headings (
+          :heading
+          heading /id :id
+          heading /title :text
+          "<li><a href='#$1'>$2</a></li>" (id text) =%
+        ) map "\n" join :links
+        "<ul id='#toc' class='panel'>$1</ul>" (links) =% :toc
+        "$1\n$2" (toc result) =% @result
+      )
+    when
   )
 ) ::
 
@@ -260,11 +275,10 @@ "" :page
     "" :contents
     content input-fread @contents
     (content /ext ".md" ==) (contents content markdown @contents) when
-    content contents %contents @content
+    content contents prepend-toc %contents @content
     tpl content mustache @page
     id page process-icons @page
     id page process-code @page
-    page prepend-toc @page
     content page %contents @content
     (
         ((id "^(glyph|ruby-compendium)(\/|\\\\)book" match?) ()) ;Do not add index.html due to the way book internal links work.