Fix CSS issues in small form-factor (#37)

danirus · Aug 10, 2024 · ef2d3a9 · ef2d3a9
1 parent c9cc17a
commit ef2d3a9
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 9 deletions.
diff --git a/ChangeLog.md b/ChangeLog.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## [0.4.1] - 2024-08-10
+
+- Fix various UI/CSS issues in small form factors.
+
 ## [0.4.0] - 2024-08-05
 
 - Move `pygments_light_style` and `pygments_dark_style` options inside theme options (`html_theme_options`), as `pygments_dark_style` is no longer a valid config setting in `app.config` by Sphinx. Update docs accordingly.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sphinx-nefertiti",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": true,
   "description": "Nefertiti is a theme for the Sphinx Documentation Generator.",
   "engines": {

diff --git a/scss/_layout.scss b/scss/_layout.scss
@@ -39,7 +39,7 @@ body {
     display: grid;
     grid-template-areas: "content toc";
     grid-template-columns: minmax(570px, 5fr) minmax(190px, 1fr);
-    gap: 25px;
+    gap: 18px;
   }
 
   @include media-breakpoint-down(lg) {
@@ -51,6 +51,13 @@ body {
     grid-template-columns: 100%;
     max-width: 892px;
     margin-inline: auto;
+    margin-top: 1.5rem;
+  }
+
+  @include media-breakpoint-down(sm) {
+    row-gap: 0;
+    column-gap: 18px;
+    margin-top: 0;
   }
 }
 
@@ -70,6 +77,11 @@ body {
     max-width: 92%;
     margin-inline: auto;
   }
+
+  @include media-breakpoint-down(sm) {
+    max-width: 100%;
+    margin-top: 1.5rem;
+  }
 }
 
 .nftt-sidebar {

diff --git a/scss/components/_admonitions.scss b/scss/components/_admonitions.scss
@@ -7,6 +7,10 @@
   border: 2px solid var(--#{$prefix}admon-tip-color-bg);
   border-radius: $border-radius;
 
+  @include media-breakpoint-down(sm) {
+    margin: 2.5rem .6rem 2rem;
+  }
+
   .added,
   .versionmodified {
     position: relative;
@@ -20,6 +24,12 @@
     font-weight: $font-weight-bold;
     color: var(--#{$prefix}body-hc-color);
     background-color: var(--#{$prefix}admon-tip-color-bg);
+
+    @include media-breakpoint-down(sm) {
+      left: 0;
+      margin: -1rem 0;
+      border-radius: $border-radius;
+    }
   }
 
   > p:first-child {
@@ -34,6 +44,10 @@
   border: 2px solid var(--#{$prefix}admon-caution-color-bg);
   border-radius: $border-radius;
 
+  @include media-breakpoint-down(sm) {
+    margin: 2.5rem .6rem 2rem;
+  }
+
   .changed,
   .versionmodified {
     position: relative;
@@ -47,6 +61,12 @@
     font-weight: $font-weight-bold;
     color: var(--#{$prefix}body-hc-color);
     background-color: var(--#{$prefix}admon-caution-color-bg);
+
+    @include media-breakpoint-down(sm) {
+      left: 0;
+      margin: -1rem 0;
+      border-radius: $border-radius;
+    }
   }
 
   > p:first-child {
@@ -61,6 +81,10 @@ div.deprecated {
   border: 2px solid var(--#{$prefix}admon-error-color-bg);
   border-radius: $border-radius;
 
+  @include media-breakpoint-down(sm) {
+    margin: 2.5rem .6rem 2rem;
+  }
+
   span.deprecated,
   span.versionmodified {
     position: relative;
@@ -74,6 +98,12 @@ div.deprecated {
     font-weight: $font-weight-bold;
     color: var(--#{$prefix}body-hc-color);
     background-color: var(--#{$prefix}admon-error-color-bg);
+
+    @include media-breakpoint-down(sm) {
+      left: 0;
+      margin: -1rem 0;
+      border-radius: $border-radius;
+    }
   }
 
   > p:first-child {
@@ -88,6 +118,10 @@ div.versionremoved {
   border: 2px solid var(--#{$prefix}admon-attention-color-bg);
   border-radius: $border-radius;
 
+  @include media-breakpoint-down(sm) {
+    margin: 2.5rem .6rem 2rem;
+  }
+
   span.removed,
   span.versionmodified {
     position: relative;
@@ -101,6 +135,12 @@ div.versionremoved {
     font-weight: $font-weight-bold;
     color: var(--#{$prefix}body-hc-color);
     background-color: var(--#{$prefix}admon-attention-color-bg);
+
+    @include media-breakpoint-down(sm) {
+      left: 0;
+      margin: -1rem 0;
+      border-radius: $border-radius;
+    }
   }
 
   > p:first-child {
@@ -113,6 +153,10 @@ div.versionremoved {
   margin: 2.5rem 2rem;
   border: 2px solid transparent;
 
+  @include media-breakpoint-down(sm) {
+    margin: 2.5rem .6rem;
+  }
+
   > p {
     margin-bottom: 0;
   }
@@ -129,6 +173,11 @@ div.versionremoved {
     margin: -1rem;
     font-weight: $font-weight-bold;
     background-color: var(--#{$prefix}admon-tip-color-bg);
+
+    @include media-breakpoint-down(sm) {
+      left: 0;
+      border-radius: $border-radius;
+    }
   }
 }
 
@@ -137,6 +186,10 @@ div.versionremoved {
   margin: 2.5rem 2rem;
   border: 2px solid transparent;
 
+  @include media-breakpoint-down(sm) {
+    margin: 2.5rem .6rem;
+  }
+
   > p {
     margin-bottom: 0;
   }
@@ -153,6 +206,11 @@ div.versionremoved {
     margin: -1rem;
     font-weight: $font-weight-bold;
     background-color: var(--#{$prefix}admon-caution-color-bg);
+
+    @include media-breakpoint-down(sm) {
+      left: 0;
+      border-radius: $border-radius;
+    }
   }
 }
 
@@ -161,6 +219,10 @@ div.deprecated-title-only {
   margin: 2.5rem 2rem;
   border: 2px solid transparent;
 
+  @include media-breakpoint-down(sm) {
+    margin: 2.5rem .6rem;
+  }
+
   > p {
     margin-bottom: 0;
   }
@@ -177,6 +239,11 @@ div.deprecated-title-only {
     margin: -1rem;
     font-weight: $font-weight-bold;
     background-color: var(--#{$prefix}admon-error-color-bg);
+
+    @include media-breakpoint-down(sm) {
+      left: 0;
+      border-radius: $border-radius;
+    }
   }
 }
 
@@ -185,6 +252,10 @@ div.deprecated-title-only {
   margin: 2.5rem 2rem;
   border: 2px solid transparent;
 
+  @include media-breakpoint-down(sm) {
+    margin: 2.5rem .6rem;
+  }
+
   > p {
     margin-bottom: 0;
   }
@@ -201,6 +272,11 @@ div.deprecated-title-only {
     margin: -1rem;
     font-weight: $font-weight-bold;
     background-color: var(--#{$prefix}admon-attention-color-bg);
+
+    @include media-breakpoint-down(sm) {
+      left: 0;
+      border-radius: $border-radius;
+    }
   }
 }
 
@@ -218,6 +294,11 @@ aside.topic > .topic-title {
   color: var(--#{$prefix}body-hc-color);
   background-color: var(--#{$prefix}admon-note-color-bg);
 
+  @include media-breakpoint-down(sm) {
+    left: 6px;
+    border-radius: $border-radius;
+  }
+
   &::before {
     display: inline-block;
     width: 16px;
@@ -240,6 +321,10 @@ aside.topic {
   border: 2px solid var(--#{$prefix}admon-note-color-bg);
   border-radius: $border-radius;
 
+  @include media-breakpoint-down(sm) {
+    margin: 2.5rem .6rem 2rem;
+  }
+
   .admonition-title,
   .topic-title {
     color: var(--#{$prefix}body-hc-color);

diff --git a/setup.py b/setup.py
@@ -19,7 +19,7 @@
 
 setup(
     name="sphinx-nefertiti",
-    version="0.4.0",
+    version="0.4.1",
     packages=find_packages(),
     include_package_data=True,
     license="MIT",

diff --git a/sphinx_nefertiti/layout.html b/sphinx_nefertiti/layout.html
@@ -216,9 +216,9 @@
           {%- block body %}
           {% endblock -%}
         </article>
-        <aside class="nftt-toc">
+        <aside class="nftt-toc my-3">
           {% if display_toc and not hidetoc %}
-          <div class="mt-3 mb-1 my-lg-0 ps-xl-3 text-muted">
+          <div class="my-sm-1 my-lg-0 ps-xl-3 text-muted">
             <button class="btn btn-link link-dark p-lg-0 mb-2 mb-lg-0 text-decoration-none nftt-toc-toggle d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents"
             >On this page <i class="ms-2 bi bi-chevron-expand"></i></button>
             <div class="title d-none d-lg-block">

diff --git a/sphinx_nefertiti/pager.html b/sphinx_nefertiti/pager.html
@@ -3,18 +3,18 @@
     <div class="container">
       <ul class="pagination justify-content-between mb-0">
         {%- if prev -%}
-          <li class="page-item">
+          <li class="d-flex page-item">
             <a href="{{ prev.link|e }}" class="d-flex px-5 align-items-end" rel="prev" aria-label="{{_('Previous page:')}} {{ prev.title|striptags|e }}">
               <span class="prev-page"><i class="bi bi-caret-left"></i></span>
-              <div class="d-flex flex-column">
+              <div class="d-none d-sm-flex flex-column">
                 <span class="text-small text-start text-muted">{{ _('Previous') }}</span>
                 <span class="underline">{{ prev.title }}</span>
               </div>
             </a>
           </li>
         {% endif %}
         {%- if next -%}
-          <li class="page-item ms-auto">
+          <li class="d-flex page-item ms-auto">
             <a href="{{ next.link|e }}" class="d-flex px-5 align-items-end" rel="next" aria-label="{{_('Next page:')}} {{ next.title|striptags|e }}">
               <div class="d-flex flex-column">
                 <span class="text-small text-end text-start text-muted">{{ _('Next') }}</span>

diff --git a/sphinx_nefertiti/utils.py b/sphinx_nefertiti/utils.py
@@ -1,4 +1,4 @@
-_CURRENT_VERSION = (0, 4, 0, "f", 0)  # following PEP 440
+_CURRENT_VERSION = (0, 4, 1, "f", 0)  # following PEP 440
 
 
 def get_version():