Skip to content

Commit 0b8a78a

Browse files
ModelizedModelized
authored
Website Update
1 parent d71e19e commit 0b8a78a

2 files changed

Lines changed: 48 additions & 31 deletions

File tree

‎docs/assets/css/style.css‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@
4545
--home-image-scroll-scale: 1;
4646
--home-image-base-layer-opacity: 1;
4747
--home-image-base-brightness: 1;
48-
--home-image-base-contrast: 1;
4948
--home-image-silhouette-layer-opacity: 0;
5049
--home-image-silhouette-brightness: 1.24;
5150
--home-image-silhouette-contrast: 1.08;
@@ -54,8 +53,8 @@
5453
--home-next-layer-overlap: clamp(34rem, 68vh, 46rem);
5554
--site-atmosphere-opacity: 1;
5655

57-
--site-atmosphere-top: clamp(4.75rem, 10.5svh, 8.25rem);
58-
--site-atmosphere-box-height: clamp(15rem, 35svh, 25rem);
56+
--site-atmosphere-top: clamp(4.75rem, 10svh, 8.25rem);
57+
--site-atmosphere-box-height: clamp(17rem, 35svh, 25rem);
5958
--site-atmosphere-width: 152vw;
6059
}
6160

@@ -1169,9 +1168,7 @@ a {
11691168
position: relative;
11701169
z-index: 1;
11711170
opacity: var(--home-image-base-layer-opacity);
1172-
filter:
1173-
brightness(var(--home-image-base-brightness))
1174-
contrast(var(--home-image-base-contrast));
1171+
filter: brightness(var(--home-image-base-brightness));
11751172
}
11761173

11771174
.hero-image-layer--silhouette {
@@ -2447,7 +2444,7 @@ body.page-home #about {
24472444
:root {
24482445
--page-top-offset: calc(env(safe-area-inset-top, 0px) + 5.35rem);
24492446
--site-atmosphere-top: clamp(4.2rem, 9.5svh, 7rem);
2450-
--site-atmosphere-box-height: clamp(13rem, 32svh, 21rem);
2447+
--site-atmosphere-box-height: clamp(15rem, 33svh, 22rem);
24512448
--site-atmosphere-width: 160vw;
24522449
}
24532450

@@ -2503,8 +2500,8 @@ body.page-home #about {
25032500
@media (max-width: 980px) and (orientation: portrait) {
25042501
:root {
25052502
--page-top-offset: calc(env(safe-area-inset-top, 0px) + 8px + var(--nav-pill-height-mobile) + 14px);
2506-
--site-atmosphere-top: clamp(4.9rem, 11svh, 7.6rem);
2507-
--site-atmosphere-box-height: clamp(12.75rem, 30svh, 18.5rem);
2503+
--site-atmosphere-top: clamp(4.9rem, 10.5svh, 7.6rem);
2504+
--site-atmosphere-box-height: clamp(14.5rem, 32svh, 20.5rem);
25082505
--site-atmosphere-width: 182vw;
25092506
}
25102507

@@ -2693,8 +2690,8 @@ body.page-home #about {
26932690

26942691
@media (max-width: 980px) and (orientation: landscape) {
26952692
:root {
2696-
--site-atmosphere-top: clamp(3.95rem, 8.6svh, 6rem);
2697-
--site-atmosphere-box-height: clamp(11.5rem, 28svh, 16.5rem);
2693+
--site-atmosphere-top: clamp(3.6rem, 8.8svh, 5.8rem);
2694+
--site-atmosphere-box-height: clamp(12.5rem, 29svh, 17rem);
26982695
--site-atmosphere-width: 156vw;
26992696
}
27002697

‎docs/assets/js/shell.js‎

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1238,13 +1238,16 @@
12381238
function initSiteAtmosphereLock() {
12391239
const atmosphere = document.querySelector('.site-atmosphere');
12401240
const layer = document.querySelector('.site-atmosphere__layer');
1241+
const root = document.documentElement;
12411242

12421243
if (!atmosphere || !layer) {
12431244
return;
12441245
}
12451246

12461247
let rafId = 0;
12471248

1249+
const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
1250+
12481251
const clearInlineOverrides = () => {
12491252
atmosphere.style.removeProperty('transform');
12501253
atmosphere.style.removeProperty('translate');
@@ -1254,6 +1257,8 @@
12541257
atmosphere.style.removeProperty('margin-top');
12551258
atmosphere.style.removeProperty('margin-bottom');
12561259
atmosphere.style.removeProperty('min-height');
1260+
atmosphere.style.removeProperty('height');
1261+
atmosphere.style.removeProperty('top');
12571262

12581263
layer.style.removeProperty('transform');
12591264
layer.style.removeProperty('translate');
@@ -1268,28 +1273,46 @@
12681273
layer.style.removeProperty('animation');
12691274
};
12701275

1271-
const getDocumentHeight = () => {
1272-
const docEl = document.documentElement;
1273-
const bodyEl = document.body;
1274-
1275-
return Math.max(
1276-
docEl.scrollHeight || 0,
1277-
docEl.offsetHeight || 0,
1278-
docEl.clientHeight || 0,
1279-
bodyEl?.scrollHeight || 0,
1280-
bodyEl?.offsetHeight || 0,
1281-
bodyEl?.clientHeight || 0,
1282-
window.innerHeight || 0
1283-
);
1284-
};
1285-
12861276
const sync = () => {
12871277
rafId = 0;
12881278
clearInlineOverrides();
12891279

1290-
const fullHeight = Math.ceil(getDocumentHeight());
1291-
atmosphere.style.height = `${fullHeight}px`;
1280+
const viewportHeight = Math.max(
1281+
1,
1282+
Math.round(window.innerHeight || document.documentElement.clientHeight || 0)
1283+
);
1284+
const viewportWidth = Math.max(
1285+
1,
1286+
Math.round(window.innerWidth || document.documentElement.clientWidth || 0)
1287+
);
1288+
const portraitMobile = window.matchMedia('(max-width: 980px) and (orientation: portrait)').matches;
1289+
const landscapeMobile = window.matchMedia('(max-width: 980px) and (orientation: landscape)').matches;
1290+
1291+
const totalEffectHeight = portraitMobile
1292+
? clamp(viewportHeight * 0.44, 260, 430)
1293+
: landscapeMobile
1294+
? clamp(viewportHeight * 0.4, 210, 320)
1295+
: clamp(viewportHeight * 0.41, 240, 390);
1296+
1297+
const topOffset = portraitMobile
1298+
? clamp(viewportHeight * 0.028, 12, 26)
1299+
: landscapeMobile
1300+
? clamp(viewportHeight * 0.045, 14, 26)
1301+
: clamp(viewportHeight * 0.05, 18, 34);
1302+
1303+
const boxHeight = Math.max(160, Math.round(totalEffectHeight - topOffset));
1304+
const width = portraitMobile
1305+
? clamp(viewportWidth * 1.88, 580, 1200)
1306+
: landscapeMobile
1307+
? clamp(viewportWidth * 1.58, 900, 1800)
1308+
: clamp(viewportWidth * 1.52, 1100, 2200);
1309+
1310+
root.style.setProperty('--site-atmosphere-top', `${Math.round(topOffset)}px`);
1311+
root.style.setProperty('--site-atmosphere-box-height', `${Math.round(boxHeight)}px`);
1312+
root.style.setProperty('--site-atmosphere-width', `${Math.round(width)}px`);
1313+
12921314
atmosphere.style.top = '0px';
1315+
atmosphere.style.height = `${Math.round(topOffset + boxHeight)}px`;
12931316

12941317
body.dataset.siteAtmosphereLocked = '1';
12951318
};
@@ -1399,7 +1422,6 @@
13991422
const imageScale = lerp(1, 1.125, range(progress, 0, 0.72, easeOutCubic));
14001423
const baseFade = 1 - range(progress, 0.08, 0.52, linear);
14011424
const baseBrightness = lerp(1, 0.68, range(progress, 0.1, 0.48, easeInOutCubic));
1402-
const baseContrast = lerp(1, 0.92, range(progress, 0.12, 0.48, easeInOutCubic));
14031425
const silhouetteAppear = range(progress, 0.2, 0.28, easeInOutCubic);
14041426
const silhouetteFade = 1 - range(progress, 0.28, 0.48, easeInOutCubic);
14051427
const silhouetteOpacity = 0.74 * silhouetteAppear * silhouetteFade;
@@ -1411,7 +1433,6 @@
14111433
root.style.setProperty("--home-image-scroll-scale", imageScale.toFixed(4));
14121434
root.style.setProperty("--home-image-base-layer-opacity", Math.max(0, baseFade).toFixed(4));
14131435
root.style.setProperty("--home-image-base-brightness", baseBrightness.toFixed(4));
1414-
root.style.setProperty("--home-image-base-contrast", baseContrast.toFixed(4));
14151436
root.style.setProperty("--home-image-silhouette-layer-opacity", Math.max(0, silhouetteOpacity).toFixed(4));
14161437
setAtmosphere(atmosphereProgress);
14171438
setLowerLayer(nextLayerOpacityProgress);
@@ -1445,7 +1466,6 @@
14451466
root.style.setProperty("--home-image-scroll-scale", "1");
14461467
root.style.setProperty("--home-image-base-layer-opacity", "1");
14471468
root.style.setProperty("--home-image-base-brightness", "1");
1448-
root.style.setProperty("--home-image-base-contrast", "1");
14491469
root.style.setProperty("--home-image-silhouette-layer-opacity", "0");
14501470
setAtmosphere(1);
14511471
setLowerLayer(1);

0 commit comments

Comments
 (0)