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) {