MAINT: Improve font sizing (#1129)

Fix #1001
pydata · Jan 26, 2023 · a6329b6 · a6329b6
1 parent 4ce02b8
commit a6329b6
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 19 deletions.
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss b/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss
@@ -4,10 +4,6 @@
 nav.page-toc {
   // A little extra space before the buttons
   margin-bottom: 1rem;
-  // Each successive nested item will be a bit smaller
-  ul > li {
-    font-size: 0.95em;
-  }
 }
 
 .bd-toc .nav,

diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
@@ -24,6 +24,11 @@
     font-size: var(--pst-sidebar-font-size);
   }
 
+  // override bootstrap when navlink are displayed in the sidebar
+  .nav-link {
+    font-size: var(--pst-sidebar-font-size-mobile);
+  }
+
   &.no-sidebar {
     border-right: 0;
   }
@@ -213,11 +218,16 @@ nav.bd-links {
   p.caption {
     font-weight: var(--pst-sidebar-header-font-weight);
     position: relative;
-    margin-top: 1.25em;
-    margin-bottom: 0.5em;
+    margin-top: 1.25rem;
+    margin-bottom: 0.5rem;
     color: var(--pst-color-text-base);
     &:first-child {
       margin-top: 0;
     }
+
+    font-size: var(--pst-sidebar-font-size-mobile);
+    @include media-breakpoint-up($breakpoint-sidebar-primary) {
+      font-size: var(--pst-sidebar-font-size);
+    }
   }
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss
@@ -13,7 +13,15 @@
 
   font-size: var(--pst-sidebar-font-size-mobile);
   @include media-breakpoint-up($breakpoint-sidebar-secondary) {
-    font-size: var(--pst-sidebar-secondary-font-size);
+    font-size: var(--pst-sidebar-font-size);
+  }
+
+  // override bootstrap settings
+  .nav-link {
+    font-size: var(--pst-sidebar-font-size-mobile);
+    @include media-breakpoint-up($breakpoint-sidebar-secondary) {
+      font-size: var(--pst-sidebar-font-size);
+    }
   }
 
   padding: 2rem 1rem 1rem 1rem;
@@ -26,6 +34,7 @@
   .onthispage {
     color: var(--pst-color-text-base);
     font-weight: var(--pst-sidebar-header-font-weight);
+    margin-bottom: 0.5rem;
   }
 
   @include scrollbar-style();

diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_fonts.scss b/src/pydata_sphinx_theme/assets/styles/variables/_fonts.scss
@@ -4,23 +4,23 @@ html {
   */
 
   // base font size - applied at body/html level
-  --pst-font-size-base: 15px;
+  --pst-font-size-base: 1rem;
 
-  // heading font sizes
-  --pst-font-size-h1: 36px;
-  --pst-font-size-h2: 32px;
-  --pst-font-size-h3: 26px;
-  --pst-font-size-h4: 21px;
-  --pst-font-size-h5: 18px;
-  --pst-font-size-h6: 16px;
+  // heading font sizes based on bootstrap sizing
+  --pst-font-size-h1: 2.5rem;
+  --pst-font-size-h2: 2rem;
+  --pst-font-size-h3: 1.75rem;
+  --pst-font-size-h4: 1.5rem;
+  --pst-font-size-h5: 1.25rem;
+  --pst-font-size-h6: 1.1rem;
 
   // smaller than heading font sizes
-  --pst-font-size-milli: 12px;
+  --pst-font-size-milli: 0.9rem;
 
   // Sidebar styles
-  --pst-sidebar-font-size: 0.9em;
-  --pst-sidebar-font-size-mobile: 1.2em;
-  --pst-sidebar-header-font-size: 1.2em;
+  --pst-sidebar-font-size: 0.9rem;
+  --pst-sidebar-font-size-mobile: 1.1rem;
+  --pst-sidebar-header-font-size: 1.2rem;
   --pst-sidebar-header-font-weight: 600;
 
   // Font weights