Consistency changes wrt nick_site, makes page footer slightly taller
authorNick Downing <nick@ndcode.org>
Tue, 1 Feb 2022 09:19:15 +0000 (20:19 +1100)
committerNick Downing <nick@ndcode.org>
Tue, 1 Feb 2022 09:19:15 +0000 (20:19 +1100)
_lib/navbar.jst
css/bootstrap/_custom.scss
css/bootstrap/_nav.scss
css/bootstrap/_variables.scss

index edd7c80..848488d 100644 (file)
@@ -259,7 +259,7 @@ return async (env, head, body, scripts) => {
 
             await body(_out)
 
-            footer.extend-background {
+            footer.page-footer.extend-background.py-5 {
               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") {}
               }
@@ -277,7 +277,7 @@ return async (env, head, body, scripts) => {
 
               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.mb-0 {`Copyright © ${new XDate(env.now).getUTCFullYear()} ${copyright}.`}
             }
           }
         }
index c04669a..6de27a1 100644 (file)
@@ -27,6 +27,22 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
   padding-right: calc(.5 * (100vw - 100%));
 }
 
+// use within a grid column to extend the background to left/right
+.grid-gutter-background {
+  margin-left: -.5 * $grid-gutter-width;
+  margin-right: -.5 * $grid-gutter-width;
+  padding-left: .5 * $grid-gutter-width;
+  padding-right: .5 * $grid-gutter-width;
+}
+
+.sidebar {
+  position: sticky;
+  top: 0;
+  max-height: 100vh;
+  overflow-y: auto;
+  background-color: $gray-200;
+}
+
 // 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
@@ -72,9 +88,11 @@ $icon-sizes: (
   margin-bottom: .5em;
 }
 
-footer, .footer {
-  padding-top: 35px;
-  padding-bottom: 25px;
+.page-header {
+  background-color: theme-color-level("primary", $alert-bg-level);
+}
+
+.page-footer {
   background-color: $gray-400;
   a {
     color: $footer-link-color;
index 82a3ec0..102bf7a 100644 (file)
   }
 }
 
+// Nick (for sidebar)
+.nav-link2 {
+  @include hover-focus() {
+    background: $nav-link-hover-bg2; // Nick
+  }
+}
+
 //
 // Tabs
 //
index 5ed78b6..23f1a51 100644 (file)
@@ -197,7 +197,8 @@ $grid-breakpoints: (
   sm: 576px,
   md: 768px,
   lg: 992px,
-  xl: 1200px
+  xl: 1200px,
+  //xxl: 1500px // Nick (for sidebar)
 ) !default;
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@@ -212,7 +213,8 @@ $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1140px
+  xl: 1140px,
+  //xxl: 1420px // Nick (for sidebar)
 ) !default;
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");
@@ -706,6 +708,7 @@ $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-link-hover-bg2:                $gray-400 !default; // Nick (for sidebar)
 
 $nav-tabs-border-color:             $gray-300 !default;
 $nav-tabs-border-width:             $border-width !default;