Merge pull request #22 from glennsong09/main

Fix sidebar

Author: glennsong09

_sass/custom/custom.scss

@@ -1,39 +1,67 @@
 // Custom styles for HDF5 Security site
 
-// Full-width layout - sidebar on left edge
+// Full-width layout - sidebar pinned to left edge
+body {
+  display: flex !important;
+  flex-direction: row !important;
+  min-height: 100vh;
+}
+
 .side-bar {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 264px;
-  padding: 1rem;
-  overflow-y: auto;
-  background-color: #f8fafc;
-  border-right: 1px solid #e2e8f0;
+  position: fixed !important;
+  left: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  width: 264px !important;
+  min-width: 264px !important;
+  max-width: 264px !important;
+  padding: 1rem !important;
+  overflow-y: auto !important;
+  background-color: #f8fafc !important;
+  border-right: 1px solid #e2e8f0 !important;
+  z-index: 100;
 }
 
 .main {
-  margin-left: 264px;
-  max-width: none;
-  padding: 2rem 3rem;
+  margin-left: 264px !important;
+  max-width: none !important;
+  width: calc(100% - 264px) !important;
+  padding: 2rem 3rem !important;
 }
 
 .main-content-wrap {
-  max-width: 900px;
+  max-width: 900px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+// Override any centering wrappers
+.wrapper,
+.container,
+.main-content {
+  max-width: none !important;
+  margin-left: 0 !important;
+  margin-right: auto !important;
 }
 
 @media (max-width: 800px) {
+  body {
+    flex-direction: column !important;
+  }
+
   .side-bar {
-    position: relative;
-    width: 100%;
-    border-right: none;
-    border-bottom: 1px solid #e2e8f0;
+    position: relative !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+    border-right: none !important;
+    border-bottom: 1px solid #e2e8f0 !important;
   }
 
   .main {
-    margin-left: 0;
-    padding: 1rem;
+    margin-left: 0 !important;
+    width: 100% !important;
+    padding: 1rem !important;
   }
 }