Re-implement right-hand margin to give a balanced look on much larger screens
authorNick Downing <nick@ndcode.org>
Thu, 10 Feb 2022 06:48:48 +0000 (17:48 +1100)
committerNick Downing <nick@ndcode.org>
Sat, 12 Feb 2022 01:53:36 +0000 (12:53 +1100)
_lib/navbar.jst
css/bootstrap/_custom.scss
css/bootstrap/_variables.scss

index 809ba00..171bf2b 100644 (file)
@@ -247,7 +247,7 @@ return async (env, head, body, scripts) => {
             }
           }
 
-          div.col-md {
+          div.col-md.sidebar-content {
             await body(_out)
 
             footer.page-footer.grid-gutter-background.py-5 {
@@ -269,6 +269,7 @@ return async (env, head, body, scripts) => {
               p.mb-0 {`Copyright © ${new XDate(env.now).getUTCFullYear()} ${copyright}.`}
             }
           }
+          div.col-md.sidebar-dummy {}
         }
       }
 
index d721b5e..3a074d9 100644 (file)
@@ -63,6 +63,20 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
     display: none;
   }
 }
+//.sidebar-content {
+//  max-width: 1280px;
+//}
+.sidebar-dummy {
+  flex: 0 0 0px;
+  padding-left: 0px;
+  padding-right: 0px;
+  @include media-breakpoint-up(2xl) {
+    flex-basis: 175px;
+  }
+  @include media-breakpoint-up(3xl) {
+    flex-basis: 350px;
+  }
+}
 
 // needed for svg icons inside buttons, card headers, etc
 // creates an inline element with correct width but no height
index 83baccc..e1b481c 100644 (file)
@@ -198,7 +198,8 @@ $grid-breakpoints: (
   md: 768px,
   lg: 992px,
   xl: 1200px,
-  xxl: 1500px // Nick
+  2xl: 1500px, // Nick
+  3xl: 1800px // Nick
 ) !default;
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@@ -214,7 +215,8 @@ $container-max-widths: (
   md: 720px,
   lg: 960px,
   xl: 1140px,
-  xxl: 1420px // Nick
+  2xl: 1420px, // Nick
+  3xl: 1700px // Nick
 ) !default;
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");