Add highlight to currently-selected education course

public/style.css

@@ -8306,6 +8306,13 @@ nav.timecodes {
   text-align: center;
   margin: 10px 0; }
 
+.edu-course.highlight {
+  border-left: 0.25rem solid black;
+  border-color: #666;
+  border-color: var(--link-color);
+  background-color: #ccc;
+  background-color: var(--theme-color-dimmest); }
+
 .edu-course .edu-article.coming-soon {
   font-style: italic; }
 

src/rawdata/scss/_education.scss

@@ -1,4 +1,10 @@
 .edu-course {
+    &.highlight {
+        border-left: 0.25rem solid black;
+        @include usevar(border-color, link-color);
+        @include usevar(background-color, theme-color-dimmest);
+    }
+
     .edu-article.coming-soon {
         @extend .c--dimmer;
         font-style: italic;

src/templates/src/education_index.html

@@ -85,5 +85,29 @@
             <div><a href="{{ .NewArticleUrl }}"><span class="big pr1">+</span> New Article</a></div>
         </div>
     {{ end }}
+
+    <script>
+        function highlightHash(hash) {
+            if (!hash) {
+                return;
+            }
+
+            const courses = document.querySelectorAll('.edu-course');
+            for (const course of courses) {
+                course.classList.remove('highlight');
+            }
+            const selectedCourse = document.querySelector(hash);
+            if (selectedCourse) {
+                selectedCourse.classList.add('highlight');
+            }
+        }
+        highlightHash(window.location.hash);
+
+        for (const a of document.querySelectorAll('a.edu-topic')) {
+            a.addEventListener('click', e => {
+                highlightHash(e.target.closest('a').hash);
+            });
+        }
+    </script>
 </div>
 {{ end }}