menu: fix scrollbar height #180

This commit is contained in:
Sören Weber 2022-02-14 20:34:18 +01:00
parent d0d359bc3d
commit a48a7f540b
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
4 changed files with 40 additions and 31 deletions

View file

@ -2,8 +2,13 @@
<style> <style>
#footer { #footer {
font-size: 13px; font-size: 13px;
height: 100px;
margin-left: auto;
margin-right: auto;
padding: 2rem 1rem; padding: 2rem 1rem;
text-align: center; text-align: center;
min-width: 230px;
max-width: 300px;
} }
#footer p { #footer p {
margin: 0; margin: 0;

View file

@ -26,7 +26,7 @@
</ul> </ul>
</div> </div>
{{- end }} {{- end }}
<div class="highlightable"> <div id="content-wrapper" class="highlightable">
<ul class="topics"> <ul class="topics">
{{- $defaultOrdersectionsby := .Site.Params.ordersectionsby | default "weight" }} {{- $defaultOrdersectionsby := .Site.Params.ordersectionsby | default "weight" }}
{{- $currentOrdersectionsby := .Site.Home.Params.ordersectionsby | default $defaultOrdersectionsby }} {{- $currentOrdersectionsby := .Site.Home.Params.ordersectionsby | default $defaultOrdersectionsby }}
@ -59,7 +59,7 @@
{{- $footer := partial "menu-footer.html" . }} {{- $footer := partial "menu-footer.html" . }}
{{- $showfooter := not (eq 0 (int (len $footer | plainify))) }} {{- $showfooter := not (eq 0 (int (len $footer | plainify))) }}
{{- if or $showlangswitch $showvisitedlinks $showfooter }} {{- if or $showlangswitch $showvisitedlinks $showfooter }}
<hr/> <hr class="default-animation"/>
{{- end }} {{- end }}
{{- if or $showlangswitch $showthemeswitch $showvisitedlinks }} {{- if or $showlangswitch $showthemeswitch $showvisitedlinks }}
<div id="prefooter"> <div id="prefooter">

View file

@ -88,6 +88,19 @@ th {
transition: all 0.5s ease; 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 { #header-wrapper {
background-color: #8451a1; /* var(--MENU-HEADER-BG-color) */ background-color: #8451a1; /* var(--MENU-HEADER-BG-color) */
color: #ffffff; /* var(--MENU-SEARCH-color) */ color: #ffffff; /* var(--MENU-SEARCH-color) */
@ -147,24 +160,11 @@ th {
color: rgba( 255, 255, 255, .4 ); color: rgba( 255, 255, 255, .4 );
} }
#sidebar-toggle-span { #content-wrapper {
display: none; display: flex;
} flex: 1;
@media only all and (max-width: 47.938em) { flex-direction: column;
#sidebar-toggle-span { overflow: hidden;
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;
} }
#sidebar a { #sidebar a {
@ -888,12 +888,6 @@ td {
position: relative; position: relative;
} }
#sidebar .highlightable {
display: flex;
flex-direction: column;
overflow: auto;
}
.lightbox-active #body { .lightbox-active #body {
overflow: visible; overflow: visible;
} }
@ -957,6 +951,15 @@ td {
width: 70%; width: 70%;
} }
#sidebar-toggle-span {
display: none;
}
@media only all and (max-width: 47.938em) {
#sidebar-toggle-span {
display: inline;
}
}
#body #breadcrumbs span { #body #breadcrumbs span {
padding: 0 0.1rem; padding: 0 0.1rem;
} }

View file

@ -14,6 +14,10 @@ a:hover,
color: var(--MAIN-LINK-HOVER-color); color: var(--MAIN-LINK-HOVER-color);
} }
#sidebar {
background-color: var(--MENU-SECTIONS-BG-color);
}
#header-wrapper { #header-wrapper {
background-color: var(--MENU-HEADER-BG-color); background-color: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-color, #ffffff); color: var(--MENU-SEARCH-color, #ffffff);
@ -25,10 +29,6 @@ a:hover,
background-color: var(--MENU-SEARCH-BG-color); background-color: var(--MENU-SEARCH-BG-color);
} }
#sidebar {
background-color: var(--MENU-SECTIONS-BG-color);
}
#sidebar a { #sidebar a {
color: var(--MENU-SECTIONS-LINK-color); color: var(--MENU-SECTIONS-LINK-color);
} }
@ -44,7 +44,8 @@ a:hover,
#sidebar ul li.active > a { #sidebar ul li.active > a {
background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color); 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 { #sidebar ul li.visited > a .read-icon {