Website Update

Modelized · web-flow · commit bdb077e4897f · 2026-03-20T20:10:21.000+09:00
diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
@@ -582,9 +582,12 @@ a {
 
   .nav-menu-blur {
     display: block;
-    position: fixed;
-    inset: 0;
-    z-index: 1;
+    position: absolute;
+    top: var(--menu-blur-top, 0px);
+    left: 0;
+    right: 0;
+    height: var(--menu-blur-height, 0px);
+    z-index: 2;
     pointer-events: none;
     opacity: 0;
     visibility: hidden;
@@ -604,17 +607,14 @@ a {
   .page-wrap,
   .site-footer {
     transition:
-      filter .28s cubic-bezier(.22,1,.36,1),
-      -webkit-filter .28s cubic-bezier(.22,1,.36,1),
-      opacity .28s ease;
-    will-change: filter;
+      opacity .28s ease,
+      filter .28s cubic-bezier(.22,1,.36,1);
   }
 
   body.nav-menu-open .page-wrap,
   body.nav-menu-open .site-footer {
-    filter: blur(16px) saturate(138%);
-    -webkit-filter: blur(16px) saturate(138%);
     opacity: 1;
+    filter: blur(16px) saturate(138%);
   }
 
   .desktop {
diff --git a/docs/assets/js/shell.js b/docs/assets/js/shell.js
@@ -3,7 +3,7 @@
 
   const body = document.body;
   const base = (body?.getAttribute('data-base') || '.').trim();
-  const assetVersion = '20260320e';
+  const assetVersion = '20260320h';
   const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
   const projects = [
@@ -118,6 +118,8 @@
 
   function clearPortraitMenuLayoutVars(){
     const root = document.documentElement;
+    root.style.removeProperty('--menu-blur-top');
+    root.style.removeProperty('--menu-blur-height');
     root.style.removeProperty('--mobile-row-inline');
     root.style.removeProperty('--mobile-menu-inline');
     root.style.removeProperty('--mobile-menu-top');
@@ -136,11 +138,15 @@
     }
 
     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 viewportBottom = viewportTop + viewportHeight;
 
+    root.style.setProperty('--menu-blur-top', `${scrollTop + viewportTop}px`);
+    root.style.setProperty('--menu-blur-height', `${Math.max(0, viewportHeight)}px`);
+
     const rowInline = Math.round(Math.min(Math.max(viewportWidth * 0.118, 50), 60));
     const menuInline = Math.round(Math.min(Math.max(viewportWidth * 0.084, 36), 46));
     root.style.setProperty('--mobile-row-inline', `${rowInline}px`);
diff --git a/docs/index.html b/docs/index.html
@@ -8,7 +8,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@500;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="assets/css/style.css?v=20260320f">
+  <link rel="stylesheet" href="assets/css/style.css?v=20260320j">
 
   <link rel="icon" type="image/svg+xml" href="favicon.svg">
   <link rel="icon" sizes="192x192" href="android-chrome-192x192.png">
@@ -29,9 +29,9 @@
   <script>document.documentElement.classList.add('js');</script>
 </head>
 <body class="page-home" data-base=".">
+  <div class="nav-menu-blur" aria-hidden="true"></div>
   <header class="site-nav" aria-label="Primary">
     <div class="nav-backdrop" aria-hidden="true"></div>
-    <div class="nav-menu-blur" aria-hidden="true"></div>
     <div class="nav-shell">
       <div id="nav-slot"></div>
     </div>
@@ -133,6 +133,6 @@ <h2>Live Modules</h2>
 
   <div id="footer-slot"></div>
 
-  <script src="assets/js/shell.js?v=20260320e" defer></script>
+  <script src="assets/js/shell.js?v=20260320h" defer></script>
 </body>
 </html>
