fixes

static/page.css

@@ -232,14 +232,27 @@ body {
   line-height: 1.25;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 16px;
   transform: translateX(-10%);
 }
 .pagenav > div {
-  height: min(3vw, 53px);
-  overflow: hidden;
+  /* height: min(3vw, 53px); */
+  /* overflow: hidden; */
+  display: flex;
+  justify-content: center;
   text-align: center;
+
   cursor: pointer;
+
+  font-family: SourceSansPro;
+  color: #05be85;
+  font-size: min(1.56vw, 24px);
+  letter-spacing: 2px;
+  vertical-align: middle;
+  transition: all 0.2s ease-out;
+}
+.pagenav > div:hover {
+  font-size: min(1.6vw, 26px);
 }
 .pagenav > div::before {
   content: "";

wiki/pages/engineering.html

@@ -14,13 +14,36 @@ endblock %}
   </div>
   <div class="pagebody">
     <div class="pagenav">
-      <!-- <div onclick="goTo(document.getElementById('one'))"><span id="subtitle1" style="color: #62D881;"><strong>DRY LAB</strong></span></div>
-        <div onclick="goTo(document.getElementById('two'))"><span id="subtitle2" style="color: #62D881;">The uTP sequence</div>
-
-        <div onclick="goTo(document.getElementById('three'))"><span id="subtitle3" style="color: #62D881;"><strong>WET LAB</strong></span></div>
-        <div onclick="goTo(document.getElementById('four'))"><span id="subtitle4" style="color: #62D881;">uTP expression</div>
-        <div onclick="goTo(document.getElementById('five'))"><span id="subtitle5" style="color: #62D881;">UCYN-A fusion</div>
-        <div onclick="goTo(document.getElementById('six'))"><span id="subtitle6" style="color: #62D881;"><strong>References</strong></div> -->
+      <div id="subtitle1" onclick="goTo(document.getElementById('c1'))">
+        UCYN-A transit peptide sequences
+      </div>
+      <div id="subtitle2" onclick="goTo(document.getElementById('c2'))">
+        uTP Dry-lab Analysis - Cycle 1
+      </div>
+      <div id="subtitle3" onclick="goTo(document.getElementById('c3'))">
+        uTP Dry-lab Analysis - Cycle 2
+      </div>
+      <div id="subtitle4" onclick="goTo(document.getElementById('c4'))">
+        uTP Dry-lab Analysis - Cycle 3
+      </div>
+      <div id="subtitle5" onclick="goTo(document.getElementById('c5'))">
+        Plasmid Construction - Cycle 1
+      </div>
+      <div id="subtitle6" onclick="goTo(document.getElementById('c6'))">
+        Plasmid Construction using DpnI...
+      </div>
+      <div id="subtitle7" onclick="goTo(document.getElementById('c7'))">
+        Saccharomyces cerevisiae Transformation
+      </div>
+      <div id="subtitle8" onclick="goTo(document.getElementById('c8'))">
+        PEG Fusion - Cycle 1
+      </div>
+      <div id="subtitle9" onclick="goTo(document.getElementById('c9'))">
+        PEG Fusion - Cycle 2
+      </div>
+      <div id="subtitle10" onclick="goTo(document.getElementById('c10'))">
+        Chlamydomonas reinhardtii Transformation
+      </div>
     </div>
 
     <div class="pagecontent">
@@ -631,9 +654,7 @@ endblock %}
       </div>
 
       <div class="h" id="c10">
-        <div class="h2">
-          <em>_Chlamydomonas reinhardtii_</em> Transformation
-        </div>
+        <div class="h2"><em>Chlamydomonas reinhardtii</em> Transformation</div>
       </div>
       <div class="engineering-dbtl-cycle">
         <div class="engineering-dbtl">
@@ -808,6 +829,47 @@ endblock %}
 </div>
 
 <script>
+  var TopDistance = 120;
+  let elements = [
+    document.getElementById("c1"),
+    document.getElementById("c2"),
+    document.getElementById("c3"),
+    document.getElementById("c4"),
+    document.getElementById("c5"),
+    document.getElementById("c6"),
+    document.getElementById("c7"),
+    document.getElementById("c8"),
+    document.getElementById("c9"),
+    document.getElementById("c10"),
+  ];
+  window.goTo = function (el) {
+    document.documentElement.scrollTop +=
+      el.getBoundingClientRect().top - TopDistance;
+  };
+  function Highlight(el, subtitle) {
+    if (
+      el.getBoundingClientRect().top < TopDistance + 1 &&
+      el.getBoundingClientRect().bottom > TopDistance
+    ) {
+      subtitle.style.color = "#62D881";
+    } else {
+      subtitle.style.color = "#185A4F";
+    }
+  }
+  function HighlightCheck() {
+    Highlight(elements[0], document.getElementById("subtitle1"));
+    Highlight(elements[1], document.getElementById("subtitle2"));
+    Highlight(elements[2], document.getElementById("subtitle3"));
+    Highlight(elements[3], document.getElementById("subtitle4"));
+    Highlight(elements[4], document.getElementById("subtitle5"));
+    Highlight(elements[5], document.getElementById("subtitle6"));
+    Highlight(elements[6], document.getElementById("subtitle7"));
+    Highlight(elements[7], document.getElementById("subtitle8"));
+    Highlight(elements[8], document.getElementById("subtitle9"));
+    Highlight(elements[9], document.getElementById("subtitle10"));
+  }
+  window.addEventListener("scroll", HighlightCheck);
+
   document.addEventListener("DOMContentLoaded", function () {
     const carousels = document.querySelectorAll(
       ".engineering-dbtl-cycle:not(.initialized)"