Fixed documentation layout

Mr-Mappie · Nov 23, 2024 · 9cd183a · 9cd183a
1 parent b5915d5
commit 9cd183a
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 0 deletions.
diff --git a/website/src/css/main.css b/website/src/css/main.css
@@ -1230,6 +1230,43 @@ strong {
   }
 }
 
+.nav-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+.nav-container ul {
+  list-style: none;
+  padding: 0;
+}
+.nav-container ul li {
+  display: inline-flex;
+}
+.nav-container ul li a {
+  text-decoration: none;
+  color: darkgray;
+  padding: 10px;
+  transition: all 0.3s ease-in-out;
+  border-bottom: 1px solid transparent;
+}
+.nav-container ul li a:hover {
+  color: gray;
+}
+.nav-container .nav .active a {
+  color: slateblue;
+  border-bottom: 1px solid slateblue;
+}
+.nav-container .nav .active a:hover {
+  border-color: transparent;
+  background: slateblue;
+  color: white;
+}
+.nav-container .tab-pane {
+  display: none;
+}
+.nav-container .tab-pane.active {
+  display: block;
+}
+
 .l-list {
   --gtc: minmax(0, 1fr);
   display: grid;

diff --git a/website/src/scss/layout/_post.scss b/website/src/scss/layout/_post.scss
@@ -28,3 +28,46 @@
     }
   }
 }
+
+.nav-container {
+  max-width: 800px;
+  margin: 0 auto;
+
+  ul {
+    list-style: none;
+    padding: 0;
+
+    li {
+      display: inline-flex;
+
+      a {
+        text-decoration: none;
+        color: darkgray;
+        padding: 10px;
+        transition: all .3s ease-in-out;
+        border-bottom: 1px solid transparent;
+        &:hover {
+          color: gray;
+        }
+      }
+    }
+  }
+
+  .nav .active a {
+    color: slateblue;
+    border-bottom: 1px solid slateblue;
+    &:hover {
+      border-color: transparent;
+      background: slateblue;
+      color: white;
+    }
+  }
+
+  .tab-pane {
+    display: none;
+  }
+
+  .tab-pane.active {
+    display: block;
+  }
+}