more mobile layout...

static/js/sandpoints.js

@@ -1,36 +1,26 @@
 window.addEventListener('scroll', function(e) {
-    let rightcolumn = document.querySelector('.rightcolumn');
-    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";
-        rightcolumn.classList.add('shown');
-        if (document.querySelector('body').clientHeight > 1024) {
-        window.scrollBy({top: grid.clientHeight + element.clientHeight, behavior: 'smooth'})
-        }
-    } else if (rect.top > 11 && grid.classList.contains('moved')) {
-        if (document.querySelector('body').clientHeight > 1024) {
-            grid.classList.remove('moved');
-            element.style.visibility = "visible";
-            topicbar.style.display = "none";
-            window.scroll({top: 0, behavior: 'smooth'})
-        } else {
-        rightcolumn.classList.remove('shown');
-        grid.style.display = "grid";
-        grid.classList.remove('moved');
-        topicbar.style.display = "none";
-        element.style.visibility = "visible";
-        window.scroll({top: 0, behavior: 'smooth'})
+    console.log(document.querySelector('body').clientWidth);
+    if (document.querySelector('body').clientWidth > 1024) {
+        let rightcolumn = document.querySelector('.rightcolumn');
+        let topicstitle = document.querySelector('.topicstitle')
+        let topicbar = document.querySelector('.topicbar')
+        let grid = document.querySelector('.grid')
+        let gridrect = topicstitle.getBoundingClientRect();
+        if (gridrect.top < 12 && !grid.classList.contains('moved')) {
+            grid.classList.add('moved');
+            topicbar.style.display = "inline";
+            topicstitle.style.visibility = "hidden";
+            grid.style.display = "none";
+                window.scrollBy({top: grid.clientHeight + topicstitle.clientHeight, behavior: 'smooth'})
         }
     }
 })
 
+
 window.addEventListener('DOMContentLoaded', (e) => {
+    if (document.querySelector('.syllabusgrid')) {
+        toggle('syllabus/');
+    }
     let par = document.querySelector("#TableOfContents > ol:first-child > li:first-child");
     let s = document.createElement("span");
     s.appendChild(par.cloneNode(true))
@@ -40,16 +30,21 @@ window.addEventListener('DOMContentLoaded', (e) => {
 
 var toggle = function(ts) {
     let rightcolumn = document.querySelector('.rightcolumn');
-    let leftcolumn = document.querySelector('.leftcolumn');
     let grid = document.querySelector('.grid');
+
+    if (grid) {
+        grid.classList.remove('grid')
+        grid.classList.add('mobilegrid')
+    }
+
+
     if (rightcolumn.classList.contains('shown')) {
         rightcolumn.classList.remove('shown');
         rightcolumn.style.display = "none";
-        grid.style.display = "none";
+        document.querySelector('.mobilegrid').style.display = "none";
     } else {
         rightcolumn.classList.add('shown');
-        grid.style.cssText = "display: block; padding: 0;";
-        leftcolumn.style.display = "none";
         rightcolumn.style.display = "grid";
+        document.querySelector('.mobilegrid').style.display = "block";
     }
 }

themes/sandpoints/assets/css/site.css

@@ -652,7 +652,6 @@ h6:before {
 
 h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before { content: ""; counter-increment: none }
 
-
 @media (max-width: 361px) {
   html {
     box-sizing: border-box;
@@ -671,11 +670,31 @@ h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.n
     display: none;
   }
 
+  .syllabustitle {
+    margin-top: 3rem;
+    margin-bottom: 2rem;
+    font-size: 2.2rem;
+  }
+
+  .mobilegrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0;
+  }
+
+  .leftcolumn {
+    display: none;
+  }
+
   .content {
     padding: 0px;
     margin: 0 auto;
   }
 
+  .hpar {
+    display: none;
+  }
+ 
   .topicstitle {
     font-size: 1.7rem;
   }

themes/sandpoints/layouts/_default/list.html

@@ -2,7 +2,7 @@
 {{$currentNode := . }}
 <div class="syllabustitle"><span class="sup">syllabus⁄{{ substr .Title 0 1  }}</span>{{ substr .Title 1 }}</div></div>
 
-<div class="grid">
+<div class="grid syllabusgrid">
     <div class="leftcolumn">
         {{ if ne (trim .Page.TableOfContents "\n") "<nav id=\"TableOfContents\"></nav>" }}
           {{ .Page.TableOfContents }}

themes/sandpoints/layouts/partials/header.html

@@ -1,9 +1,8 @@
 {{ $currentSession := . }}
 
-
-{{ if not .IsHome }}
 <div class="header">
 <a href="#" onclick='toggle({{ .File.Dir }})' class="dotslash">./</a>
+{{ if not .IsHome }}
          <a href="{{ .Site.Home.RelPermalink }}{{ if eq hugo.Environment "offline" }}index.html{{ end }}"><span class="sup">{{ substr $.Site.Home.Title 0 1  }}</span><i>{{ substr $.Site.Home.Title 1 }}</i></a>
    {{ end  }}