~xdavidwu/xdavidwu.link: Add vertical scrollbar to sidebars that extend outside the viewport

87655268bc2981be42f9a7f05dd0325e0f94b0a0 — Michael Rose 7 years ago 0e61603

Add vertical scrollbar to sidebars that extend outside the viewport

Viewing overflowing sidebar content requires scrolling the entire page which is annoying and causes the reader to lose their place.

Use CSS `calc` to approximate height of the sidebar (`100vh` - height of the masthead) and apply `overflow-y: auto` to add vertical scrollbars when needed.

Fixes #706

patch browse .tar.gz

2 files changed, 12 insertions(+), 0 deletions(-)

M CHANGELOG.md
M _sass/minimal-mistakes/_sidebar.scss

M CHANGELOG.md => CHANGELOG.md +6 -0

@@ 1,3 1,9 @@
+## Unreleased
+
+### Enhancements
+
+- Add scrollbar to sidebars with overflowing content that extends outside the viewport's height. [#706](https://github.com/mmistakes/minimal-mistakes/issues/706)
+
 ## [4.4.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.4.2)
 
 ### Enhancements

M _sass/minimal-mistakes/_sidebar.scss => _sass/minimal-mistakes/_sidebar.scss +6 -0

@@ 22,6 22,12 @@
     &:hover {
       opacity: 1;
     }
+
+    &.sticky {
+      overflow-y: auto;
+      /* calculate height of nav list */
+      height: calc(100vh - 90px - 2em); // viewport height - approx. masthead height - main content top margin
+    }
   }
 
   @include breakpoint($x-large) {