Fix sticky bug on small viewports, improve other viewports
authorNick Downing <nick@ndcode.org>
Wed, 2 Feb 2022 10:52:34 +0000 (21:52 +1100)
committerNick Downing <nick@ndcode.org>
Sat, 12 Feb 2022 01:53:36 +0000 (12:53 +1100)
_lib/navbar.jst
css/bootstrap/_custom.scss

index e6f2131..db36ffd 100644 (file)
@@ -129,7 +129,7 @@ return async (env, head, body, scripts) => {
 
       div.container-fluid {
         div.row {
-          div.'col-sm-6'.'col-md-4'.'col-lg-3'.'col-xxl-2'.sidebar {
+          div.'col-md-4'.sidebar {
             div.'mt-1'.mb-4 {
               div(style="width: 128px; height: 128px;") {
                 _out.push(avatar_maker)
@@ -245,7 +245,7 @@ return async (env, head, body, scripts) => {
             //}
           }
 
-          div.col-xl-8 {
+          div.'col-md-8'.'col-xl-7'/*.'col-xxl-6'*/ {
             await body(_out)
 
             footer.page-footer.grid-gutter-background.py-5 {
index 2579812..6fad316 100644 (file)
@@ -36,11 +36,14 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
 }
 
 .sidebar {
-  position: sticky;
-  top: 0;
-  min-height: 100vh;
-  max-height: 100vh;
-  overflow-y: auto;
+  @include media-breakpoint-up(md) {
+    position: sticky;
+    top: 0;
+    min-height: 100vh;
+    max-height: 100vh;
+    max-width: 350px;
+    overflow-y: auto;
+  }
   background-color: $gray-200;
 }