Skip to content

Commit d71e19e

Browse files
ModelizedModelized
authored
Website Update
1 parent d661f7e commit d71e19e

2 files changed

Lines changed: 108 additions & 54 deletions

File tree

‎docs/assets/css/style.css‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@
5454
--home-next-layer-overlap: clamp(34rem, 68vh, 46rem);
5555
--site-atmosphere-opacity: 1;
5656

57-
/* simplified static atmosphere box */
5857
--site-atmosphere-top: clamp(4.75rem, 10.5svh, 8.25rem);
5958
--site-atmosphere-box-height: clamp(15rem, 35svh, 25rem);
6059
--site-atmosphere-width: 152vw;
@@ -90,30 +89,43 @@ body.page-home {
9089

9190
.site-atmosphere {
9291
position: absolute;
93-
top: 0;
94-
left: 0;
95-
right: 0;
96-
height: calc(var(--site-atmosphere-top) + var(--site-atmosphere-box-height));
92+
inset: 0 0 auto;
9793
z-index: 0;
9894
pointer-events: none;
9995
isolation: isolate;
10096
overflow: clip;
97+
contain: layout paint;
10198
}
10299

103100
.site-atmosphere__layer {
104-
position: absolute;
105-
top: var(--site-atmosphere-top);
106-
left: 50%;
107-
width: 100vw;
108-
height: var(--site-atmosphere-box-height);
109-
transform: translateX(-50%) translateZ(0);
110-
-webkit-transform: translateX(-50%) translateZ(0);
101+
position: sticky;
102+
top: 0;
103+
left: 0;
104+
width: 100%;
105+
height: 100svh;
106+
min-height: 100svh;
107+
max-height: 100svh;
111108
opacity: var(--site-atmosphere-opacity);
112109
will-change: opacity;
113110
isolation: isolate;
114111
pointer-events: none;
115112
overflow: clip;
113+
transform: translateZ(0);
114+
-webkit-transform: translateZ(0);
116115
backface-visibility: hidden;
116+
contain: paint;
117+
}
118+
119+
.site-atmosphere__layer::before {
120+
content: "";
121+
position: absolute;
122+
top: var(--site-atmosphere-top);
123+
left: 50%;
124+
width: 100vw;
125+
height: var(--site-atmosphere-box-height);
126+
transform: translateX(-50%);
127+
-webkit-transform: translateX(-50%);
128+
pointer-events: none;
117129
background:
118130
radial-gradient(74% 58% at 37% 30%, rgba(255, 157, 77, 0.13) 0%, rgba(255, 157, 77, 0.094) 28%, rgba(255, 157, 77, 0.03) 52%, rgba(255, 157, 77, 0) 72%),
119131
radial-gradient(68% 54% at 63% 33%, rgba(82, 104, 255, 0.12) 0%, rgba(82, 104, 255, 0.086) 28%, rgba(82, 104, 255, 0.026) 52%, rgba(82, 104, 255, 0) 72%);
@@ -995,7 +1007,7 @@ a {
9951007
pointer-events: none;
9961008
}
9971009

998-
.site-atmosphere__layer {
1010+
.site-atmosphere__layer::before {
9991011
--site-atmosphere-width: 174vw;
10001012
background:
10011013
radial-gradient(78% 62% at 39% 31%, rgba(255, 157, 77, 0.13) 0%, rgba(255, 157, 77, 0.094) 28%, rgba(255, 157, 77, 0.03) 52%, rgba(255, 157, 77, 0) 72%),
@@ -2665,7 +2677,7 @@ body.page-home #about {
26652677
margin-bottom: -0.55rem;
26662678
}
26672679

2668-
.site-atmosphere__layer {
2680+
.site-atmosphere__layer::before {
26692681
background:
26702682
radial-gradient(80% 64% at 40% 32%, rgba(255, 157, 77, 0.13) 0%, rgba(255, 157, 77, 0.094) 28%, rgba(255, 157, 77, 0.03) 52%, rgba(255, 157, 77, 0) 72%),
26712683
radial-gradient(74% 60% at 60% 35%, rgba(82, 104, 255, 0.12) 0%, rgba(82, 104, 255, 0.086) 28%, rgba(82, 104, 255, 0.026) 52%, rgba(82, 104, 255, 0) 72%);
@@ -2830,6 +2842,11 @@ body.page-home #about {
28302842
.site-atmosphere__layer {
28312843
animation: none !important;
28322844
transition: none !important;
2845+
transform: none !important;
2846+
-webkit-transform: none !important;
2847+
}
2848+
2849+
.site-atmosphere__layer::before {
28332850
transform: translateX(-50%) !important;
28342851
-webkit-transform: translateX(-50%) !important;
28352852
}

‎docs/assets/js/shell.js‎

Lines changed: 77 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1236,55 +1236,92 @@
12361236
}
12371237

12381238
function initSiteAtmosphereLock() {
1239-
const root = document.documentElement;
12401239
const atmosphere = document.querySelector('.site-atmosphere');
12411240
const layer = document.querySelector('.site-atmosphere__layer');
12421241

12431242
if (!atmosphere || !layer) {
12441243
return;
12451244
}
12461245

1247-
[
1248-
'--site-atmosphere-viewport-height',
1249-
'--site-atmosphere-viewport-width',
1250-
'--site-atmosphere-render-height',
1251-
'--site-atmosphere-render-width',
1252-
'--site-atmosphere-safe-top',
1253-
'--site-atmosphere-safe-bottom',
1254-
'--site-atmosphere-computed-width',
1255-
'--site-atmosphere-computed-height',
1256-
'--site-atmosphere-computed-offset-y',
1257-
'--site-atmosphere-shift-y'
1258-
].forEach((name) => {
1259-
root.style.removeProperty(name);
1246+
let rafId = 0;
1247+
1248+
const clearInlineOverrides = () => {
1249+
atmosphere.style.removeProperty('transform');
1250+
atmosphere.style.removeProperty('translate');
1251+
atmosphere.style.removeProperty('left');
1252+
atmosphere.style.removeProperty('right');
1253+
atmosphere.style.removeProperty('bottom');
1254+
atmosphere.style.removeProperty('margin-top');
1255+
atmosphere.style.removeProperty('margin-bottom');
1256+
atmosphere.style.removeProperty('min-height');
1257+
1258+
layer.style.removeProperty('transform');
1259+
layer.style.removeProperty('translate');
1260+
layer.style.removeProperty('left');
1261+
layer.style.removeProperty('right');
1262+
layer.style.removeProperty('bottom');
1263+
layer.style.removeProperty('margin-top');
1264+
layer.style.removeProperty('margin-bottom');
1265+
layer.style.removeProperty('min-height');
1266+
layer.style.removeProperty('max-height');
1267+
layer.style.removeProperty('transition');
1268+
layer.style.removeProperty('animation');
1269+
};
1270+
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+
1286+
const sync = () => {
1287+
rafId = 0;
1288+
clearInlineOverrides();
1289+
1290+
const fullHeight = Math.ceil(getDocumentHeight());
1291+
atmosphere.style.height = `${fullHeight}px`;
1292+
atmosphere.style.top = '0px';
1293+
1294+
body.dataset.siteAtmosphereLocked = '1';
1295+
};
1296+
1297+
const requestSync = () => {
1298+
if (rafId) return;
1299+
rafId = requestAnimationFrame(sync);
1300+
};
1301+
1302+
const settledSync = createSettledScheduler(sync);
1303+
1304+
sync();
1305+
1306+
window.addEventListener('resize', () => {
1307+
requestSync();
1308+
settledSync.schedule(80);
12601309
});
12611310

1262-
atmosphere.style.removeProperty('transform');
1263-
atmosphere.style.removeProperty('translate');
1264-
atmosphere.style.removeProperty('top');
1265-
atmosphere.style.removeProperty('left');
1266-
atmosphere.style.removeProperty('right');
1267-
atmosphere.style.removeProperty('bottom');
1268-
atmosphere.style.removeProperty('margin-top');
1269-
atmosphere.style.removeProperty('margin-bottom');
1270-
atmosphere.style.removeProperty('height');
1271-
atmosphere.style.removeProperty('min-height');
1272-
1273-
layer.style.removeProperty('transform');
1274-
layer.style.removeProperty('translate');
1275-
layer.style.removeProperty('top');
1276-
layer.style.removeProperty('left');
1277-
layer.style.removeProperty('right');
1278-
layer.style.removeProperty('bottom');
1279-
layer.style.removeProperty('margin-top');
1280-
layer.style.removeProperty('margin-bottom');
1281-
layer.style.removeProperty('height');
1282-
layer.style.removeProperty('min-height');
1283-
layer.style.removeProperty('max-height');
1284-
layer.style.removeProperty('transition');
1285-
layer.style.removeProperty('animation');
1286-
1287-
body.dataset.siteAtmosphereLocked = '1';
1311+
window.addEventListener('orientationchange', () => {
1312+
requestSync();
1313+
settledSync.schedule(140);
1314+
});
1315+
1316+
window.addEventListener('pageshow', () => {
1317+
requestSync();
1318+
settledSync.schedule(80);
1319+
});
1320+
1321+
window.addEventListener('load', () => {
1322+
requestSync();
1323+
settledSync.schedule(120);
1324+
});
12881325
}
12891326

12901327
function initHomeScrollTransition() {

0 commit comments

Comments
 (0)