menu: set footer position at bottom of screen #177

exampleSite/content/basics/migration/_index.en.md

@@ -14,6 +14,11 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ---
 
+## 3.0.0
+
+- **Breaking**: We made changes to the menu footer. If you have your `menu-footer.html` partial overridden, you may have to provide additional styling in your partial. For a reference take a look into the `menu-footer.html` partial that is coming with the exampleSite.
+
+  This change was made to allow your own menu footer to be placed right after the so called prefooter that comes with the theme (containing the language switch and *Clear history* functionality).
 
 ## 2.9.0
 

exampleSite/layouts/partials/menu-footer.html

@@ -1,4 +1,14 @@
 
+          <style>
+            #footer {
+              font-size: 13px;
+              padding: 2rem 1rem;
+              text-align: center;
+            }
+            #footer p {
+              margin: 0;
+            }
+          </style>
           <a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-icon="octicon-cloud-download" aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
           <a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn" data-icon="octicon-star" data-show-count="true" aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
           <a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>

layouts/partials/menu.html

@@ -52,12 +52,17 @@
           </ul>
         </div>
         {{- end }}
-
-        {{- if or .Site.IsMultiLingual $showvisitedlinks }}
+        <div class="footermargin"></div>
+        {{- $showlangswitch := and .Site.IsMultiLingual (not .Site.Params.disableLanguageSwitchingButton) }}
+        {{- $footer := partial "menu-footer.html" . }}
+        {{- $showfooter := not (eq 0 (int (len $footer | plainify))) }}
+        {{- if or $showlangswitch $showvisitedlinks $showfooter }}
+        <hr/>
+        {{- end }}
+        {{- if or $showlangswitch $showvisitedlinks }}
         <div id="prefooter">
-          <hr/>
           <ul>
-            {{- if and .Site.IsMultiLingual (not .Site.Params.DisableLanguageSwitchingButton) }}
+            {{- if $showlangswitch }}
             <li>
               <a class="padding">
                 <i class="fas fa-language fa-fw"></i>
@@ -90,16 +95,17 @@
               </a>
             </li>
             {{- end }}
-
             {{- if $showvisitedlinks }}
             <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> {{ T "Clear-History" }}</a></li>
             {{- end }}
           </ul>
         </div>
         {{- end }}
+        {{- if $showfooter }}
         <div id="footer">
-          {{- partial "menu-footer.html" . }}
+          {{- $footer }}
         </div>
+        {{- end }}
       </div>
     </nav>
     {{- define "section-tree-nav" }}

static/css/theme-relearn-dark.css

@@ -40,5 +40,5 @@
     --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #202020; /* Color of background for the active category (only) */
 
     --MENU-VISITED-color: #569cd8; /* Color of 'page visited' icons in menu */
-    --MENU-SECTION-HR-color: #282830; /* Color of <hr> separator in menu */
+    --MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
 }

static/css/theme-relearn-light.css

@@ -40,5 +40,5 @@
     --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */
 
     --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
-    --MENU-SECTION-HR-color: #282830; /* Color of <hr> separator in menu */
+    --MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
 }

static/css/theme.css

@@ -176,10 +176,6 @@ th {
     color: #e6e6e6; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
 }
 
-#sidebar hr {
-    border-bottom: 1px solid #2a232f; /* var(--MENU-SECTION-HR-color) */
-}
-
 #sidebar a.padding {
     padding: 0 1rem;
 }
@@ -240,7 +236,7 @@ th {
 
 #sidebar ul li.active > a {
     background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */
-    color: #777 !important; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */
+    color: #777777 !important; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */
     margin-left: -1rem;
     margin-right: -1rem;
     padding-left: 1rem;
@@ -316,6 +312,19 @@ th {
     text-transform: uppercase;
 }
 
+#sidebar .footermargin {
+    margin-top: auto;
+}
+
+#sidebar hr {
+    border-bottom: 1px solid #2a232f; /* var(--MENU-SECTION-HR-color) */
+    margin: 1.5rem 1rem 1rem 1rem;
+}
+
+#footer {
+    color: #cccccc; /* var(--MENU-SECTIONS-LINK-color) */
+}
+
 #body {
     margin-left: 300px;
     min-height: 100%;
@@ -455,17 +464,6 @@ th {
     text-align: justify;
 }
 
-#footer {
-    color: #cccccc; /* var(--MENU-SECTIONS-LINK-color) */
-    font-size: 13px;
-    padding: 3rem 1rem;
-    text-align: center;
-}
-
-#footer p {
-    margin: 0;
-}
-
 body {
     font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
     font-size: 16.25px !important;
@@ -899,6 +897,8 @@ td {
 }
 
 #sidebar .highlightable {
+    display: flex;
+    flex-direction: column;
     overflow: auto;
 }
 

static/css/variant.css

@@ -37,10 +37,6 @@ a:hover,
     color: var(--MENU-SECTIONS-LINK-HOVER-color);
 }
 
-#sidebar hr {
-    border-color: var(--MENU-SECTION-HR-color);
-}
-
 #sidebar ul.topics > li.parent,
 #sidebar ul.topics > li.active {
     background-color: var(--MENU-SECTIONS-ACTIVE-BG-color);
@@ -59,6 +55,10 @@ a:hover,
     color: var(--MENU-SECTIONS-LINK-HOVER-color);
 }
 
+#sidebar hr {
+    border-color: var(--MENU-SECTION-HR-color);
+}
+
 #footer {
     color: var(--MENU-SECTIONS-LINK-color);
 }