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
+
+
+
+
+
+
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();
+ }
});