From 12475dd21675247d54d619ef55d2d3023ea468a3 Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Fri, 23 Aug 2024 21:46:22 +0100 Subject: [PATCH] Add narrow hero layout --- src/narrow-hero/index.html | 44 +++++++++++++++++++++++ src/narrow-hero/index.js | 44 +++++++++++++++++++++++ src/narrow-hero/index.scss | 74 ++++++++++++++++++++++++++++++++++++++ src/sidebar-2/index.scss | 1 - 4 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 src/narrow-hero/index.html create mode 100644 src/narrow-hero/index.js create mode 100644 src/narrow-hero/index.scss diff --git a/src/narrow-hero/index.html b/src/narrow-hero/index.html new file mode 100644 index 0000000..aced2c0 --- /dev/null +++ b/src/narrow-hero/index.html @@ -0,0 +1,44 @@ + + + + + + +
+
+ Breadcrumb +

Title

+

Details

+
+
+
+
+
+
+

Content

+ + + + +

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+
+ + + diff --git a/src/narrow-hero/index.js b/src/narrow-hero/index.js new file mode 100644 index 0000000..94e8c4e --- /dev/null +++ b/src/narrow-hero/index.js @@ -0,0 +1,44 @@ +const SCROLL_INDICATOR = document.getElementById("scroll-indicator"); +const CONTENT = document.querySelector(".content-wrapper"); + +function getScrollPercentage() { + const contentRect = CONTENT.getBoundingClientRect(); + + // How far down the page does the content start? + const initialScroll = contentRect.top + window.scrollY; + + const contentHeight = contentRect.height; + + // How far down the page do we consider the content "read"? + const scrollTarget = window.innerHeight * 0.75; + + const scrolled = + (window.scrollY - initialScroll + scrollTarget) / contentHeight; + + return clamp(scrolled * 100, 0, 100); +} + +function handleScrollIndicator() { + const scrollPercentage = getScrollPercentage(); + SCROLL_INDICATOR.style.width = `${scrollPercentage.toFixed(2)}%`; + + const showIndicator = + CONTENT.getBoundingClientRect().top < + SCROLL_INDICATOR.getBoundingClientRect().top; + + SCROLL_INDICATOR.style.opacity = showIndicator ? 1 : 0; +} + +function clamp(n, min, max) { + return Math.min(Math.max(n, min), max); +} + +window.addEventListener("load", function () { + if (SCROLL_INDICATOR) { + window.addEventListener("resize", handleScrollIndicator); + window.addEventListener("scroll", handleScrollIndicator); + + // Initialize the indicator, matching timeout to transition time + setTimeout(handleScrollIndicator, 200); + } +}); diff --git a/src/narrow-hero/index.scss b/src/narrow-hero/index.scss new file mode 100644 index 0000000..6249e22 --- /dev/null +++ b/src/narrow-hero/index.scss @@ -0,0 +1,74 @@ +@import "normalize.css"; + +body, +html { + font-size: 18px; +} + +$content-width: 100ch; +$max-content-width: calc(100% - 2rem); + +.banner { + width: $content-width; + max-width: 100%; + margin: 0 auto; + display: block; +} + +.details-wrapper { + position: sticky; + padding-top: 1rem; + top: 0; + background-color: white; + + .details { + width: $content-width; + max-width: $max-content-width; + margin: 0 auto; + } +} + +.content-wrapper { + display: grid; + width: 100%; + grid-template-columns: 1fr min($content-width, $max-content-width) 1fr; + + & > * { + grid-column: 2; + width: 100%; + } + + .full-bleed { + grid-column: 1 / -1; + } + + .bleed { + grid-column: 1 / -1; + width: ($content-width * 1.2); + max-width: 100%; + margin-left: auto; + margin-right: auto; + } + + .inset { + width: ($content-width * 0.8); + max-width: $max-content-width; + margin-left: auto; + margin-right: auto; + } +} + +#scroll-indicator-container { + height: 5px; + width: 100%; + position: relative; + top: 5px; + + #scroll-indicator { + background-color: green; + height: 100%; + opacity: 0; + width: 0; + transition: opacity 0.2s linear; + } +} diff --git a/src/sidebar-2/index.scss b/src/sidebar-2/index.scss index 7082f65..cdaf2b2 100644 --- a/src/sidebar-2/index.scss +++ b/src/sidebar-2/index.scss @@ -122,7 +122,6 @@ main { margin-left: 1rem !important; margin-right: 1rem !important; } - } @media (max-width: 400px) {