lab/website-components
1
Fork 0
Code Activity

Add narrow hero layout

Browse source
This commit is contained in:
Jake Howard 2024-08-23 21:46:22 +01:00
parent f3beda2659
commit 12475dd216
Signed by: jake
GPG key ID: 57AFB45680EDD477
4 changed files with 162 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/narrow-hero/index.html Normal file
View file

@ -0,0 +1,44 @@
<html>
<head>
<link rel="stylesheet" href="./index.scss" />
</head>
<body>
<img src="https://placehold.co/1000x500" class="banner" />
<div class="details-wrapper" id="details">
<div class="details">
<small>Breadcrumb</small>
<h1>Title</h1>
<p>Details</p>
</div>
<div id="scroll-indicator-container">
<div id="scroll-indicator"></div>
</div>
</div>
<div class="content-wrapper">
<p>Content</p>
<img src="https://placehold.co/1000x200" class="inset" />
<img src="https://placehold.co/1000x200" />
<img src="https://placehold.co/1000x200" class="bleed" />
<img src="https://placehold.co/1000x200" class="full-bleed" />
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<script async src="./index.js" type="module"></script>
</body>
</html>

44
src/narrow-hero/index.js Normal file
View file

@ -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);
}
});

74
src/narrow-hero/index.scss Normal file
View file

@ -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;
}
}

1
src/sidebar-2/index.scss
View file

@ -122,7 +122,6 @@ main {
margin-left: 1rem !important; margin-left: 1rem !important;
margin-right: 1rem !important; margin-right: 1rem !important;
} }
} }
@media (max-width: 400px) { @media (max-width: 400px) {