improve custom previous/next section buttons

jothepro · Nov 28, 2023 · 4f33788 · 4f33788
1 parent db7f670
commit 4f33788
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 48 deletions.
diff --git a/docs/customization.md b/docs/customization.md
@@ -109,7 +109,12 @@ If you customized the theme with custom colors, spacings, font-sizes, etc. and y
 
 I am always curious to learn about how you made the theme look even better!
 
-<span class="next_section_button">
 
+<div class="section_buttons">
+<span class="previous_section_button">
+Read Previous: [Extensions](extensions.md)
+</span>
+<span class="next_section_button">
 Read Next: [Tips & Tricks](tricks.md)
-</span>
+</span>
+</div>
diff --git a/docs/extensions.md b/docs/extensions.md
@@ -230,7 +230,11 @@ Each item in the list must start with an element that has the class `tab-title`.
 </div>
 ```
 
+<div class="section_buttons">
+<span class="previous_section_button">
+Read Previous: [Home](README.md)
+</span>
 <span class="next_section_button">
-
 Read Next: [Customization](customization.md)
 </span>
+</div>
diff --git a/docs/tricks.md b/docs/tricks.md
@@ -118,7 +118,12 @@ To make tables span the full width of the page, no matter how wide the content i
 
 </div>
 
-<span class="next_section_button">
 
+<div class="section_buttons">
+<span class="previous_section_button">
+Read Previous: [Customization](customization.md)
+</span>
+<span class="next_section_button">
 Read Next: [Example](https://jothepro.github.io/doxygen-awesome-css/class_my_library_1_1_example.html)
-</span>
+</span>
+</div>
diff --git a/doxygen-custom/custom.css b/doxygen-custom/custom.css
@@ -30,21 +30,24 @@
     justify-content: space-between;
 }
 
-.next_section_button {
+.next_section_button, 
+.previous_section_button {
     display: block;
-    padding: var(--spacing-large) 0 var(--spacing-small) 0;
+    padding: calc(var(--spacing-large) * 2) 0 var(--spacing-small) 0;
     color: var(--page-background-color);
     user-select: none;
 }
 
-.next_section_button::after {
+.next_section_button::after,
+.previous_section_button::after {
     /* clearfix */
     content: "";
     clear: both;
     display: table;
 }
 
-.next_section_button a {
+.next_section_button a,
+.previous_section_button a {
     overflow: hidden;
     float: right;
     border: 1px solid var(--separator-color);
@@ -56,61 +59,58 @@
     transition: color .08s ease-in-out, background-color .1s ease-in-out;
 }
 
-.next_section_button a:hover {
-    color: var(--page-foreground-color) !important;
-    background-color: var(--odd-color);
+.previous_section_button a {
+    float: left;
+    padding: var(--spacing-medium) var(--spacing-large) var(--spacing-medium) calc(var(--spacing-large) / 2);
 }
 
-.next_section_button a::after {
-    content: '〉';
-    color: var(--page-secondary-foreground-color) !important;
-    padding-left: var(--spacing-large);
-    display: inline-block;
-    transition: color .08s ease-in-out, transform .09s ease-in-out;
-}
+@media screen and (max-width: 500px) {
+    .section_buttons .next_section_button, .section_buttons .next_section_button a,
+    .section_buttons .previous_section_button, .section_buttons .previous_section_button a {
+        width: 100%;
+        box-sizing: border-box;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 
-.next_section_button a:hover::after {
-    color: var(--page-foreground-color) !important;
-    transform: translateX(3px);
-}
+    .section_buttons .next_section_button a {
+        border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
+        text-align: right;
+    }
 
-.previous_section_button {
-    display: block;
-    padding: var(--spacing-large) 0 var(--spacing-small) 0;
-    color: var(--page-background-color);
-    user-select: none;
+    .section_buttons .previous_section_button a {
+        border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
+        border-right: none;
+    }
 }
 
-.previous_section_button::after {
-    /* clearfix */
-    content: "";
-    clear: both;
-    display: table;
+.next_section_button a:hover,
+.previous_section_button a:hover {
+    color: var(--page-foreground-color) !important;
+    background-color: var(--odd-color);
 }
 
-.previous_section_button a {
-    overflow: hidden;
-    float: left;
-    border: 1px solid var(--separator-color);
-    padding: var(--spacing-medium) var(--spacing-large) var(--spacing-medium) calc(var(--spacing-large) / 2);
-    border-radius: var(--border-radius-medium);
+.next_section_button a::after,
+.previous_section_button a::before {
     color: var(--page-secondary-foreground-color) !important;
-    text-decoration: none;
-    background-color: var(--page-background-color);
-    transition: color .08s ease-in-out, background-color .1s ease-in-out;
+    display: inline-block;
+    transition: color .08s ease-in-out, transform .09s ease-in-out;
 }
 
-.previous_section_button a:hover {
-    color: var(--page-foreground-color) !important;
-    background-color: var(--odd-color);
+.next_section_button a::after {
+    content: '〉';
+    padding-left: var(--spacing-large);
 }
 
 .previous_section_button a::before {
     content: '〈';
-    color: var(--page-secondary-foreground-color) !important;
     padding-right: var(--spacing-large);
-    display: inline-block;
-    transition: color .08s ease-in-out, transform .09s ease-in-out;
+}
+
+.next_section_button a:hover::after {
+    color: var(--page-foreground-color) !important;
+    transform: translateX(3px);
 }
 
 .previous_section_button a:hover::before {