Website Update

Author: Modelized

docs/assets/css/style.css

@@ -53,9 +53,21 @@
   --home-next-layer-shift: 18px;
   --home-next-layer-overlap: clamp(34rem, 68vh, 46rem);
   --site-atmosphere-opacity: 1;
+
+  --site-atmosphere-viewport-height: 100svh;
+  --site-atmosphere-viewport-width: 100vw;
+  --site-atmosphere-render-height: 100svh;
+  --site-atmosphere-render-width: 100vw;
+  --site-atmosphere-safe-top: 0px;
+  --site-atmosphere-safe-bottom: 0px;
+
   --site-atmosphere-width: 148vw;
-  --site-atmosphere-height: clamp(calc(100svh + 8rem), 132dvh, calc(100svh + 16rem));
-  --site-atmosphere-offset-y: clamp(0.75rem, 2.2dvh, 2.25rem);
+  --site-atmosphere-height: clamp(
+    calc(var(--site-atmosphere-render-height) * 1.04),
+    calc(var(--site-atmosphere-render-height) * 1.12),
+    calc(var(--site-atmosphere-render-height) * 1.18)
+  );
+  --site-atmosphere-offset-y: clamp(0.2rem, 1.2dvh, 1.2rem);
 }
 
 * {
@@ -100,9 +112,9 @@ body.page-home {
   top: 0;
   left: 50%;
   width: 100%;
-  height: 100vh;
-  height: 100svh;
-  height: 100dvh;
+  height: var(--site-atmosphere-render-height);
+  min-height: var(--site-atmosphere-render-height);
+  max-height: var(--site-atmosphere-render-height);
   opacity: var(--site-atmosphere-opacity);
   will-change: opacity;
   isolation: isolate;
@@ -994,8 +1006,12 @@ a {
 
   .site-atmosphere__layer {
     --site-atmosphere-width: 170vw;
-    --site-atmosphere-height: clamp(calc(100svh + 10rem), 138dvh, calc(100svh + 20rem));
-    --site-atmosphere-offset-y: clamp(1.25rem, 3dvh, 3.25rem);
+    --site-atmosphere-height: clamp(
+      calc(var(--site-atmosphere-render-height) * 1.05),
+      calc(var(--site-atmosphere-render-height) * 1.13),
+      calc(var(--site-atmosphere-render-height) * 1.2)
+    );
+    --site-atmosphere-offset-y: clamp(0.35rem, 1.6dvh, 1.4rem);
     background:
       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%),
       radial-gradient(72% 58% at 61% 34%, 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%);
@@ -2484,8 +2500,12 @@ body.page-home #about {
 
   .site-atmosphere__layer {
     --site-atmosphere-width: 156vw;
-    --site-atmosphere-height: clamp(calc(100svh + 9rem), 134dvh, calc(100svh + 18rem));
-    --site-atmosphere-offset-y: clamp(1rem, 2.6dvh, 2.75rem);
+    --site-atmosphere-height: clamp(
+      calc(var(--site-atmosphere-render-height) * 1.03),
+      calc(var(--site-atmosphere-render-height) * 1.1),
+      calc(var(--site-atmosphere-render-height) * 1.16)
+    );
+    --site-atmosphere-offset-y: clamp(0.25rem, 1.4dvh, 1.4rem);
   }
 }
 
@@ -2666,8 +2686,12 @@ body.page-home #about {
 
   .site-atmosphere__layer {
     --site-atmosphere-width: 178vw;
-    --site-atmosphere-height: clamp(calc(100svh + 10rem), 140dvh, calc(100svh + 22rem));
-    --site-atmosphere-offset-y: clamp(1.5rem, 3.2dvh, 3.75rem);
+    --site-atmosphere-height: clamp(
+      calc(var(--site-atmosphere-render-height) * 1.04),
+      calc(var(--site-atmosphere-render-height) * 1.1),
+      calc(var(--site-atmosphere-render-height) * 1.16)
+    );
+    --site-atmosphere-offset-y: clamp(0.3rem, 1.5dvh, 1.2rem);
     background:
       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%),
       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%);
@@ -2724,8 +2748,12 @@ body.page-home #about {
 
   .site-atmosphere__layer {
     --site-atmosphere-width: 154vw;
-    --site-atmosphere-height: clamp(calc(100svh + 7rem), 126dvh, calc(100svh + 13rem));
-    --site-atmosphere-offset-y: clamp(0.75rem, 2dvh, 2rem);
+    --site-atmosphere-height: clamp(
+      calc(var(--site-atmosphere-render-height) * 1.02),
+      calc(var(--site-atmosphere-render-height) * 1.08),
+      calc(var(--site-atmosphere-render-height) * 1.14)
+    );
+    --site-atmosphere-offset-y: clamp(0.1rem, 1dvh, 0.9rem);
   }
 }
 

docs/assets/js/shell.js

@@ -1271,6 +1271,8 @@
        atmosphere.style.removeProperty('bottom');
        atmosphere.style.removeProperty('margin-top');
        atmosphere.style.removeProperty('margin-bottom');
+       atmosphere.style.removeProperty('height');
+       atmosphere.style.removeProperty('min-height');
 
        layer.style.removeProperty('transform');
        layer.style.removeProperty('translate');
@@ -1282,10 +1284,38 @@
        layer.style.removeProperty('margin-bottom');
        layer.style.removeProperty('transition');
        layer.style.removeProperty('animation');
+       layer.style.removeProperty('height');
+       layer.style.removeProperty('min-height');
+       layer.style.removeProperty('max-height');
+     };
+
+     const syncViewportVars = () => {
+       const vv = window.visualViewport;
+       const viewportHeight = Math.max(
+         1,
+         Math.round(vv?.height || window.innerHeight || document.documentElement.clientHeight || 0)
+       );
+       const viewportWidth = Math.max(
+         1,
+         Math.round(vv?.width || window.innerWidth || document.documentElement.clientWidth || 0)
+       );
+       const viewportTop = Math.max(0, Math.round(vv?.offsetTop || 0));
+       const viewportBottomInset = Math.max(
+         0,
+         Math.round((window.innerHeight || viewportHeight) - (viewportTop + viewportHeight))
+       );
+
+       root.style.setProperty('--site-atmosphere-viewport-height', `${viewportHeight}px`);
+       root.style.setProperty('--site-atmosphere-viewport-width', `${viewportWidth}px`);
+       root.style.setProperty('--site-atmosphere-safe-top', `${viewportTop}px`);
+       root.style.setProperty('--site-atmosphere-safe-bottom', `${viewportBottomInset}px`);
+       root.style.setProperty('--site-atmosphere-render-height', `${viewportHeight}px`);
+       root.style.setProperty('--site-atmosphere-render-width', `${viewportWidth}px`);
      };
 
      const sync = () => {
        clearInlineMotion();
+       syncViewportVars();
        root.style.removeProperty('--site-atmosphere-shift-y');
        body.dataset.siteAtmosphereLocked = '1';
      };
@@ -2388,6 +2418,7 @@
 
    async function boot() {
      initHeroViewportLock();
+     initSiteAtmosphereLock();
 
      await Promise.all([
        injectPartial('#nav-slot', 'nav.html'),
@@ -2403,7 +2434,6 @@
      initSectionSpy();
      initReveal();
      initHeroIntro();
-     initSiteAtmosphereLock();
      initHomeScrollTransition();
      initRockSaltSafeAreas();
      initAboutCreator();