From: Nick Downing <nick@ndcode.org>
Date: Tue, 11 Jan 2022 05:28:41 +0000 (+1100)
Subject: Fix breadcrumbs and vertical nav menus
X-Git-Url: https://git.ndcode.org/public/gitweb.cgi?p=ndcode_site.git;a=commitdiff_plain;h=8f77b3fbced1e579cc2b75d18ecfb2275b7a04dc

Fix breadcrumbs and vertical nav menus
---

diff --git a/breadcrumbs.jst b/breadcrumbs.jst
index 424e9d1..7ae21c9 100644
--- a/breadcrumbs.jst
+++ b/breadcrumbs.jst
@@ -15,11 +15,11 @@ return async (env, _out) => {
   // present components as breadcrumbs, except last one as text
   h2 {
     for (let i = 0; i < components.length - 1; ++i) {
-      a.text-h4(
+      a.h4(
         href=`${pathname.slice(0, components[i].index)}/index.html`
       ) {`${components[i].name}`}
       ' '
-      span.text-h5 {'>'}
+      span.h5 {'>'}
       ' '
     }
     `${components[components.length - 1].name}`
diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss
index 8fb1728..73f430c 100644
--- a/css/bootstrap/_custom.scss
+++ b/css/bootstrap/_custom.scss
@@ -3,31 +3,6 @@
 $footer-link-color: darken(theme-color("success"), 10%);
 $footer-link-hover-color: darken($footer-link-color, 10%);
 
-// use these for heading-sized text when you don't want extra spacing
-//.text-h1 {
-//  font-size: $font-size-h1;
-//}
-//
-//.text-h2 {
-//  font-size: $font-size-h2;
-//}
-//
-//.text-h3 {
-//  font-size: $font-size-h3;
-//}
-//
-//.text-h4 {
-//  font-size: $font-size-h4;
-//}
-//
-//.text-h5 {
-//  font-size: $font-size-h5;
-//}
-//
-//.text-h6 {
-//  font-size: $font-size-h6;
-//}
-
 // apply this to svg, see _svg/icon_search.svg
 .svg-icon {
   display: inline-block;
@@ -41,7 +16,7 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
 }
 
 // use this to display the pi symbol without horrible blocky look in Sans
-.text-serif {
+.serif {
   font-family: $font-family-serif;
 }
 
diff --git a/css/bootstrap/_nav.scss b/css/bootstrap/_nav.scss
index fad684e..82a3ec0 100644
--- a/css/bootstrap/_nav.scss
+++ b/css/bootstrap/_nav.scss
@@ -18,6 +18,7 @@
 
   @include hover-focus() {
     text-decoration: none;
+    background: $nav-link-hover-bg; // Nick
   }
 
   // Disabled state lightens text
diff --git a/css/bootstrap/_variables.scss b/css/bootstrap/_variables.scss
index a337f45..745187c 100644
--- a/css/bootstrap/_variables.scss
+++ b/css/bootstrap/_variables.scss
@@ -697,6 +697,7 @@ $zindex-tooltip:                    1070 !default;
 $nav-link-padding-y:                .5rem !default;
 $nav-link-padding-x:                1rem !default;
 $nav-link-disabled-color:           $gray-600 !default;
+$nav-link-hover-bg:                 $gray-200 !default; // Nick
 
 $nav-tabs-border-color:             $gray-300 !default;
 $nav-tabs-border-width:             $border-width !default;
diff --git a/index.html.jst b/index.html.jst
index a19c10b..118c236 100644
--- a/index.html.jst
+++ b/index.html.jst
@@ -21,37 +21,37 @@ return async env => {
         i {'[Actually don\'t because it\'s still under construction]'}
       }
 
-      ul.nav.nav-stacked {
-        li {
-          a {
+      ul.nav.flex-column {
+        li.nav-item {
+          a.nav-link {
             table.icon-and-text {
               tr {
                 td {
                   _out.push(icon_pitree)
                 }
                 td {
-                  span.text-h1 {
-                    span.text-serif {'π'}
+                  span.h1 {
+                    span.serif {'π'}
                     'tree'
                   }
                   br {}
-                  span.text-h3 {'the source code analysis and transformation framework'}
+                  span.h3 {'the source code analysis and transformation framework'}
                 }
               }
             }
           }
         }
-        li {
-          a {
+        li.nav-item {
+          a.nav-link {
             table.icon-and-text {
               tr {
                 td {
                   _out.push(icon_jst)
                 }
                 td {
-                  span.text-h1{'JST'}
+                  span.h1{'JST'}
                   br {}
-                  span.text-h3{'the web development framework with JavaScript Templates'}
+                  span.h3{'the web development framework with JavaScript Templates'}
                 }
               }
             }
diff --git a/my_account/index.html.jst b/my_account/index.html.jst
index 234367b..42331ee 100644
--- a/my_account/index.html.jst
+++ b/my_account/index.html.jst
@@ -307,20 +307,20 @@ return async env => {
         // signed out
         p {'For account maintenance, please click on one of the options below.'}
 
-        ul.nav.nav-stacked {
+        ul.nav.flex-column {
           let entries = menu.entries
           for (let i = 0; i < entries.length; ++i) {
             let entry = entries[i]
             if (Object.prototype.hasOwnProperty.call(entry, 'icon'))
-              li {
-                a(href=`${entry.dir}/index.html`) {
+              li.nav-item {
+                a.nav-link(href=`${entry.dir}/index.html`) {
                   table.icon-and-text {
                     tr {
                       td {
                         _out.push(await env.site.get_min_svg(entry.icon))
                       }
                       td {
-                        span.text-h2{`${entry.name}`}
+                        span.h2{`${entry.name}`}
                       }
                     }
                   }