更改了页面设计风格

Redapple-one · Jan 11, 2025 · 399f3f2 · 399f3f2
1 parent a286806
commit 399f3f2
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 105 deletions.
diff --git a/src/icons/arrow.svg b/src/icons/arrow.svg
diff --git a/src/icons/tacs.svg b/src/icons/tacs.svg
diff --git a/src/images/bg-compressed.webp b/src/images/bg-compressed.webp
diff --git a/src/images/bg.svg b/src/images/bg.svg
diff --git a/src/images/cover3.webp b/src/images/cover3.webp
diff --git a/src/index.html b/src/index.html
diff --git a/src/input.css b/src/input.css
@@ -1,6 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+/* font */
+html{
+  font-family: "MiSans VF", "MiSans", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: #0E0E0E;
+}
 
 .navbar-menu:checked ~ label .navbar-menu-arrow {
   --tw-rotate: 180deg;
@@ -17,13 +22,23 @@
 }
 
 .navbar-menu\:block {
-  will-change: max-height, opacity; /* 提升这两个属性的性能 */
   height: 0; /* 初始高度为 0 */
   overflow: hidden; /* 防止内容溢出 */
   opacity: 0; /* 初始透明度为 0 */
 }
 
 .navbar-menu\:block.visible {
-  height: calc(100vh - 64px); /* 目标高度 */
+  height: calc(100vh - 4rem); /* 目标高度 */
   opacity: 1; /* 完全不透明 */
+  background-color: #1e2939;
+}
+
+.navbar-menu\:nav.visible {
+  background-color: #1e2939;
+}
+
+.grid-images{
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
 }
diff --git a/src/main.js b/src/main.js
@@ -10,6 +10,7 @@ document.addEventListener('DOMContentLoaded', () => {
     `)
     const menuToggle = document.querySelector('input.navbar-menu');
     const navbarMenuBlock = document.querySelector('.navbar-menu\\:block');
+    const navbarNavbar = document.querySelector('.navbar-menu\\:nav');
     const mobileNavbar = document.querySelector('.mobile-navbar');
     let isMobileNavbarVisible = false;
     let isMenuVisible = false;
@@ -31,6 +32,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const shouldShow = menuToggle.checked;
             if (shouldShow !== isMenuVisible) {
                 navbarMenuBlock.classList.toggle('visible', shouldShow);
+                navbarNavbar.classList.toggle('visible', shouldShow);
                 isMenuVisible = shouldShow;
             }
         }

diff --git a/src/output.css b/src/output.css