Extend page toc width using fluid layout

danirus · Feb 18, 2024 · 0a00d9e · 0a00d9e
1 parent afdaf76
commit 0a00d9e
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 42 deletions.
diff --git a/docs/source/_static/custom.css b/docs/source/_static/custom.css
@@ -6,3 +6,4 @@
   height: 36px;
   width: 36px;
 }
+
diff --git a/docs/source/conf.py b/docs/source/conf.py
@@ -76,8 +76,11 @@
 
 html_theme_options = {
     "documentation_font": "Open Sans",
+    "documentation_font_size": "1.1rem",
     "monospace_font": "Ubuntu Mono",
-    "monospace_font_size": "1.1rem",
+    "monospace_font_size": "1.2rem",
+
+    "style": "default",
 
     "logo": "img/nefertiti.svg",
     "logo_alt": "Nefertiti-for-Sphinx",

diff --git a/js/src/tocresize.js b/js/src/tocresize.js
@@ -4,18 +4,24 @@ export function resizeAsides() {
   const nftt_sidebar = document.querySelector(".nftt-sidebar");
   const nftt_toc = document.querySelector(".nftt-toc");
 
-  // If min-width is not >= 992px, don't do anything.
-  if (window.matchMedia('(min-width: 992px)').matches == false) {
-    nftt_sidebar?.setAttribute("style", "");
-    nftt_toc?.setAttribute("style", "");
-    return "";
-  }
-
   if (nftt_content != undefined) {
     height = nftt_content.clientHeight > document.body.clientHeight
       ? "height: calc(100vh - 7rem)"
       : `height: ${nftt_content.clientHeight}px`;
+  }
+
+  // Apply style attribute to nftt-sidebar (when min-width >= 1200px).
+  if (window.matchMedia('(min-width: 1200px)').matches == false) {
+    nftt_sidebar?.setAttribute("style", "");
+  } else {
     nftt_sidebar?.setAttribute("style", height);
+  }
+
+  // Apply style attribute to nftt-toc (when min-width >= 992px).
+  if (window.matchMedia('(min-width: 992px)').matches == false) {
+    nftt_toc?.setAttribute("style", "");
+    return "";
+  } else {
     nftt_toc?.setAttribute("style", height);
   }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sphinx-nefertiti",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "description": "Private repository related with sphinx-nefertiti.",
   "engines": {
@@ -77,6 +77,6 @@
   },
   "dependencies": {
     "@octokit/rest": "^19.0.5",
-    "bootstrap": "5.3.1"
+    "bootstrap": "5.3.2"
   }
 }
diff --git a/scss/_layout.scss b/scss/_layout.scss
@@ -28,18 +28,18 @@ body {
   margin-top: 2.5rem;
   margin-bottom: 1.5rem;
 
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(xl) {
     display: grid;
     grid-template-areas: "sidebar main";
-    grid-template-columns: 1.6fr 5fr;
+    grid-template-columns: minmax(300px 2fr) 5fr;
     gap: 1.5rem;
   }
 }
 
 .nftt-sidebar {
   grid-area: sidebar;
 
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(xl) {
     position: sticky;
     top: 6rem;
     z-index: 2;
@@ -50,6 +50,12 @@ body {
     border-right: 1px solid var(--#{$prefix}border-color);
 
     @include scrollbars();
+
+    .nftt-sidebar-content {
+      // min-width: 240px;
+      max-width: 320px;
+      margin-left: auto;
+    }
   }
 }
 
@@ -59,7 +65,7 @@ body {
   grid-template-areas: "content";
   padding-right: 48px;
 
-  @include media-breakpoint-down(lg) {
+  @include media-breakpoint-down(xl) {
     padding-right: 0;
   }
 }
@@ -73,14 +79,14 @@ body {
   grid-template-rows: 1fr auto;
   gap: inherit;
 
-  @include media-breakpoint-down(lg) {
-    max-width: 760px;
+  @include media-breakpoint-down(xl) {
+    max-width: 1100px;
     margin-inline: auto;
   }
 
   @include media-breakpoint-up(lg) {
     grid-template-areas: "content toc";
-    grid-template-columns: 4fr 1fr;
+    grid-template-columns: minmax(570px, 790px) minmax(190px, 1.3fr);
   }
 }
 
@@ -173,7 +179,7 @@ body {
         font-family: Verdana, Tahoma, sans-serif;
         content: "\002022";
 
-        @include media-breakpoint-down(lg) {
+        @include media-breakpoint-down(xl) {
           display: none;
         }
       }
@@ -194,7 +200,7 @@ body {
       background-color: var(--#{$prefix}foot2-link-bg);
     }
 
-    @include media-breakpoint-down(lg) {
+    @include media-breakpoint-down(xl) {
       padding: .2rem 1rem;
       margin: .2rem;
     }

diff --git a/scss/components/_navbar.scss b/scss/components/_navbar.scss
@@ -145,7 +145,7 @@
 
   @include media-breakpoint-up(md) {
     .form-control {
-      border: 0;
+      border: 1;
 
       &:focus,
       &:focus-visible {
@@ -168,7 +168,7 @@
   background-color: $primary;
   border-left: 0;
 
-  @include media-breakpoint-down(lg) {
+  @include media-breakpoint-down(xl) {
     box-shadow: $box-shadow-lg;
   }
 }
diff --git a/scss/components/_toc.scss b/scss/components/_toc.scss
@@ -107,15 +107,15 @@
   text-transform: uppercase;
 }
 
-.nftt-sidebar-content {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
+// .nftt-sidebar-content {
+//   display: flex;
+//   flex-direction: column;
+//   width: 100%;
+//   height: 100%;
+// }
 
 .nftt-sidebar .toc {
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     width: 100%;
     margin-right: 16px;
     overflow-y: auto;
@@ -208,7 +208,7 @@
     width: 100%;
   }
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(lg) {
     border: 1px solid $border-color;
     @include border-radius(.4rem);
 
@@ -229,7 +229,7 @@
 }
 
 .nftt-toc-collapse {
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(lg) {
     nav {
       padding: 1.25rem;
       background-color: $gray-100;
@@ -238,7 +238,7 @@
     }
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     display: block !important; // stylelint-disable-line declaration-no-important
     margin-top: 1.1rem;
   }

diff --git a/setup.py b/setup.py
@@ -19,7 +19,7 @@
 
 setup(
     name="sphinx-nefertiti",
-    version="0.2.1",
+    version="0.2.2",
     packages=find_packages(),
     include_package_data=True,
     license="MIT",
@@ -57,4 +57,4 @@
     ],
     test_suite="dummy",
     zip_safe=True,
-)
+)