Breadcrumb
diff --git a/src/narrow-hero/index.js b/src/narrow-hero/index.js
index 94e8c4e..1057c3a 100644
--- a/src/narrow-hero/index.js
+++ b/src/narrow-hero/index.js
@@ -1,5 +1,8 @@
+import { decode } from "blurhash";
+
const SCROLL_INDICATOR = document.getElementById("scroll-indicator");
const CONTENT = document.querySelector(".content-wrapper");
+const HERO_WRAPPER = document.getElementById("banner-wrapper");
function getScrollPercentage() {
const contentRect = CONTENT.getBoundingClientRect();
@@ -33,6 +36,20 @@ function clamp(n, min, max) {
return Math.min(Math.max(n, min), max);
}
+function setHeroBackground() {
+ const pixels = decode("LIIyVQwg2nXmQ6j@x[Sv2pS1}kxH", 32, 32);
+
+ const canvas = document.createElement("canvas");
+ canvas.width = 32;
+ canvas.height = 32;
+ const ctx = canvas.getContext("2d");
+ const imageData = ctx.createImageData(32, 32);
+ imageData.data.set(pixels);
+ ctx.putImageData(imageData, 0, 0);
+
+ HERO_WRAPPER.style.backgroundImage = `url(${canvas.toDataURL()})`;
+}
+
window.addEventListener("load", function () {
if (SCROLL_INDICATOR) {
window.addEventListener("resize", handleScrollIndicator);
@@ -41,4 +58,6 @@ window.addEventListener("load", function () {
// Initialize the indicator, matching timeout to transition time
setTimeout(handleScrollIndicator, 200);
}
+
+ setHeroBackground();
});
diff --git a/src/narrow-hero/index.scss b/src/narrow-hero/index.scss
index 6249e22..73a5003 100644
--- a/src/narrow-hero/index.scss
+++ b/src/narrow-hero/index.scss
@@ -13,6 +13,8 @@ $max-content-width: calc(100% - 2rem);
max-width: 100%;
margin: 0 auto;
display: block;
+ height: 45vh;
+ object-fit: cover;
}
.details-wrapper {
@@ -72,3 +74,9 @@ $max-content-width: calc(100% - 2rem);
transition: opacity 0.2s linear;
}
}
+
+#banner-wrapper {
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+}
+