From 0dc69763bcfded991f049b36fdd418ceb6519816 Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Tue, 13 Aug 2024 23:05:02 +0100 Subject: [PATCH] Add hero and sidebar mockup --- src/hero-sidebar/index.html | 46 ++++++++++++++++ src/hero-sidebar/index.scss | 104 ++++++++++++++++++++++++++++++++++++ src/hero/index.js | 10 ++-- 3 files changed, 156 insertions(+), 4 deletions(-) create mode 100644 src/hero-sidebar/index.html create mode 100644 src/hero-sidebar/index.scss diff --git a/src/hero-sidebar/index.html b/src/hero-sidebar/index.html new file mode 100644 index 0000000..3f1bba3 --- /dev/null +++ b/src/hero-sidebar/index.html @@ -0,0 +1,46 @@ + + + + + +
+
+
+ Breadcrumb +

Title

+

Details

+
+
+
+
+
+
+

Content

+ + + +

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+

Content

+
+
+
+

Sidebar

+
+
+
+ + + diff --git a/src/hero-sidebar/index.scss b/src/hero-sidebar/index.scss new file mode 100644 index 0000000..1d6cb99 --- /dev/null +++ b/src/hero-sidebar/index.scss @@ -0,0 +1,104 @@ +@import "normalize.css"; + +body, +html { + height: 100%; + font-size: 18px; +} + +$content-width: 85ch; +$content-padding: 16px; + +$bleed-ratio: 0.2; +$details-bg: black; +$details-padding: $content-padding; + +.hero { + height: 50vh; + background-color: red; + display: flex; + align-items: flex-end; + justify-content: center; + + .details-wrapper { + background-color: transparentize($details-bg, 0.6); + color: white; + line-height: 1; + width: calc(100% - ($details-padding * 2)); + padding: 0 $details-padding; + transition-duration: 0.15s; + transition-property: background-color, width; + + &.stuck { + position: fixed; + top: 0; + background-color: transparentize($details-bg, 0.1); + width: $content-width; + } + } + + .details { + width: $content-width; + max-width: 100%; + margin: 1rem auto; + + h1 { + margin: 0; + margin-bottom: 0.75rem; + margin-top: 0.5rem; + font-size: 3.5rem; + } + + p { + margin: 0; + } + } +} + +main { + display: flex; +} + +.spacer { + flex-grow: 1; + flex-shrink: 10; + flex-basis: 200px; +} + +.content-wrapper { + display: grid; + width: $content-width * (1 + $bleed-ratio); + grid-template-columns: + 1fr + $content-width + 1fr; + + & > * { + grid-column: 2; + width: 100%; + } + + .bleed { + grid-column: 1 / -1; + max-width: 100vw; + margin-left: auto; + margin-right: auto; + } + + .inset { + max-width: calc($content-width * (1 - $bleed-ratio)); + margin-left: auto; + margin-right: auto; + } +} + +.sidebar { + flex-grow: 1; + flex-shrink: 10; + flex-basis: 200px; + + .sidebar-inner { + position: sticky; + top: 0; + } +} diff --git a/src/hero/index.js b/src/hero/index.js index bcba853..76b1578 100644 --- a/src/hero/index.js +++ b/src/hero/index.js @@ -51,9 +51,11 @@ window.addEventListener("load", function () { handleDetailsStick(hero); - window.addEventListener("resize", handleScrollIndicator); - window.addEventListener("scroll", handleScrollIndicator); + if (SCROLL_INDICATOR) { + window.addEventListener("resize", handleScrollIndicator); + window.addEventListener("scroll", handleScrollIndicator); - // Initialize the indicator - handleScrollIndicator(); + // Initialize the indicator + handleScrollIndicator(); + } });