Skip to content

Commit 7cade5c

Browse files
ModelizedModelized
authored
Website Update
1 parent 1bbef1a commit 7cade5c

3 files changed

Lines changed: 43 additions & 50 deletions

File tree

‎docs/assets/css/style.css‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,9 @@
5151
--home-image-silhouette-brightness: 1.24;
5252
--home-image-silhouette-contrast: 1.08;
5353
--home-next-layer-opacity: 0;
54-
--home-next-layer-shift: 24px;
55-
--home-next-layer-overlap: clamp(31rem, 62vh, 42rem);
56-
--site-html-warm-alpha: 0.08;
57-
--site-html-cool-alpha: 0.08;
58-
--site-body-warm-alpha: 0.11;
59-
--site-body-cool-alpha: 0.10;
60-
--site-body-bottom-alpha: 0.012;
54+
--home-next-layer-shift: 18px;
55+
--home-next-layer-overlap: clamp(34rem, 68vh, 46rem);
56+
--site-atmosphere-opacity: 1;
6157
}
6258

6359
* {
@@ -67,10 +63,7 @@
6763
html {
6864
scroll-behavior: smooth;
6965
-webkit-text-size-adjust: 100%;
70-
background:
71-
radial-gradient(72% 58% at 22% 26%, rgba(255, 157, 77, var(--site-html-warm-alpha)), rgba(255, 157, 77, 0) 70%),
72-
radial-gradient(64% 54% at 78% 34%, rgba(82, 104, 255, var(--site-html-cool-alpha)), rgba(82, 104, 255, 0) 72%),
73-
linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
66+
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
7467
color-scheme: dark;
7568
}
7669

@@ -82,21 +75,29 @@ body {
8275
position: relative;
8376
font-family: var(--body-font);
8477
color: var(--text);
85-
background:
86-
radial-gradient(72% 58% at 22% 26%, rgba(255, 157, 77, var(--site-body-warm-alpha)), rgba(255, 157, 77, 0) 70%),
87-
radial-gradient(64% 54% at 78% 34%, rgba(82, 104, 255, var(--site-body-cool-alpha)), rgba(82, 104, 255, 0) 72%),
88-
radial-gradient(78% 66% at 56% 100%, rgba(255, 255, 255, var(--site-body-bottom-alpha)), rgba(255, 255, 255, 0) 72%),
89-
linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
78+
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
9079
overflow-x: hidden;
9180
background-color: var(--bg);
9281
}
9382

83+
body::before {
84+
content: "";
85+
position: fixed;
86+
inset: 0;
87+
z-index: 0;
88+
pointer-events: none;
89+
background:
90+
radial-gradient(72% 58% at 22% 26%, rgba(255, 157, 77, 0.19), rgba(255, 157, 77, 0) 70%),
91+
radial-gradient(64% 54% at 78% 34%, rgba(82, 104, 255, 0.18), rgba(82, 104, 255, 0) 72%),
92+
radial-gradient(78% 66% at 56% 100%, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0) 72%);
93+
opacity: var(--site-atmosphere-opacity);
94+
will-change: opacity;
95+
transform: translateZ(0);
96+
backface-visibility: hidden;
97+
}
98+
9499
body.page-home {
95-
--site-html-warm-alpha: 0;
96-
--site-html-cool-alpha: 0;
97-
--site-body-warm-alpha: 0;
98-
--site-body-cool-alpha: 0;
99-
--site-body-bottom-alpha: 0;
100+
--site-atmosphere-opacity: 0;
100101
}
101102

102103
body.no-scroll {
@@ -1025,14 +1026,15 @@ a {
10251026
.hero {
10261027
--hero-stage-offset: var(--page-top-offset);
10271028
--hero-top-pad: clamp(1.3rem, 1.9vw, 2rem);
1028-
--hero-content-bottom-gap: clamp(1.55rem, 2.35vw, 2.25rem);
1029+
--hero-stage-bottom-pad: clamp(1.55rem, 2.35vw, 2.25rem);
1030+
--hero-copy-bottom-offset: clamp(2.1rem, 3vw, 2.9rem);
10291031
--hero-stage-min: 0px;
10301032
--home-transition-span: clamp(9rem, 16vh, 13rem);
10311033
--home-transition-distance: var(--home-transition-span);
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));
1034+
--hero-image-anchor-y: 47.7%;
1035+
--hero-stage-height: calc(var(--hero-initial-viewport-height, 100svh) - var(--hero-stage-offset) - var(--hero-top-pad) - var(--hero-stage-bottom-pad));
10341036
--hero-stage-reference: max(var(--hero-stage-height), var(--hero-stage-min));
1035-
--hero-visual-height: calc(var(--hero-top-pad) + var(--hero-stage-reference) + var(--hero-content-bottom-gap));
1037+
--hero-visual-height: calc(var(--hero-top-pad) + var(--hero-stage-reference) + var(--hero-stage-bottom-pad));
10361038
--hero-image-size: clamp(30rem, calc(var(--hero-stage-reference) * 1.06), 60rem);
10371039
--hero-image-max-inline: 100%;
10381040
--hero-tagline-base-size: clamp(2.75rem, min(calc(var(--hero-stage-reference) * 0.106), 12.6cqi), 4.45rem);
@@ -1060,14 +1062,14 @@ a {
10601062
inset: 0 0 auto;
10611063
height: var(--hero-visual-height);
10621064
padding-top: var(--hero-top-pad);
1063-
padding-bottom: var(--hero-content-bottom-gap);
1065+
padding-bottom: var(--hero-stage-bottom-pad);
10641066
z-index: 3;
10651067
isolation: isolate;
10661068
}
10671069

10681070
.hero-visual {
10691071
position: sticky;
1070-
top: 0;
1072+
top: var(--page-top-offset);
10711073
height: var(--hero-visual-height);
10721074
z-index: 1;
10731075
pointer-events: none;
@@ -1429,7 +1431,7 @@ a {
14291431

14301432
.hero-copy {
14311433
position: absolute;
1432-
inset: auto 0 var(--hero-content-bottom-gap);
1434+
inset: auto 0 var(--hero-copy-bottom-offset);
14331435
z-index: 3;
14341436
display: flex;
14351437
align-items: flex-end;
@@ -2398,7 +2400,8 @@ body.page-home #about {
23982400

23992401
.hero {
24002402
--hero-top-pad: clamp(1rem, 1.7vw, 1.4rem);
2401-
--hero-content-bottom-gap: clamp(1.45rem, 2.25vw, 2rem);
2403+
--hero-stage-bottom-pad: clamp(1.4rem, 2.15vw, 1.95rem);
2404+
--hero-copy-bottom-offset: clamp(1.8rem, 2.9vw, 2.35rem);
24022405
}
24032406

24042407
.hero-copy {
@@ -2463,11 +2466,12 @@ body.page-home #about {
24632466

24642467
.hero {
24652468
--hero-top-pad: 1.05rem;
2466-
--hero-content-bottom-gap: 1.25rem;
2469+
--hero-stage-bottom-pad: 1.1rem;
2470+
--hero-copy-bottom-offset: 1.72rem;
24672471
--home-transition-span: clamp(8.5rem, 15vh, 11.5rem);
24682472
--hero-image-size: clamp(29rem, calc(var(--hero-stage-reference) * 0.96), 52rem);
24692473
--hero-image-max-inline: 110vw;
2470-
--hero-image-anchor-y: 45.4%;
2474+
--hero-image-anchor-y: 43.95%;
24712475
--hero-tagline-base-size: clamp(2.25rem, min(calc(var(--hero-stage-reference) * 0.1), 11.2cqi), 3.35rem);
24722476
}
24732477

‎docs/assets/js/shell.js‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1271,13 +1271,6 @@
12711271
let transitionDistance = 1;
12721272
let lowerLayerStartShift = 28;
12731273
let lastBackdropSuppression = "";
1274-
const atmosphereTargets = {
1275-
htmlWarm: 0.08,
1276-
htmlCool: 0.08,
1277-
bodyWarm: 0.11,
1278-
bodyCool: 0.10,
1279-
bodyBottom: 0.012
1280-
};
12811274

12821275
const readMetrics = () => {
12831276
const styles = getComputedStyle(hero);
@@ -1298,21 +1291,17 @@
12981291
stageReference * 1.78,
12991292
viewportHeight * 1.42
13001293
);
1301-
lowerLayerStartShift = Math.min(Math.max(viewportHeight * 0.032, 18), 34);
1294+
lowerLayerStartShift = Math.min(Math.max(viewportHeight * 0.022, 12), 22);
13021295
const lowerLayerOverlap = Math.max(
1303-
Math.min(viewportHeight * 0.72, stageReference * 1.02),
1304-
viewportHeight * 0.56
1296+
Math.min(viewportHeight * 0.82, stageReference * 1.14),
1297+
viewportHeight * 0.66
13051298
);
13061299
hero.style.setProperty("--home-transition-distance", `${transitionDistance.toFixed(2)}px`);
13071300
root.style.setProperty("--home-next-layer-overlap", `${lowerLayerOverlap.toFixed(2)}px`);
13081301
};
13091302

13101303
const setAtmosphere = (amount) => {
1311-
root.style.setProperty("--site-html-warm-alpha", (atmosphereTargets.htmlWarm * amount).toFixed(4));
1312-
root.style.setProperty("--site-html-cool-alpha", (atmosphereTargets.htmlCool * amount).toFixed(4));
1313-
body.style.setProperty("--site-body-warm-alpha", (atmosphereTargets.bodyWarm * amount).toFixed(4));
1314-
body.style.setProperty("--site-body-cool-alpha", (atmosphereTargets.bodyCool * amount).toFixed(4));
1315-
body.style.setProperty("--site-body-bottom-alpha", (atmosphereTargets.bodyBottom * amount).toFixed(4));
1304+
root.style.setProperty("--site-atmosphere-opacity", amount.toFixed(4));
13161305
};
13171306

13181307
const setLowerLayer = (amount) => {
@@ -1334,8 +1323,8 @@
13341323
const silhouetteFade = 1 - range(progress, 0.34, 0.58, easeInOutCubic);
13351324
const silhouetteOpacity = 0.74 * silhouetteAppear * silhouetteFade;
13361325
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);
1326+
const atmosphereProgress = range(progress, 0.64, 0.9, easeInOutCubic);
1327+
const nextLayerProgress = range(progress, 0.5, 0.76, easeInOutCubic);
13391328
const backdropSuppression = progress < 0.88 ? "1" : "0";
13401329

13411330
root.style.setProperty("--home-ui-opacity", Math.max(0, uiOpacity).toFixed(4));

‎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=20260418d">
11+
<link rel="stylesheet" href="assets/css/style.css?v=20260418e">
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=20260418d" defer></script>
231+
<script src="assets/js/shell.js?v=20260418e" defer></script>
232232
</body>
233233
</html>

0 commit comments

Comments
 (0)