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

[ndcode_site.git] / css / bootstrap / _custom.scss

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