Feat/header refactoring

navigation.toml

@@ -6,7 +6,7 @@ header = [
     { title = "Ecosystem", section = "ecosystem" },
     { title = "Homeserver", section = "homeserver" },
     { title = "Support us", href = "/support" },
-    { title = "Try Matrix", href = "/try-matrix/", primary = true },
+    { title = "Try Matrix", href = "/try-matrix/", button = true },
 ]
 
 footer_internal = [

sass/_base.scss

@@ -1,7 +1,11 @@
 :root {
     --page-max-width: 57rem;
     --page-with-toc-max-width: 81rem;
-    --navbar-height: 5.937rem;
+    --navbar-height: 4.25rem;
+
+    @media all and (min-width: 768px) {
+        --navbar-height: 5.875rem;
+    }
 
     --color-text: #333;
     --color-text-light: #757575;
@@ -55,6 +59,8 @@ body {
 }
 
 main {
+    display: flex;
+    flex-direction: column;
     flex: 1;
 }
 

sass/_docs.scss

@@ -1,15 +1,3 @@
-header {
-    margin-bottom: 1em;
-
-    h1 {
-        margin-bottom: 0;
-    }
-
-    .metadata {
-        font-size: 0.8rem;
-    }
-}
-
 .docs-body {
     width: 100%;
     display: flex;
@@ -21,6 +9,18 @@ header {
     }
 
     --docs-menu-width: 18rem;
+
+    header {
+        margin-bottom: 1em;
+
+        h1 {
+            margin-bottom: 0;
+        }
+
+        .metadata {
+            font-size: 0.8rem;
+        }
+    }
 }
 
 .docs-menu {
@@ -122,18 +122,6 @@ header {
     }
 }
 
-#docs-menu-checkbox:not(:checked) ~ .docs-menu {
-    @media (max-width: 767px) {
-        display: none;
-    }
-}
-
-#docs-menu-checkbox:checked ~ .docs-content {
-    @media (max-width: 767px) {
-        display: none;
-    }
-}
-
 .mjolnir_button {
     border: 1px solid rgb(217, 217, 217);
     border-radius: 1000px;