diff --git a/src/css/nav.css b/src/css/nav.css index 5bc8f75..490bf1e 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -1,3 +1,13 @@ +/* This file contains the CSS for the sidebar navigation. + * The vertical navigation at the top is in the header.css + * At less than 770px, the navbar disappears and is opened with + * a button in the toolbar. + * + * Some of the responsiveness is about adjusting the height of the + * menu. On smaller screens the vertical menu disappears, so the height + * of the sidebar menu needs to be adjusted. + */ + .nav-container { position: fixed; top: var(--navbar-height); @@ -32,7 +42,7 @@ background: var(--nav-background); position: relative; top: var(--toolbar-height); - height: var(--nav-height); + height: calc(100% - var(--navbar-sub-height)); } @media screen and (min-width: 769px) { @@ -43,10 +53,11 @@ @media screen and (min-width: 1024px) { .nav { - top: var(--navbar-height); + top: calc(var(--navbar-height) + var(--navbar-sub-height)); box-shadow: none; position: sticky; height: var(--nav-height--desktop); + margin-top: var(--navbar-sub-height); } } @@ -63,7 +74,7 @@ html.is-clipped--nav { .nav-panel-menu { overflow-y: scroll; overscroll-behavior: none; - height: var(--nav-panel-menu-height); + height: 100%; } .nav-panel-menu:not(.is-active) .nav-menu { diff --git a/src/css/toolbar.css b/src/css/toolbar.css index 7f38488..e4a2d6a 100644 --- a/src/css/toolbar.css +++ b/src/css/toolbar.css @@ -1,3 +1,8 @@ +/* The toolbar contains a home link and breakcrumbs and is found + * right above the article content. + * On smaller screens it also contains a button to show the sidebar menu. + */ + .toolbar { color: var(--toolbar-font-color); align-items: center; @@ -12,6 +17,12 @@ z-index: var(--z-index-toolbar); } +@media screen and (min-width: 1024px) { + .toolbar { + top: calc(var(--navbar-height) + var(--navbar-sub-height)); + } +} + .toolbar a { color: inherit; } diff --git a/src/css/vars.css b/src/css/vars.css index aedb854..3c043b0 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -123,13 +123,10 @@ --navbar-height: calc(73 / var(--rem-base) * 1rem); --navbar-sub-height: calc(45 / var(--rem-base) * 1rem); --toolbar-height: calc(45 / var(--rem-base) * 1rem); - --drawer-height: var(--toolbar-height); --body-top: calc(var(--navbar-height) + var(--navbar-sub-height)); --body-min-height: calc(100vh - var(--body-top)); --nav-height: calc(var(--body-min-height) - var(--toolbar-height)); --nav-height--desktop: var(--body-min-height); - --nav-panel-menu-height: calc(100% - var(--drawer-height)); - --nav-panel-explore-height: calc(50% + var(--drawer-height)); --nav-width: calc(270 / var(--rem-base) * 1rem); --toc-top: calc(var(--body-top) + var(--toolbar-height)); --toc-height: calc(100vh - var(--toc-top) - 2.5rem);