hiding topic title & toc+has_ when scrolled...

static/js/sandpoints.js

@@ -0,0 +1,28 @@
+window.addEventListener('scroll', function(e) {
+    let element = document.querySelector('.topicstitle')
+    let topicbar = document.querySelector('.topicbar')
+    let grid = document.querySelector('.grid')
+    let rect = element.getBoundingClientRect();
+    if (rect.top < 12 && !grid.classList.contains('moved')) {
+        topicbar.style.display = "inline";
+        element.style.visibility = "hidden";
+        grid.classList.add('moved');
+        grid.style.display = "none";
+        window.scrollBy({top: grid.clientHeight + element.clientHeight, behavior: 'smooth'})
+    } else if (rect.top > 11 && grid.classList.contains('moved')) {
+        grid.style.display = "grid";
+        grid.classList.remove('moved');
+        topicbar.style.display = "none";
+        element.style.visibility = "visible";
+        window.scroll({top: 0, behavior: 'smooth'})
+    }
+})
+
+window.addEventListener('DOMContentLoaded', (e) => {
+    console.log("SHUFFLE!")
+    let par = document.querySelector("#TableOfContents > ol:first-child > li:first-child");
+    let s = document.createElement("span");
+    s.appendChild(par.cloneNode(true))
+    par.remove()
+    document.querySelector("#TableOfContents > ol:first-child").insertBefore(s, document.querySelector("#TableOfContents > ol:first-child").firstChild)
+})

themes/sandpoints/assets/css/site.css

@@ -424,6 +424,7 @@ template {
 body {
     font-family: 'Vollkorn', serif;
     font-weight: 400;
+    max-width: 1024px;
     width: 80%;
     font-size: 1.4rem;
     padding-left: 3rem;
@@ -481,7 +482,6 @@ body {
 }
 
 #TableOfContents {
-  position: relative;
   margin-left: -2rem;
   margin-top: -1.5rem;
 }
@@ -500,19 +500,18 @@ body {
     font-style: normal;
 }
 
-#TableOfContents > ol:first-child > li:first-child> a::after {
+#TableOfContents > ol:first-child > span > li > a::after {
   content: "¶";
   color: rgba(0, 0, 0, 0.2);
   font-size: 1.3em;
-  position: absolute;
+  padding-left: 0.1em;
-  margin-top: -0.3em;
-  top: 0;
 }
 
 .rightcolumn {
   grid-column: 2;
   display: grid;
   grid-template-columns: auto 1fr;
+  padding-left: 0.5rem;
 }
 
 .has {
@@ -522,19 +521,9 @@ body {
 .content {
     margin-top: 4rem;
     padding-left: 3rem;
-    padding-right: 6rem;
+    padding-right: 10rem;
+    max-width: 720px;
 }
-/*
-a::after {
-    color: white;
-    content: "..";
-}
-
-a:hover::after {
-    color: white;
-    content: ".";
-}
-*/
 
 a {
     color: black;
@@ -561,12 +550,22 @@ h2 {
 
 h3 {
     font-weight: 500;
-    font-size: 1.5rem;
+    font-size: 1.4rem;
 }
 
 h4 {
     font-weight: 500;
-    font-size: 1.4rem;
+    font-size: 1.2rem;
+}
+
+h5 {
+    font-weight: 500;
+    font-size: 1.1rem;
+}
+
+h6 {
+    font-weight: 500;
+    font-size: 1rem;
 }
 
 blockquote  {
@@ -613,7 +612,6 @@ h2 + p:first-letter {
   margin-top: -0.4em;
 }
 
-
 body {counter-reset: h2}
 h2 {counter-reset: h3}
 h3 {counter-reset: h4}