Merge pull request #3 from gracegrimwood/issue-31-scroll-margin-fix

fix sticky header collapse, add scroll margin to content
kroxylicious · Feb 7, 2024 · abc70d2 · abc70d2
2 parents cecae3d + cab7ed9
commit abc70d2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -10,9 +10,9 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js" integrity="sha512-X/YkDZyjTf4wyc2Vy16YGCPHwAY8rZJY+POgokZjQB2mhIRFJCckEGc6YyX9eNsPfn0PzThEuNs+uaomE5CO6A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     {% seo %}
 </head>
-<body class="d-flex flex-column vh-100" data-bs-theme="light">
+<body class="d-flex flex-column" data-bs-theme="light">
 {% include nav.html %}
-<div class="container-fluid px-0" data-bs-theme="light">
+<div class="container-fluid px-0 krx-content" data-bs-theme="light">
     {{ content }}
 </div>
 {% include footer.html %}

diff --git a/_sass/kroxylicious.scss b/_sass/kroxylicious.scss
@@ -33,6 +33,14 @@ $navbar-dark-disabled-color: rgba($white, 0.45);
 // Custom bootstrap variables must be set or imported *before* bootstrap.
 @import "./bootstrap/scss/bootstrap";
 
+body {
+  height: fit-content!important;
+}
+
+.krx-content * {
+  scroll-margin-top: 5rem!important;
+}
+
 .list-group-item:hover {
   background-color: tint-color($primary, 50%);
 }