tweak css sidebar to be responsive

keithamus · keithamus · commit 9438ebb96de6 · 2022-10-20T16:36:40.000+01:00
diff --git a/docs/_includes/sidebar.html b/docs/_includes/sidebar.html
@@ -1,4 +1,4 @@
-<aside class="col-lg-3 pl-4 pt-1 pb-1 bg-gray">
+<aside class="sidebar position-md-sticky px-4 col-lg-3 py-4 py-md-1 mb-4 mb-md-0 pb-1 bg-gray">
   <label class="d-flex mr-4 flex-items-center">
     <span class="mr-4">Version</span> 
     <select class="flex-1" onchange="window.location.href = this.value">
@@ -8,7 +8,7 @@
   </label>
   <br>
 
-  <nav class="position-sticky top-100px">
+  <nav>
     <ol class="f3-light ml-4">
       {% for item in sidebarItems %}
       <li class="py-1">
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -21,13 +21,12 @@
     <link rel="apple-touch-icon" sizes="512x512" href="{{ site.baseurl }}/icons/icon-512x512.png?">
     <link rel="icon" href="{{ site.baseurl }}/icons/icon-48x48.png">
   </head>
-  <body class="d-flex flex-column height-full">
-    <header class="position-sticky top-0 d-md-flex"
-      style="z-index: 1; background-image: linear-gradient(to top, var(--color-bg-canvas-shadow), var(--color-bg-canvas) 25%)">
-      <div class="flex-1 pl-3 pb-6 col-md-3 {% if page.layout != "default" %}bg-gray{% endif %}">
+  <body class="d-flex flex-column min-height-full">
+    <header class="d-flex position-md-sticky top-0 d-md-flex main-header">
+      <div class="logo flex-1 pl-3 pb-6 col-md-3 {% if page.layout != "default" %}bg-gray{% endif %}">
         <h1 class="m-0 mt-md-2">Catalyst</h1>
       </div>
-      <nav class="f3 col-md-9 d-flex flex-justify-center flex-md-justify-end">
+      <nav class="f3 mr-4 mr-md-0 col-md-9 d-flex flex-justify-center flex-md-justify-end">
         <ul class="d-flex list-style-none mr-md-6">
           <li class="ml-3 mt-3 mb-3">
             <a href="{{ site.baseurl }}/">
diff --git a/docs/custom.css b/docs/custom.css
@@ -60,6 +60,47 @@ a {
   color: var(--color-accent-fg);
 }
 
+.min-height-full {
+  min-height: 100vh
+}
+
+.main-header {
+  height: 5rem;
+  z-index: 1;
+  background-image: linear-gradient(to top, var(--color-bg-canvas-shadow), var(--color-bg-canvas) 25%);
+}
+
+:root {
+  --logo-width: 18rem;
+}
+
+.logo {
+  min-width: var(--logo-width);
+}
+
+.sidebar {
+  height: calc(100vh - 5rem);
+  top: 5rem;
+  min-width: var(--logo-width);
+}
+
+@media only screen and (max-device-width : 768px) {
+  .main-header {
+    height: auto;
+    background: none;
+  }
+
+  .sidebar {
+    height: auto;
+  }
+
+  .logo.bg-gray {
+    background-color: inherit !important;
+    min-width: 9rem;
+  }
+}
+
+
 /* Sidebar */
 /* NB: `!important` is already used; so it’s required here */
 .bg-gray {
@@ -116,4 +157,4 @@ a {
   padding: 16px;
   border-radius: 4px;
   flex: 1;
-}
+}
