Website Update

Author: Modelized

docs/assets/css/style.css

@@ -55,9 +55,9 @@
   --site-atmosphere-opacity: 1;
 
   /* simplified static atmosphere box */
-  --site-atmosphere-top: clamp(4.5rem, 10svh, 8rem);
-  --site-atmosphere-box-height: clamp(14rem, 34svh, 24rem);
-  --site-atmosphere-width: 148vw;
+  --site-atmosphere-top: clamp(4.75rem, 10.5svh, 8.25rem);
+  --site-atmosphere-box-height: clamp(15rem, 35svh, 25rem);
+  --site-atmosphere-width: 152vw;
 }
 
 * {
@@ -106,14 +106,13 @@ body.page-home {
   left: 50%;
   width: 100vw;
   height: var(--site-atmosphere-box-height);
-  margin-left: -50vw;
+  transform: translateX(-50%) translateZ(0);
+  -webkit-transform: translateX(-50%) translateZ(0);
   opacity: var(--site-atmosphere-opacity);
   will-change: opacity;
   isolation: isolate;
   pointer-events: none;
   overflow: clip;
-  transform: translateZ(0);
-  -webkit-transform: translateZ(0);
   backface-visibility: hidden;
   background:
     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%),
@@ -997,7 +996,7 @@ a {
   }
 
   .site-atmosphere__layer {
-    --site-atmosphere-width: 170vw;
+    --site-atmosphere-width: 174vw;
     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%);
@@ -2435,9 +2434,9 @@ body.page-home #about {
 @media (max-width: 980px) {
   :root {
     --page-top-offset: calc(env(safe-area-inset-top, 0px) + 5.35rem);
-    --site-atmosphere-top: clamp(4rem, 9.5svh, 6.8rem);
-    --site-atmosphere-box-height: clamp(12.5rem, 32svh, 20rem);
-    --site-atmosphere-width: 156vw;
+    --site-atmosphere-top: clamp(4.2rem, 9.5svh, 7rem);
+    --site-atmosphere-box-height: clamp(13rem, 32svh, 21rem);
+    --site-atmosphere-width: 160vw;
   }
 
   .page-wrap {
@@ -2492,9 +2491,9 @@ body.page-home #about {
 @media (max-width: 980px) and (orientation: portrait) {
   :root {
     --page-top-offset: calc(env(safe-area-inset-top, 0px) + 8px + var(--nav-pill-height-mobile) + 14px);
-    --site-atmosphere-top: clamp(4.6rem, 10.5svh, 7.2rem);
-    --site-atmosphere-box-height: clamp(12rem, 31svh, 18rem);
-    --site-atmosphere-width: 178vw;
+    --site-atmosphere-top: clamp(4.9rem, 11svh, 7.6rem);
+    --site-atmosphere-box-height: clamp(12.75rem, 30svh, 18.5rem);
+    --site-atmosphere-width: 182vw;
   }
 
   .nav {
@@ -2682,9 +2681,9 @@ body.page-home #about {
 
 @media (max-width: 980px) and (orientation: landscape) {
   :root {
-    --site-atmosphere-top: clamp(3.8rem, 8.5svh, 5.8rem);
-    --site-atmosphere-box-height: clamp(11rem, 29svh, 16rem);
-    --site-atmosphere-width: 154vw;
+    --site-atmosphere-top: clamp(3.95rem, 8.6svh, 6rem);
+    --site-atmosphere-box-height: clamp(11.5rem, 28svh, 16.5rem);
+    --site-atmosphere-width: 156vw;
   }
 
   .nav-toggle {
@@ -2831,7 +2830,8 @@ body.page-home #about {
   .site-atmosphere__layer {
     animation: none !important;
     transition: none !important;
-    transform: none !important;
+    transform: translateX(-50%) !important;
+    -webkit-transform: translateX(-50%) !important;
   }
 
   .stack-loading-overlay {

docs/assets/js/shell.js

@@ -415,11 +415,10 @@
      const root = document.documentElement;
      if (!isPortraitMobile()) return null;
 
-     const vv = window.visualViewport;
      const scrollTop = Math.round(window.scrollY || window.pageYOffset || 0);
-     const viewportTop = Math.round(vv?.offsetTop ?? 0);
-     const viewportHeight = Math.round(vv?.height ?? window.innerHeight);
-     const viewportWidth = Math.round(vv?.width ?? window.innerWidth);
+     const viewportTop = 0;
+     const viewportHeight = Math.round(window.innerHeight || document.documentElement.clientHeight || 0);
+     const viewportWidth = Math.round(window.innerWidth || document.documentElement.clientWidth || 0);
      const viewportBottom = viewportTop + viewportHeight;
 
      root.style.setProperty('--menu-blur-top', `${scrollTop + viewportTop}px`);
@@ -914,20 +913,6 @@
        window.addEventListener('resize', syncMobileNavState);
        window.addEventListener('orientationchange', syncMobileNavState);
        window.addEventListener('pageshow', syncMobileNavState);
-
-       if (window.visualViewport){
-         let viewportSyncRaf = 0;
-         const syncViewportLayout = () => {
-           if (!isPortraitMenuActive(nav) || !nav.classList.contains('nav--opening')) return;
-           if (viewportSyncRaf) return;
-           viewportSyncRaf = requestAnimationFrame(() => {
-             viewportSyncRaf = 0;
-             syncPortraitMenuBlurViewport();
-           });
-         };
-         window.visualViewport.addEventListener('resize', syncViewportLayout);
-         window.visualViewport.addEventListener('scroll', syncViewportLayout);
-       }
      }
 
      const brand = document.querySelector('.brand');
@@ -1299,13 +1284,6 @@
      layer.style.removeProperty('transition');
      layer.style.removeProperty('animation');
 
-     const viewportWidth = Math.max(
-       1,
-       Math.round(window.innerWidth || document.documentElement.clientWidth || 0)
-     );
-
-     root.style.setProperty('--site-atmosphere-viewport-width', `${viewportWidth}px`);
-     root.style.setProperty('--site-atmosphere-render-width', `${viewportWidth}px`);
      body.dataset.siteAtmosphereLocked = '1';
    }