menu: fix scrollbar height #180

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;

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">

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;
 }

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 {