Skip to content

Commit 1bbef1a

Browse files
ModelizedModelized
authored
Website Update
1 parent 2cb2483 commit 1bbef1a

3 files changed

Lines changed: 39 additions & 39 deletions

File tree

‎docs/assets/css/style.css‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,16 @@
4343
--page-top-offset: calc(env(safe-area-inset-top, 0px) + 12px + var(--nav-pill-height-desktop) + 28px);
4444
--home-ui-opacity: 1;
4545
--home-image-scroll-scale: 1;
46+
--home-image-unit-opacity: 1;
4647
--home-image-base-layer-opacity: 1;
4748
--home-image-base-brightness: 1;
4849
--home-image-base-contrast: 1;
4950
--home-image-silhouette-layer-opacity: 0;
5051
--home-image-silhouette-brightness: 1.24;
5152
--home-image-silhouette-contrast: 1.08;
52-
--home-image-gradient-opacity: 1;
5353
--home-next-layer-opacity: 0;
54-
--home-next-layer-shift: 28vh;
55-
--home-next-layer-overlap: clamp(23rem, 40vh, 29rem);
54+
--home-next-layer-shift: 24px;
55+
--home-next-layer-overlap: clamp(31rem, 62vh, 42rem);
5656
--site-html-warm-alpha: 0.08;
5757
--site-html-cool-alpha: 0.08;
5858
--site-body-warm-alpha: 0.11;
@@ -175,10 +175,6 @@ a {
175175
padding-top: var(--page-top-offset);
176176
}
177177

178-
body.page-home .page-wrap {
179-
padding-top: 0;
180-
}
181-
182178
.container {
183179
width: min(var(--container), calc(100% - 3.25rem));
184180
margin: 0 auto;
@@ -1027,13 +1023,14 @@ body.page-home .page-wrap {
10271023
}
10281024

10291025
.hero {
1030-
--hero-top-clearance: var(--page-top-offset);
1026+
--hero-stage-offset: var(--page-top-offset);
10311027
--hero-top-pad: clamp(1.3rem, 1.9vw, 2rem);
10321028
--hero-content-bottom-gap: clamp(1.55rem, 2.35vw, 2.25rem);
10331029
--hero-stage-min: 0px;
10341030
--home-transition-span: clamp(9rem, 16vh, 13rem);
10351031
--home-transition-distance: var(--home-transition-span);
1036-
--hero-stage-height: calc(var(--hero-initial-viewport-height, 100svh) - var(--hero-top-clearance) - var(--hero-top-pad) - var(--hero-content-bottom-gap));
1032+
--hero-image-anchor-y: 48.9%;
1033+
--hero-stage-height: calc(var(--hero-initial-viewport-height, 100svh) - var(--hero-stage-offset) - var(--hero-top-pad) - var(--hero-content-bottom-gap));
10371034
--hero-stage-reference: max(var(--hero-stage-height), var(--hero-stage-min));
10381035
--hero-visual-height: calc(var(--hero-top-pad) + var(--hero-stage-reference) + var(--hero-content-bottom-gap));
10391036
--hero-image-size: clamp(30rem, calc(var(--hero-stage-reference) * 1.06), 60rem);
@@ -1043,7 +1040,7 @@ body.page-home .page-wrap {
10431040
--hero-unseen-size: var(--hero-tagline-base-size);
10441041
--hero-tagline-max-width: 100%;
10451042
position: relative;
1046-
min-height: calc(var(--hero-top-clearance) + var(--hero-visual-height) + var(--home-transition-distance));
1043+
min-height: calc(var(--hero-visual-height) + var(--home-transition-distance));
10471044
padding-top: 0;
10481045
padding-bottom: 0;
10491046
background: transparent;
@@ -1053,15 +1050,15 @@ body.page-home .page-wrap {
10531050

10541051
.hero-layout {
10551052
position: relative;
1056-
min-height: calc(var(--hero-top-clearance) + var(--hero-visual-height) + var(--home-transition-distance));
1053+
min-height: calc(var(--hero-visual-height) + var(--home-transition-distance));
10571054
z-index: 2;
10581055
isolation: isolate;
10591056
}
10601057

10611058
.hero-stage {
10621059
position: absolute;
1063-
inset: var(--hero-top-clearance) 0 auto;
1064-
min-height: var(--hero-visual-height);
1060+
inset: 0 0 auto;
1061+
height: var(--hero-visual-height);
10651062
padding-top: var(--hero-top-pad);
10661063
padding-bottom: var(--hero-content-bottom-gap);
10671064
z-index: 3;
@@ -1070,7 +1067,7 @@ body.page-home .page-wrap {
10701067

10711068
.hero-visual {
10721069
position: sticky;
1073-
top: var(--hero-top-clearance);
1070+
top: 0;
10741071
height: var(--hero-visual-height);
10751072
z-index: 1;
10761073
pointer-events: none;
@@ -1080,7 +1077,7 @@ body.page-home .page-wrap {
10801077
.hero-image-wrap {
10811078
position: absolute;
10821079
left: 50%;
1083-
top: 50.4%;
1080+
top: var(--hero-image-anchor-y);
10841081
z-index: 1;
10851082
display: grid;
10861083
place-items: center;
@@ -1096,6 +1093,7 @@ body.page-home .page-wrap {
10961093
display: grid;
10971094
place-items: center;
10981095
width: 100%;
1096+
opacity: var(--home-image-unit-opacity);
10991097
will-change: transform;
11001098
}
11011099

@@ -1133,7 +1131,7 @@ body.page-home .page-wrap {
11331131
z-index: 3;
11341132
height: clamp(9rem, 28%, 16rem);
11351133
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 18%, rgba(0, 0, 0, 0.42) 54%, rgba(0, 0, 0, 0.82) 82%, #000 100%);
1136-
opacity: var(--home-image-gradient-opacity);
1134+
opacity: 1;
11371135
pointer-events: none;
11381136
will-change: opacity;
11391137
}
@@ -1431,7 +1429,7 @@ body.page-home .page-wrap {
14311429

14321430
.hero-copy {
14331431
position: absolute;
1434-
inset: auto 0 0;
1432+
inset: auto 0 var(--hero-content-bottom-gap);
14351433
z-index: 3;
14361434
display: flex;
14371435
align-items: flex-end;
@@ -2469,13 +2467,10 @@ body.page-home #about {
24692467
--home-transition-span: clamp(8.5rem, 15vh, 11.5rem);
24702468
--hero-image-size: clamp(29rem, calc(var(--hero-stage-reference) * 0.96), 52rem);
24712469
--hero-image-max-inline: 110vw;
2470+
--hero-image-anchor-y: 45.4%;
24722471
--hero-tagline-base-size: clamp(2.25rem, min(calc(var(--hero-stage-reference) * 0.1), 11.2cqi), 3.35rem);
24732472
}
24742473

2475-
.hero-image-wrap {
2476-
top: 47.4%;
2477-
}
2478-
24792474
.hero-kicker {
24802475
flex-direction: column;
24812476
align-items: flex-start;

‎docs/assets/js/shell.js‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1269,7 +1269,7 @@
12691269
let rafId = 0;
12701270
let transitionSpan = 1;
12711271
let transitionDistance = 1;
1272-
let lowerLayerStartShift = 58;
1272+
let lowerLayerStartShift = 28;
12731273
let lastBackdropSuppression = "";
12741274
const atmosphereTargets = {
12751275
htmlWarm: 0.08,
@@ -1298,8 +1298,13 @@
12981298
stageReference * 1.78,
12991299
viewportHeight * 1.42
13001300
);
1301-
lowerLayerStartShift = Math.min(Math.max(viewportHeight * 0.07, 36), 84);
1301+
lowerLayerStartShift = Math.min(Math.max(viewportHeight * 0.032, 18), 34);
1302+
const lowerLayerOverlap = Math.max(
1303+
Math.min(viewportHeight * 0.72, stageReference * 1.02),
1304+
viewportHeight * 0.56
1305+
);
13021306
hero.style.setProperty("--home-transition-distance", `${transitionDistance.toFixed(2)}px`);
1307+
root.style.setProperty("--home-next-layer-overlap", `${lowerLayerOverlap.toFixed(2)}px`);
13031308
};
13041309

13051310
const setAtmosphere = (amount) => {
@@ -1320,26 +1325,26 @@
13201325
rafId = 0;
13211326

13221327
const progress = clamp(getScrollTop() / transitionDistance, 0, 1);
1323-
const uiOpacity = 1 - range(progress, 0.02, 0.7, linear);
1324-
const imageScale = lerp(1, 1.12, range(progress, 0, 0.8, easeOutCubic));
1325-
const baseFade = 1 - range(progress, 0.06, 0.76, linear);
1326-
const baseBrightness = lerp(1, 0.7, range(progress, 0.08, 0.72, easeInOutCubic));
1327-
const baseContrast = lerp(1, 0.93, range(progress, 0.08, 0.72, easeInOutCubic));
1328-
const silhouetteAppear = range(progress, 0.16, 0.44, easeInOutCubic);
1329-
const silhouetteFade = 1 - range(progress, 0.46, 0.76, easeInOutCubic);
1330-
const silhouetteOpacity = 0.8 * silhouetteAppear * silhouetteFade;
1331-
const gradientOpacity = Math.max(0, baseFade);
1332-
const atmosphereProgress = range(progress, 0.42, 0.74, easeInOutCubic);
1333-
const nextLayerProgress = range(progress, 0.38, 0.76, easeInOutCubic);
1334-
const backdropSuppression = progress < 0.78 ? "1" : "0";
1328+
const uiOpacity = 1 - range(progress, 0.06, 0.62, linear);
1329+
const imageScale = lerp(1, 1.125, range(progress, 0, 0.74, easeOutCubic));
1330+
const baseFade = 1 - range(progress, 0.08, 0.56, linear);
1331+
const baseBrightness = lerp(1, 0.68, range(progress, 0.1, 0.54, easeInOutCubic));
1332+
const baseContrast = lerp(1, 0.92, range(progress, 0.12, 0.54, easeInOutCubic));
1333+
const silhouetteAppear = range(progress, 0.2, 0.34, easeInOutCubic);
1334+
const silhouetteFade = 1 - range(progress, 0.34, 0.58, easeInOutCubic);
1335+
const silhouetteOpacity = 0.74 * silhouetteAppear * silhouetteFade;
1336+
const heroUnitOpacity = Math.max(baseFade, silhouetteOpacity);
1337+
const atmosphereProgress = range(progress, 0.62, 0.88, easeInOutCubic);
1338+
const nextLayerProgress = range(progress, 0.58, 0.84, easeInOutCubic);
1339+
const backdropSuppression = progress < 0.88 ? "1" : "0";
13351340

13361341
root.style.setProperty("--home-ui-opacity", Math.max(0, uiOpacity).toFixed(4));
13371342
root.style.setProperty("--home-image-scroll-scale", imageScale.toFixed(4));
1343+
root.style.setProperty("--home-image-unit-opacity", Math.max(0, heroUnitOpacity).toFixed(4));
13381344
root.style.setProperty("--home-image-base-layer-opacity", Math.max(0, baseFade).toFixed(4));
13391345
root.style.setProperty("--home-image-base-brightness", baseBrightness.toFixed(4));
13401346
root.style.setProperty("--home-image-base-contrast", baseContrast.toFixed(4));
13411347
root.style.setProperty("--home-image-silhouette-layer-opacity", Math.max(0, silhouetteOpacity).toFixed(4));
1342-
root.style.setProperty("--home-image-gradient-opacity", Math.max(0, gradientOpacity).toFixed(4));
13431348
setAtmosphere(atmosphereProgress);
13441349
setLowerLayer(nextLayerProgress);
13451350

@@ -1370,11 +1375,11 @@
13701375
if (prefersReducedMotion) {
13711376
root.style.setProperty("--home-ui-opacity", "1");
13721377
root.style.setProperty("--home-image-scroll-scale", "1");
1378+
root.style.setProperty("--home-image-unit-opacity", "1");
13731379
root.style.setProperty("--home-image-base-layer-opacity", "1");
13741380
root.style.setProperty("--home-image-base-brightness", "1");
13751381
root.style.setProperty("--home-image-base-contrast", "1");
13761382
root.style.setProperty("--home-image-silhouette-layer-opacity", "0");
1377-
root.style.setProperty("--home-image-gradient-opacity", "1");
13781383
setAtmosphere(1);
13791384
setLowerLayer(1);
13801385
body.dataset.homeBackdropSuppressed = "0";

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Rock+Salt&family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@500;700;800&display=swap" rel="stylesheet">
11-
<link rel="stylesheet" href="assets/css/style.css?v=20260418c">
11+
<link rel="stylesheet" href="assets/css/style.css?v=20260418d">
1212

1313
<link rel="icon" type="image/svg+xml" href="favicon.svg">
1414
<link rel="icon" sizes="192x192" href="android-chrome-192x192.png">
@@ -228,6 +228,6 @@ <h2>A <span class="tagline-script">Closer Look</span> At The Path</h2>
228228

229229
<div id="footer-slot"></div>
230230

231-
<script src="assets/js/shell.js?v=20260418c" defer></script>
231+
<script src="assets/js/shell.js?v=20260418d" defer></script>
232232
</body>
233233
</html>

0 commit comments

Comments
 (0)