Highlight current heading in sidebar TOC

_layouts/delta-refgram.html

@@ -33,6 +33,8 @@
     <c1-1>
 
 <div class="toc">
+    <div class="toc-header">Table of contents</div>
+    <div class="toc-title"><a style="color:white" href="#">{{ page.title }}</a></div>
     {% include toc.html html=content ordered=true h_min=2 h_max=3 sanitize=true %}
 </div>
 {{ content }}
@@ -56,4 +58,5 @@
 </body>
 
 <script type="text/javascript" src="../css/interlinear.js"></script>
+<script type="text/javascript" src="../css/toc.js"></script>
 </html>

refgram/css/style.css

@@ -665,24 +665,6 @@ table.conjunctionexamples th {
 	}
 }
 
-@media (min-width: 1200px) {
-  .delta-refgram .toc {
-    position: fixed;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    display: block;
-    border-top: none;
-    border-bottom: none;
-    width: calc(min(15%, 250px));
-    overflow-y: auto;
-  }
-  .delta-refgram {
-    margin-left: calc(max(-15%, -250px));
-    position: relative;
-  }
-}
-
 .toc {
   border: 1px solid #00aaff;
   margin: auto;
@@ -691,6 +673,17 @@ table.conjunctionexamples th {
   font-size: 14px;
 }
 
+.toc-header {
+  text-align: center;
+}
+
+.toc-title {
+  display: none;
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+}
+
 .toc ol {
   padding-inline-start: 20px;
 }
@@ -702,4 +695,28 @@ table.conjunctionexamples th {
 
 .toc a:hover {
   text-decoration: underline;
-}
+}
+
+@media (min-width: 1200px) {
+  .delta-refgram .toc {
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: block;
+    border-top: none;
+    border-bottom: none;
+    width: calc(min(15%, 250px));
+    overflow-y: hidden;
+  }
+  .toc-header {
+    display: none;
+  }
+  .toc-title {
+    display: block;
+  }
+  .delta-refgram {
+    margin-left: calc(max(-15%, -250px));
+    position: relative;
+  }
+}

refgram/css/toc.js

@@ -0,0 +1,25 @@
+function handleScroll() {
+    const as = [...document.querySelectorAll(".toc a")].reverse();
+    const toc = document.querySelector(".toc");
+    const scrollable = toc.scrollHeight > toc.clientHeight;
+    let done = false;
+    for (const a of as) {
+        a.style.color = "";
+        if (!done) {
+            const header = document.getElementById(a.href.split("#")[1]);
+            if (!header) continue;
+            const top = header.getBoundingClientRect().top;
+            if (top < window.innerHeight / 5) {
+                a.style.color = "white";
+                if (scrollable) {
+                    a.scrollIntoView({ block: "center" });
+                }
+                done = true;
+            }
+        }
+    }
+    document.querySelector(".toc-title>a").style.color = done ? "" : "white";
+}
+
+window.addEventListener("scroll", handleScroll);
+handleScroll();

refgram/orthography/index.html

@@ -5,6 +5,8 @@
 ---
 <h1 id="orthography"><a href="#orthography">Orthography</a></h1>
 
+<h2 id="latin_orthography"><a href="#latin_orthography">Latin orthography</a></h2>
+
 <table class="soundsymbols">
 <tr>
 	<td><button class="listen" onclick="PlaySound('mameı')"><div class="alphabet-ipa">/m/</div><div class="symbol">m</div><div class="exword">meı<!--<br><span class="exword-ipa">/m/</span>--></div></button></td>
@@ -129,9 +131,9 @@ <h3 id="orthographic_conventions"><a href="#orthographic_conventions">Orthograph
 <p>In informal, relaxed settings, these conventions need not apply.</p>
 
 
-<h2 id="derani"><a href="#derani" class="glyphs" style="font-size: 39px">󱚶󱚴󱚻󱚺󱚵󱚹</a></h2>
+<h2 id="derani"><a href="#derani">Derani</a></h2>
 
-<p><span class="toaq">Deranı</span> (pronounced [ˈdɛːɾani]) is the native writing system of Toaq and the official script of <i>Toaq Delta</i>. It is written in a pink font throughout the website, while romanized words are written in light blue.</p>
+<p><span class="toaq">Deranı</span> <span class="glyphs">󱚶󱚴󱚻󱚺󱚵󱚹</span> (pronounced [ˈdɛːɾani]) is the native writing system of Toaq and the official script of <i>Toaq Delta</i>. It is written in a pink font throughout the website, while romanized words are written in light blue.</p>
 
 <p><span class="toaq">Deranı</span> is an alphabet with a number of special symbols and markings for various grammar-related phenomena.</p>
 
@@ -239,7 +241,7 @@ <h3 id="the_derani_vowels"><a href="#the_derani_vowels">The Derani vowels</a></h
 
 <p>The default assumption when reading <span class="toaq">Deranı</span> words should be that they begin with a consonant. If the second letter is a consonant-only glyph, then the reader immediately knows that the first letter must be a vowel. With practice, this becomes automatic.</p>
 
-<h3 id="tone_marking"><a href="#tone_marking">Tone marking</a></h3>
+<h3 id="tone_marking_d"><a href="#tone_marking_d">Tone marking</a></h3>
 
 <p>The falling tone is never marked.</p>
 
@@ -282,7 +284,7 @@ <h3 id="tone_marking"><a href="#tone_marking">Tone marking</a></h3>
 	! 'the sand'
 </div>
 
-<h3 id="prefix_stem_delineation"><a href="#prefix_stem_delineation">Prefix-stem delineation</a></h3>
+<h3 id="prefix_stem_delineation_d"><a href="#prefix_stem_delineation_d">Prefix-stem delineation</a></h3>
 
 <p>The stem of a word is separated from its prefixes by <span class="glyphsl">󱛒</span></p>