Displaying which page is currently active

themes/datacoop2020/assets/static/css/style.scss

@@ -153,7 +153,7 @@ aside nav ol {
 aside nav ol li a {
     display             : block;
     font-size           : 2rem;
-    padding             : 0.5rem 0;  
+    margin              : 0.5rem 0;  
     text-decoration     : none;
 }
 
@@ -161,6 +161,11 @@ aside nav ol li a:hover {
     text-decoration     : underline;
 }
 
+aside nav ol li a.active {
+    font-weight         : bold;
+}
+
+
 aside #menu-toggle {
     display             : none;
     font-size           : 2em;
@@ -191,6 +196,7 @@ aside header a img {
     body {
         flex-direction      : column;
         border              : 0;
+        line-height         : 2rem;
     }
 
     aside {
@@ -208,11 +214,6 @@ aside header a img {
         margin              : calc(var(--base-grid) / 2) var(--base-grid);
     }
 
-    aside header a {
-        width               : 35%;
-        max-width           : 35%;
-    }
-
     aside nav {
         display             : none;
     }

themes/datacoop2020/layouts/_default/baseof.html

@@ -5,6 +5,7 @@
         <aside>
             <header>
                 <a href="index.html"><img src="{{ printf "/static/img/logo_%s.svg" .Site.Language.Lang | absURL }}" alt="data coop logo" width="240" height="140"></a>
+
                 <div class="nav-toggle" id="nav-toggle-header">
                     <span id="nav-toggle-a"></span> 
                     <span id="nav-toggle-b"></span> 
@@ -19,20 +20,20 @@
             </article>
         </main>
         <script>
-            var menu = document.getElementById("nav-toggle-header")
-            var nav = document.getElementsByTagName('nav')[0] 
+            var menu = document.getElementById("nav-toggle-header");
+            var nav = document.getElementsByTagName('nav')[0];
 
             function toggleMenu() {
                 if ( menu.classList.contains("display") ) {
-                    menu.classList.remove("display")
-                    nav.classList.remove("display")
+                    menu.classList.remove("display");
+                    nav.classList.remove("display");
                 } else {
-                    menu.classList.add("display")
-                    nav.classList.add("display")
+                    menu.classList.add("display");
+                    nav.classList.add("display");
                 }
             }
 
-            menu.addEventListener( "click", toggleMenu )
+            menu.addEventListener("click", toggleMenu);
         </script>
     </body>
 </html>

themes/datacoop2020/layouts/_default/single.html

@@ -3,5 +3,4 @@
 <h1>{{ .Title | markdownify }}</h1>
 {{ .Content }}
 
-
 {{- end -}}

themes/datacoop2020/layouts/partials/nav.html

@@ -14,4 +14,3 @@
         </ol>
     </footer>
 </nav>
-