change color for navigation dots

Author: floesche

index.html

@@ -53,24 +53,27 @@
 
   <main class="viewer-split" aria-label="Cell Type previews">
     <nav id="nav-line" class="nav-line is-hidden" aria-label="Section Navigation">
-      <svg class="nav-line-svg" viewBox="0 0 15 500" preserveAspectRatio="xMidYMid meet">
-        <line x1="7.5" y1="0" x2="7.5" y2="500" stroke="rgba(80, 80, 80, 0.8)" stroke-width="0.5" stroke-dasharray="2 2" vector-effect="non-scaling-stroke"/>
+      <svg class="nav-line-svg" viewBox="0 0 15 600" preserveAspectRatio="xMidYMid meet">
+        <line x1="7.5" y1="0" x2="7.5" y2="600" stroke="rgba(80, 80, 80, 0.8)" stroke-width="0.5" stroke-dasharray="2 2" vector-effect="non-scaling-stroke"/>
         <circle class="nav-circle" data-anchor="top" cx="7.5" cy="5" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
           <title>Top</title>
         </circle>
-        <circle class="nav-circle" data-anchor="eyemaps" cx="7.5" cy="100" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
+        <circle class="nav-circle" data-anchor="layer-stats" cx="7.5" cy="100" r="7.5" fill="rgba(90, 90, 90, 0.4)" vector-effect="non-scaling-stroke">
+          <title>Synapse count per Layer (if available)</title>
+        </circle>
+        <circle class="nav-circle" data-anchor="eyemaps" cx="7.5" cy="200" r="7.5" fill="rgba(90, 90, 90, 0.4)" vector-effect="non-scaling-stroke">
           <title>Eye Maps (if available)</title>
         </circle>
-        <circle class="nav-circle" data-anchor="neuron-visualization" cx="7.5" cy="200" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
+        <circle class="nav-circle" data-anchor="neuron-visualization" cx="7.5" cy="300" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
           <title>Neuron Visualization</title>
         </circle>
-        <circle class="nav-circle" data-anchor="roi-innervation" cx="7.5" cy="300" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
+        <circle class="nav-circle" data-anchor="roi-innervation" cx="7.5" cy="400" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
           <title>ROI Innervation</title>
         </circle>
-        <circle class="nav-circle" data-anchor="s-c-i" cx="7.5" cy="400" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
+        <circle class="nav-circle" data-anchor="s-c-i" cx="7.5" cy="500" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
           <title>Synaptic Connectivity Inputs</title>
         </circle>
-        <circle class="nav-circle" data-anchor="s-c-o" cx="7.5" cy="495" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
+        <circle class="nav-circle" data-anchor="s-c-o" cx="7.5" cy="595" r="7.5" fill="rgba(80, 80, 80, 0.9)" vector-effect="non-scaling-stroke">
           <title>Synaptic Connectivity Outputs</title>
         </circle>
       </svg>