From a48a7f540b7912e441011642a81c1ea4f9bea2b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Mon, 14 Feb 2022 20:34:18 +0100
Subject: [PATCH] menu: fix scrollbar height #180

---
 exampleSite/layouts/partials/menu-footer.html |  5 ++
 layouts/partials/menu.html                    |  4 +-
 static/css/theme.css                          | 51 ++++++++++---------
 static/css/variant.css                        | 11 ++--
 4 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/exampleSite/layouts/partials/menu-footer.html b/exampleSite/layouts/partials/menu-footer.html
index 79c81e6690..a984e75ee2 100644
--- a/exampleSite/layouts/partials/menu-footer.html
+++ b/exampleSite/layouts/partials/menu-footer.html
@@ -2,8 +2,13 @@
           <style>
             #footer {
               font-size: 13px;
+              height: 100px;
+              margin-left: auto;
+              margin-right: auto;
               padding: 2rem 1rem;
               text-align: center;
+              min-width: 230px;
+              max-width: 300px;
             }
             #footer p {
               margin: 0;
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index d8dfbfb8d9..d9f8d31dc3 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -26,7 +26,7 @@
         </ul>
       </div>
       {{- end }}
-      <div class="highlightable">
+      <div id="content-wrapper" class="highlightable">
         <ul class="topics">
           {{- $defaultOrdersectionsby := .Site.Params.ordersectionsby | default "weight" }}
           {{- $currentOrdersectionsby := .Site.Home.Params.ordersectionsby | default $defaultOrdersectionsby }}
@@ -59,7 +59,7 @@
         {{- $footer := partial "menu-footer.html" . }}
         {{- $showfooter := not (eq 0 (int (len $footer | plainify))) }}
         {{- if or $showlangswitch $showvisitedlinks $showfooter }}
-        <hr/>
+        <hr class="default-animation"/>
         {{- end }}
         {{- if or $showlangswitch $showthemeswitch $showvisitedlinks }}
         <div id="prefooter">
diff --git a/static/css/theme.css b/static/css/theme.css
index b5663ffad0..a6050c8e78 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -88,6 +88,19 @@ th {
     transition: all 0.5s ease;
 }
 
+#sidebar {
+    background-color: #322A38; /* var(--MENU-SECTIONS-BG-color) */
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    font-size: 15.25px;
+    left: 0;
+    line-height: 1.574;
+    position: fixed;
+    top: 0;
+    width: 300px;
+}
+
 #header-wrapper {
     background-color: #8451a1; /* var(--MENU-HEADER-BG-color) */
     color: #ffffff; /* var(--MENU-SEARCH-color) */
@@ -147,24 +160,11 @@ th {
     color: rgba( 255, 255, 255, .4 );
 }
 
-#sidebar-toggle-span {
-    display: none;
-}
-@media only all and (max-width: 47.938em) {
-    #sidebar-toggle-span {
-        display: inline;
-    }
-}
-
-#sidebar {
-    background-color: #322A38; /* var(--MENU-SECTIONS-BG-color) */
-    bottom: 0;
-    font-size: 15.25px;
-    left: 0;
-    line-height: 1.574;
-    position: fixed;
-    top: 0;
-    width: 300px;
+#content-wrapper {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 #sidebar a {
@@ -888,12 +888,6 @@ td {
     position: relative;
 }
 
-#sidebar .highlightable {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-}
-
 .lightbox-active #body {
     overflow: visible;
 }
@@ -957,6 +951,15 @@ td {
     width: 70%;
 }
 
+#sidebar-toggle-span {
+    display: none;
+}
+@media only all and (max-width: 47.938em) {
+    #sidebar-toggle-span {
+        display: inline;
+    }
+}
+
 #body #breadcrumbs span {
     padding: 0 0.1rem;
 }
diff --git a/static/css/variant.css b/static/css/variant.css
index 09aaec5616..6b48a9c176 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -14,6 +14,10 @@ a:hover,
     color: var(--MAIN-LINK-HOVER-color);
 }
 
+#sidebar {
+    background-color: var(--MENU-SECTIONS-BG-color);
+}
+
 #header-wrapper {
     background-color: var(--MENU-HEADER-BG-color);
     color: var(--MENU-SEARCH-color, #ffffff);
@@ -25,10 +29,6 @@ a:hover,
     background-color: var(--MENU-SEARCH-BG-color);
 }
 
-#sidebar {
-    background-color: var(--MENU-SECTIONS-BG-color);
-}
-
 #sidebar a {
     color: var(--MENU-SECTIONS-LINK-color);
 }
@@ -44,7 +44,8 @@ a:hover,
 
 #sidebar ul li.active > a {
     background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
-    color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
+    color: var(--
+    );
 }
 
 #sidebar ul li.visited > a .read-icon {