Simplify navbar with .extend-background class so we can use only one container

diff --git a/_lib/navbar.jst b/_lib/navbar.jst
index be95539..2fe089d 100644 (file)
--- a/_lib/navbar.jst
+++ b/_lib/navbar.jst
@@ -5,7 +5,7 @@ let XDate = require('xdate')
 let arrays_equal =
   (a, b) =>
     a.length === b.length && a.every((value, index) => value === b[index])
- 
+
 return async (env, head, body, scripts) => {
   //let cart = await _require('/online_store/cart.jst')
   let fa_arrow_circle_left = await env.site.get_min_svg('/_svg/fa_arrow-circle-left.svg')
@@ -100,15 +100,11 @@ return async (env, head, body, scripts) => {
   // component_titles[i] corresponds to component_names[i - 1], i >= 1
   env.component_names = component_names
   env.component_titles = component_titles
-  console.log('cn', component_names)
-  console.log('ct', component_titles)
 
   // note: menu_titles.length === menu_names.length + 1
   // menu_titles[0] corresponds to /, is 'Home' or similar
   // menu_titles[i] corresponds to menu_names[i - 1], i >= 1a
   // (navbar has Home appearing at same level as its immediate children)
-  console.log('mn', menu_names)
-  console.log('mt', menu_titles)
 
   await page(
     env,
@@ -192,102 +188,96 @@ return async (env, head, body, scripts) => {
             //  }
             //}
           }
-        }
-      }
-      nav.navbar.navbar-expand-lg.navbar-dark.bg-primary.scrollbar-fix {
-        div.container {
-          //a.navbar-brand(href="#") {'Navbar'}
-          //' '
-          button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation") {
-            span.navbar-toggler-icon {}
-          }
-          div.collapse.navbar-collapse#navbarSupportedContent {
-            ul.navbar-nav.mr-auto {
-              // the active entry in the navbar bar is based on which top-level
-              // page we are under, even if we are not directly on that page
-              // but one of its children, this may be unexpected as the active
-              // entry does not highlight on hover, but you can still click it;
-              // we determine here the path to the corresponding top-level page
-              let component_prefix = component_names.slice(0, 1)
-
-              for (let i = 0; i < menu_titles.length; ++i) {
-                // construct path to the top-level page about to be described
-                let menu_prefix =
-                  i == 0 ? [] : [menu_names[i - 1]]
-                let menu_prefix_path =
-                  menu_prefix.map(name => '/' + name).join('') + '/index.html'
-
-                if (arrays_equal(menu_prefix, component_prefix))
-                  li.nav-item.active {
-                    a.nav-link(href=menu_prefix_path) {
-                      `${menu_titles[i]}`
-                      span.sr-only {' (current)'}
+          nav.navbar.navbar-expand-lg.navbar-dark.bg-primary.extend-background {
+            //a.navbar-brand(href="#") {'Navbar'}
+            //' '
+            button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation") {
+              span.navbar-toggler-icon {}
+            }
+            div.collapse.navbar-collapse#navbarSupportedContent {
+              ul.navbar-nav.mr-auto {
+                // the active entry in the navbar bar is based on which top-level
+                // page we are under, even if we are not directly on that page
+                // but one of its children, this may be unexpected as the active
+                // entry does not highlight on hover, but you can still click it;
+                // we determine here the path to the corresponding top-level page
+                let component_prefix = component_names.slice(0, 1)
+
+                for (let i = 0; i < menu_titles.length; ++i) {
+                  // construct path to the top-level page about to be described
+                  let menu_prefix =
+                    i == 0 ? [] : [menu_names[i - 1]]
+                  let menu_prefix_path =
+                    menu_prefix.map(name => '/' + name).join('') + '/index.html'
+
+                  if (arrays_equal(menu_prefix, component_prefix))
+                    li.nav-item.active {
+                      a.nav-link(href=menu_prefix_path) {
+                        `${menu_titles[i]}`
+                        span.sr-only {' (current)'}
+                      }
                     }
-                  }
-                else
-                  li.nav-item {
-                    a.nav-link(href=menu_prefix_path) {
-                      `${menu_titles[i]}`
+                  else
+                    li.nav-item {
+                      a.nav-link(href=menu_prefix_path) {
+                        `${menu_titles[i]}`
+                      }
                     }
-                  }
+                }
+                //li.nav-item.dropdown {
+                //  a.nav-link.dropdown-toggle#navbarDropdown(href="#" role="button" data-toggle="dropdown" aria-expanded="false") {
+                //    'Dropdown'
+                //  }
+                //  div.dropdown-menu(aria-labelledby="navbarDropdown") {
+                //    a.dropdown-item(href="#") {
+                //      'Action'
+                //    }
+                //    ' '
+                //    a.dropdown-item(href="#") {
+                //      'Another action'
+                //    }
+                //    div.dropdown-divider {}
+                //    a.dropdown-item(href="#") {
+                //      'Something else here'
+                //    }
+                //  }
+                //}
+                //li.nav-item {
+                //  a.nav-link.disabled {
+                //    'Disabled'
+                //  }
+                //}
               }
-              //li.nav-item.dropdown {
-              //  a.nav-link.dropdown-toggle#navbarDropdown(href="#" role="button" data-toggle="dropdown" aria-expanded="false") {
-              //    'Dropdown'
-              //  }
-              //  div.dropdown-menu(aria-labelledby="navbarDropdown") {
-              //    a.dropdown-item(href="#") {
-              //      'Action'
-              //    }
-              //    ' '
-              //    a.dropdown-item(href="#") {
-              //      'Another action'
-              //    }
-              //    div.dropdown-divider {}
-              //    a.dropdown-item(href="#") {
-              //      'Something else here'
-              //    }
-              //  }
-              //}
-              //li.nav-item {
-              //  a.nav-link.disabled {
-              //    'Disabled'
-              //  }
-              //}
-            }
-            ul.navbar-nav.ml-auto {
-              li.nav-item {
-                a.nav-link#navbar-give-feedback(href="#") {'Give feedback'}
+              ul.navbar-nav.ml-auto {
+                li.nav-item {
+                  a.nav-link#navbar-give-feedback(href="#") {'Give feedback'}
+                }
               }
             }
           }
-        }
-      }
-      div.scrollbar-fix {
-        div.container {
+
           await body(_out)
-        }
-      }
-      footer.scrollbar-fix {
-        div.container {
-          a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
-            img(alt="Creative Commons License" style="border-width:0;" src="/images/by-sa_3.0_88x31.png") {}
-          }
-          p {
-            'This website is '
-            a(href="https://git.ndcode.org/public/ndcode_site.git") {
-              'open source'
-            }
-            ' and licensed under a '
+
+          footer.extend-background {
             a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
-              'Creative Commons Attribution-ShareAlike 3.0 Unported License'
+              img(alt="Creative Commons License" style="border-width:0;" src="/images/by-sa_3.0_88x31.png") {}
+            }
+            p {
+              'This website is '
+              a(href="https://git.ndcode.org/public/ndcode_site.git") {
+                'open source'
+              }
+              ' and licensed under a '
+              a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
+                'Creative Commons Attribution-ShareAlike 3.0 Unported License'
+              }
+              '.'
             }
-            '.'
-          }
 
-          p {'Example code fragments embedded within the text are placed in the public domain unless otherwise noted.'}
+            p {'Example code fragments embedded within the text are placed in the public domain unless otherwise noted.'}
 
-          p {`Copyright © ${new XDate(env.now).getUTCFullYear()} ${copyright}.`}
+            p {`Copyright © ${new XDate(env.now).getUTCFullYear()} ${copyright}.`}
+          }
         }
       }
 

diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss
index 53b4834..58393b7 100644 (file)
--- a/css/bootstrap/_custom.scss
+++ b/css/bootstrap/_custom.scss
@@ -12,6 +12,15 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
   padding-left: calc(100vw - 100%);
 }
 
+// place a container div around entire page, and then use this
+// to make the background on navbar or footer appear full-width
+.extend-background {
+  margin-left: calc(-.5 * (100vw - 100%));
+  margin-right: calc(-.5 * (100vw - 100%));
+  padding-left: calc(.5 * (100vw - 100%));
+  padding-right: calc(.5 * (100vw - 100%));
+}
+
 // needed for svg icons inside buttons, card headers, etc
 // creates an inline element with correct width but no height
 // the svg is positioned within this to vertically centre on a capital letter