From b6c1404c235633ba36711abd8d57138676da61dc Mon Sep 17 00:00:00 2001 From: Ashley Chiu Date: Fri, 14 Jun 2024 23:16:37 -0700 Subject: [PATCH] add sticky header' --- _sass/custom/custom.scss | 50 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index 227e9dc..872cbc8 100644 --- a/_sass/custom/custom.scss +++ b/_sass/custom/custom.scss @@ -81,4 +81,54 @@ code span[style*="color: red"] { code[style*="color: red"] { color: var(--red-color) !important; +} + +// Begin UCB header fixes + +// If width of display is less than content-width, header is invisible +// so no extra CSS is needed + +// If width of display is at least content width: +@media (min-width: $content-width) { + .main-header { + position: fixed; // Sticky header (stays on top as you scroll) + top: 0; // Forces header on top of page + z-index: 1000; // Forces header drawn on top of everything else + } + + // Forces site title in sidebar to be flush with header + .side-bar { + top: 0; + left: 0; + } + + // Add whitespace between header and start of content (site title, logo) + .main-content-wrap { + margin-top: 60px; + } + + // Make the site title in the sidebar smaller + .site-title { + font-size: 19px !important; + } + + // Header width should be all of display, minus sidebar + // Seems like JTD fixes sidebar to 15.5rem in this layout (might be wrong tho) + .main-header { + width: calc(100% - 15.5rem); + } +} + +// If width of display is at least content+nav width +// (i.e. whitespace on either side of site): +@media (min-width: $content-width + $nav-width) { + // Set default site title in sidebar font size + .site-title { + font-size: 24px !important; + } + + // Header should match content width (e.g. in wider.scss) + .main-header { + width: $content-width; + } } \ No newline at end of file