From bc634ed67bd35a7505c80cb06779300f00919351 Mon Sep 17 00:00:00 2001 From: Felix Hennig Date: Wed, 15 Nov 2023 15:49:25 +0100 Subject: [PATCH 1/5] I think I fixed it --- src/css/nav.css | 11 +++++++---- src/css/toolbar.css | 6 ++++++ 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/css/nav.css b/src/css/nav.css index 5bc8f75..483a6f6 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -19,7 +19,9 @@ font-size: calc(15.5 / var(--rem-base) * 1rem); flex: none; position: static; + /* top: calc(var(--navbar-height) + var(--navbar-sub-height)); */ top: 0; + /* margin-top: var(--navbar-sub-height); */ visibility: visible; } } @@ -32,7 +34,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 +45,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); + height: calc(100vh - var(--navbar-sub-height) - var(--navbar-height)); + margin-top: var(--navbar-sub-height); } } @@ -63,7 +66,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..a974fca 100644 --- a/src/css/toolbar.css +++ b/src/css/toolbar.css @@ -12,6 +12,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; } From 93540f6de8ef5ca9d15530d0f49c9ad924c3aaf5 Mon Sep 17 00:00:00 2001 From: Felix Hennig Date: Wed, 15 Nov 2023 15:51:50 +0100 Subject: [PATCH 2/5] documentation, cleanup --- src/css/nav.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/css/nav.css b/src/css/nav.css index 483a6f6..a0832ed 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -1,3 +1,9 @@ +/* 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. + */ + .nav-container { position: fixed; top: var(--navbar-height); @@ -19,9 +25,7 @@ font-size: calc(15.5 / var(--rem-base) * 1rem); flex: none; position: static; - /* top: calc(var(--navbar-height) + var(--navbar-sub-height)); */ top: 0; - /* margin-top: var(--navbar-sub-height); */ visibility: visible; } } From 4c580b3a865dc6d01fc35c7fb063260296ace78e Mon Sep 17 00:00:00 2001 From: Felix Hennig Date: Wed, 15 Nov 2023 16:02:35 +0100 Subject: [PATCH 3/5] more cleanup --- src/css/nav.css | 2 +- src/css/vars.css | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/css/nav.css b/src/css/nav.css index a0832ed..3bf0c90 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -1,5 +1,5 @@ /* This file contains the CSS for the sidebar navigation. - * The vertical navigation at the top is in the header.css + * 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. */ 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); From 4ac42eb6c91fd81966d26bf360903532615539b0 Mon Sep 17 00:00:00 2001 From: Felix Hennig Date: Wed, 15 Nov 2023 16:06:24 +0100 Subject: [PATCH 4/5] more cleanup --- src/css/nav.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/nav.css b/src/css/nav.css index 3bf0c90..dfdc26a 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -52,7 +52,7 @@ top: calc(var(--navbar-height) + var(--navbar-sub-height)); box-shadow: none; position: sticky; - height: calc(100vh - var(--navbar-sub-height) - var(--navbar-height)); + height: var(--nav-height--desktop); margin-top: var(--navbar-sub-height); } } From 688b42a585443911ab5aa8c1e058572f89dec3e3 Mon Sep 17 00:00:00 2001 From: Felix Hennig Date: Wed, 15 Nov 2023 16:10:15 +0100 Subject: [PATCH 5/5] more documentation --- src/css/nav.css | 4 ++++ src/css/toolbar.css | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/src/css/nav.css b/src/css/nav.css index dfdc26a..490bf1e 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -2,6 +2,10 @@ * 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 { diff --git a/src/css/toolbar.css b/src/css/toolbar.css index a974fca..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;