fix: reduce GPU-heavy visual effects

ryosukeeeeee · ryosukeeeeee · commit 7281d56e7bb4 · 2026-07-16T17:35:54.000+08:00
diff --git a/docs/index.html b/docs/index.html
@@ -70,7 +70,7 @@
       })();
     </script>
     <link rel="stylesheet" href="./vendor/gitalk.css" />
-    <link rel="stylesheet" href="./styles/theme.css?v=20260716-9" />
+    <link rel="stylesheet" href="./styles/theme.css?v=20260716-10" />
   </head>
   <body>
     <a class="skip-link" href="#main">跳到正文</a>
@@ -119,7 +119,7 @@
     </noscript>
 
     <script src="./vendor/gitalk.min.js"></script>
-    <script src="./scripts/site.js?v=20260716-12"></script>
+    <script src="./scripts/site.js?v=20260716-13"></script>
     <script src="./vendor/docsify.min.js"></script>
     <script src="./vendor/prism-bash.min.js"></script>
     <script src="./vendor/search.min.js"></script>
diff --git a/docs/scripts/site.js b/docs/scripts/site.js
@@ -4,6 +4,7 @@
   const REPOSITORY = "https://github.com/ArchLinuxStudio/ArchLinuxTutorial";
   const THEME_STORAGE_KEY = "archtutorial-theme";
   let lastUpdatedManifestPromise;
+  let scrollUiFrame = 0;
   let activeMarkdown = "";
   let activeFile = "README.md";
 
@@ -236,15 +237,23 @@
     if (backToTop) backToTop.classList.toggle("is-visible", window.scrollY > 560);
   }
 
+  function scheduleScrollUiUpdate() {
+    if (scrollUiFrame) return;
+    scrollUiFrame = window.requestAnimationFrame(() => {
+      scrollUiFrame = 0;
+      updateScrollUi();
+    });
+  }
+
   function bindGlobalInteractions() {
     const mobileSidebarQuery = window.matchMedia("(max-width: 900px)");
 
     document.querySelector(".theme-toggle")?.addEventListener("click", toggleTheme);
     document.querySelector(".back-to-top")?.addEventListener("click", () => {
       window.scrollTo({ top: 0, behavior: "smooth" });
     });
-    window.addEventListener("scroll", updateScrollUi, { passive: true });
-    window.addEventListener("resize", updateScrollUi, { passive: true });
+    window.addEventListener("scroll", scheduleScrollUiUpdate, { passive: true });
+    window.addEventListener("resize", scheduleScrollUiUpdate, { passive: true });
     document.addEventListener("keydown", (event) => {
       const tag = event.target?.tagName;
       const isTyping = tag === "INPUT" || tag === "TEXTAREA" || event.target?.isContentEditable;
diff --git a/docs/styles/theme.css b/docs/styles/theme.css
@@ -8,14 +8,14 @@
   --ink-tertiary: #7b8996;
   --surface: #ffffff;
   --surface-soft: #f5f8fb;
-  --surface-raised: rgba(255, 255, 255, 0.86);
+  --surface-raised: #ffffff;
   --line: #dce5ec;
   --line-strong: #c9d7e1;
   --code-surface: #111b25;
   --code-ink: #e8f0f6;
   --selection: rgba(23, 147, 209, 0.2);
   --shadow-sm: 0 1px 2px rgba(17, 33, 45, 0.05);
-  --shadow-md: 0 12px 32px rgba(27, 48, 63, 0.09);
+  --shadow-md: 0 8px 24px rgba(27, 48, 63, 0.08);
   --header-height: 66px;
   --sidebar-width: 304px;
   --content-width: 880px;
@@ -37,14 +37,14 @@
   --ink-tertiary: #7f909e;
   --surface: #0f171f;
   --surface-soft: #0b1118;
-  --surface-raised: rgba(15, 23, 31, 0.88);
+  --surface-raised: #0f171f;
   --line: #26343f;
   --line-strong: #344550;
   --code-surface: #070c11;
   --code-ink: #e6edf3;
   --selection: rgba(72, 183, 237, 0.25);
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
-  --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.28);
+  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.24);
 }
 
 *,
@@ -63,9 +63,7 @@ body {
   min-width: 320px;
   margin: 0;
   color: var(--ink);
-  background:
-    radial-gradient(circle at 82% 0, rgba(23, 147, 209, 0.075), transparent 29rem),
-    var(--surface-soft);
+  background: var(--surface-soft);
   font-family: var(--font-sans);
   font-size: 16px;
   line-height: 1.72;
@@ -143,7 +141,6 @@ input:focus-visible,
   border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
   background: var(--surface-raised);
   box-shadow: var(--shadow-sm);
-  backdrop-filter: blur(18px) saturate(150%);
 }
 
 .site-brand {
@@ -253,7 +250,6 @@ input:focus-visible,
   background: linear-gradient(90deg, var(--arch-blue-strong), #60c7f5);
   transform: scaleX(0);
   transform-origin: left;
-  will-change: transform;
 }
 
 .app-nav {
@@ -1389,7 +1385,6 @@ main:has(> .sidebar.show) > .content {
   color: var(--ink-secondary);
   background: var(--surface-raised);
   box-shadow: var(--shadow-md);
-  backdrop-filter: blur(14px);
   cursor: pointer;
   visibility: hidden;
   opacity: 0;
@@ -1508,7 +1503,6 @@ main:has(> .sidebar.show) > .content {
     z-index: 40;
     inset: var(--header-height) 0 0 var(--sidebar-width);
     background: rgba(6, 13, 18, 0.35);
-    backdrop-filter: blur(2px);
     cursor: pointer;
     pointer-events: auto;
   }
diff --git a/scripts/validate-site.mjs b/scripts/validate-site.mjs
@@ -21,6 +21,7 @@ const files = walk(docsDirectory);
 const markdownFiles = files.filter((file) => extname(file).toLowerCase() === ".md");
 const index = readFileSync(resolve(docsDirectory, "index.html"), "utf8");
 const siteScript = readFileSync(resolve(docsDirectory, "scripts/site.js"), "utf8");
+const theme = readFileSync(resolve(docsDirectory, "styles/theme.css"), "utf8");
 const workflow = readFileSync(resolve(root, ".github/workflows/pages.yml"), "utf8");
 const packageSource = readFileSync(resolve(root, "package.json"), "utf8");
 const lastUpdated = JSON.parse(readFileSync(resolve(docsDirectory, "last-updated.json"), "utf8"));
@@ -35,6 +36,9 @@ assert(!siteScript.includes("api.github.com/repos/"), "Last-updated dates must n
 assert(siteScript.includes('"/.*/_sidebar.md": "/_sidebar.md"'), "Nested routes must reuse the root sidebar.");
 assert(!siteScript.includes("formatUpdated:"), "Unused Docsify update formatting must stay removed.");
 assert(!siteScript.includes("topMargin:"), "Deprecated topMargin must not offset chapter navigation.");
+assert(!theme.includes("backdrop-filter:"), "Backdrop filters must stay disabled for low-end GPU compatibility.");
+assert(!theme.includes("will-change:"), "Persistent compositor hints must stay disabled.");
+assert(siteScript.includes("scheduleScrollUiUpdate"), "Scroll UI updates must be frame-throttled.");
 assert(workflow.includes("fetch-depth: 0"), "The deployment checkout must include full Git history.");
 assert(packageSource.includes("scripts/generate-last-updated.mjs"), "The local preview does not generate last-updated metadata.");
 
