整理静态资源结构

assets/css/base.css

@@ -0,0 +1,74 @@
+:root {
+  color-scheme: light;
+  --bg: #f5f8ff;
+  --panel: #ffffff;
+  --text: #17233d;
+  --muted: #63708a;
+  --line: #e5ebf5;
+  --blue: #246bfe;
+  --blue-dark: #1554d1;
+  --green: #19b982;
+  --shadow: 0 22px 60px rgba(57, 83, 132, 0.13);
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-height: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  min-width: 320px;
+  min-height: 100svh;
+  margin: 0;
+  color: var(--text);
+  background:
+    radial-gradient(circle at 82% 18%, rgba(36, 107, 254, 0.13), transparent 24rem),
+    linear-gradient(180deg, #f7fbff 0%, var(--bg) 52%, #ffffff 100%);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+h1,
+h2,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  max-width: 620px;
+  margin-bottom: 22px;
+  font-size: clamp(2.8rem, 6vw, 5.55rem);
+  line-height: 1.03;
+  letter-spacing: 0;
+}
+
+h2 {
+  margin-bottom: 0;
+  font-size: clamp(1.9rem, 3vw, 3rem);
+  line-height: 1.08;
+  letter-spacing: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

assets/css/components.css

@@ -1,76 +1,7 @@
-:root {
-  color-scheme: light;
-  --bg: #f5f8ff;
-  --panel: #ffffff;
-  --panel-soft: #f7faff;
-  --text: #17233d;
-  --muted: #63708a;
-  --line: #e5ebf5;
-  --blue: #246bfe;
-  --blue-dark: #1554d1;
-  --green: #19b982;
-  --orange: #ff8a3d;
-  --purple: #7864f6;
-  --shadow: 0 22px 60px rgba(57, 83, 132, 0.13);
-  font-family:
-    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    "PingFang SC", "Microsoft YaHei", sans-serif;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html {
-  min-height: 100%;
-  scroll-behavior: smooth;
-}
-
-body {
-  min-width: 320px;
-  min-height: 100svh;
-  margin: 0;
-  color: var(--text);
-  background:
-    radial-gradient(circle at 82% 18%, rgba(36, 107, 254, 0.13), transparent 24rem),
-    linear-gradient(180deg, #f7fbff 0%, var(--bg) 52%, #ffffff 100%);
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.site-header {
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: min(1180px, calc(100% - 40px));
-  min-height: 72px;
-  margin: 0 auto;
-  transition:
-    background 180ms ease,
-    border-color 180ms ease,
-    box-shadow 180ms ease;
-}
-
-.site-header.is-scrolled {
-  width: 100%;
-  padding: 0 max(20px, calc((100% - 1180px) / 2));
-  background: rgba(255, 255, 255, 0.88);
-  border-bottom: 1px solid rgba(229, 235, 245, 0.9);
-  box-shadow: 0 10px 36px rgba(42, 67, 112, 0.08);
-  backdrop-filter: blur(18px);
-}
-
 .brand,
 .nav-links,
 .hero-actions,
-.status-row,
+.status-row {
-.record {
   display: flex;
   align-items: center;
 }
@@ -100,31 +31,18 @@ a {
   font-weight: 650;
 }
 
-.nav-links a {
+.nav-links a,
+.record a {
   transition: color 160ms ease;
 }
 
 .nav-links a:hover,
-.nav-links a:focus-visible {
+.nav-links a:focus-visible,
+.record a:hover,
+.record a:focus-visible {
   color: var(--blue);
 }
 
-.hero,
-.services-section,
-.record {
-  width: min(1180px, calc(100% - 40px));
-  margin-inline: auto;
-}
-
-.hero {
-  display: grid;
-  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
-  gap: clamp(34px, 6vw, 84px);
-  align-items: center;
-  min-height: calc(100svh - 72px);
-  padding: 54px 0 74px;
-}
-
 .eyebrow {
   margin: 0 0 12px;
   color: var(--blue);
@@ -134,20 +52,6 @@ a {
   text-transform: uppercase;
 }
 
-h1,
-h2,
-p {
-  margin-top: 0;
-}
-
-h1 {
-  max-width: 620px;
-  margin-bottom: 22px;
-  font-size: clamp(2.8rem, 6vw, 5.55rem);
-  line-height: 1.03;
-  letter-spacing: 0;
-}
-
 .subtitle {
   max-width: 580px;
   margin-bottom: 30px;
@@ -227,9 +131,7 @@ h1 {
   position: relative;
   min-height: 460px;
   overflow: hidden;
-  background:
+  background: var(--panel);
-    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 245, 255, 0.72)),
-    #fff;
   border: 1px solid rgba(222, 232, 248, 0.9);
   border-radius: 28px;
   box-shadow: var(--shadow);
@@ -245,7 +147,6 @@ h1 {
 }
 
 .hero-visual img {
-  display: block;
   width: 100%;
   height: 100%;
   min-height: 460px;
@@ -301,18 +202,6 @@ h1 {
   font-weight: 800;
 }
 
-.services-section {
-  padding: 10px 0 86px;
-}
-
-.section-heading {
-  display: flex;
-  align-items: end;
-  justify-content: space-between;
-  gap: 24px;
-  margin-bottom: 22px;
-}
-
 .section-note {
   max-width: 420px;
   margin-bottom: 0;
@@ -321,19 +210,6 @@ h1 {
   text-align: right;
 }
 
-h2 {
-  margin-bottom: 0;
-  font-size: clamp(1.9rem, 3vw, 3rem);
-  line-height: 1.08;
-  letter-spacing: 0;
-}
-
-.services {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 20px;
-}
-
 .service-card {
   position: relative;
   display: block;
@@ -357,7 +233,6 @@ h2 {
     linear-gradient(180deg, rgba(8, 21, 44, 0.02) 12%, rgba(8, 21, 44, 0.42) 54%, rgba(8, 21, 44, 0.9) 100%),
     linear-gradient(135deg, rgba(36, 107, 254, 0.24), transparent 54%);
   content: "";
-  transition: opacity 180ms ease;
 }
 
 .service-card:hover,
@@ -374,7 +249,6 @@ h2 {
 }
 
 .service-card img {
-  display: block;
   width: 100%;
   height: 100%;
   min-height: 280px;
@@ -426,72 +300,18 @@ h2 {
   line-height: 1.55;
 }
 
-.record {
-  justify-content: center;
-  gap: 16px;
-  padding: 24px 0 34px;
-  color: #7a8598;
-  font-size: 0.88rem;
-  border-top: 1px solid var(--line);
-}
-
-.record a {
-  transition: color 160ms ease;
-}
-
-.record a:hover,
-.record a:focus-visible {
-  color: var(--blue);
-}
-
 @media (max-width: 960px) {
-  .nav-links {
+  .hero-visual,
-    display: none;
-  }
-
-  .hero {
-    grid-template-columns: 1fr;
-    min-height: auto;
-  }
-
-  .hero-visual {
-    min-height: 390px;
-  }
-
   .hero-visual img {
     min-height: 390px;
   }
 
-  .services {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .section-heading {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
   .section-note {
     text-align: left;
   }
 }
 
 @media (max-width: 560px) {
-  .site-header,
-  .hero,
-  .services-section,
-  .record {
-    width: min(100% - 28px, 1180px);
-  }
-
-  .site-header {
-    min-height: 64px;
-  }
-
-  h1 {
-    font-size: clamp(2.55rem, 13vw, 4rem);
-  }
-
   .button {
     width: 100%;
   }
@@ -526,28 +346,8 @@ h2 {
     min-height: 34px;
   }
 
-  .services {
-    grid-template-columns: 1fr;
-  }
-
   .service-card,
   .service-card img {
     min-height: 230px;
   }
-
-  .record {
-    align-items: center;
-    flex-direction: column;
-    gap: 6px;
-    text-align: center;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    scroll-behavior: auto !important;
-    transition-duration: 0.01ms !important;
-  }
 }

assets/css/layout.css

@@ -0,0 +1,116 @@
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: min(1180px, calc(100% - 40px));
+  min-height: 72px;
+  margin: 0 auto;
+  transition:
+    background 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.site-header.is-scrolled {
+  width: 100%;
+  padding: 0 max(20px, calc((100% - 1180px) / 2));
+  background: rgba(255, 255, 255, 0.88);
+  border-bottom: 1px solid rgba(229, 235, 245, 0.9);
+  box-shadow: 0 10px 36px rgba(42, 67, 112, 0.08);
+  backdrop-filter: blur(18px);
+}
+
+.hero,
+.services-section,
+.record {
+  width: min(1180px, calc(100% - 40px));
+  margin-inline: auto;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
+  gap: clamp(34px, 6vw, 84px);
+  align-items: center;
+  min-height: calc(100svh - 72px);
+  padding: 54px 0 74px;
+}
+
+.services-section {
+  padding: 10px 0 86px;
+}
+
+.section-heading {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 22px;
+}
+
+.services {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 20px;
+}
+
+.record {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px 0 34px;
+  color: #7a8598;
+  font-size: 0.88rem;
+  border-top: 1px solid var(--line);
+}
+
+@media (max-width: 960px) {
+  .nav-links {
+    display: none;
+  }
+
+  .hero {
+    grid-template-columns: 1fr;
+    min-height: auto;
+  }
+
+  .services {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .section-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 560px) {
+  .site-header,
+  .hero,
+  .services-section,
+  .record {
+    width: min(100% - 28px, 1180px);
+  }
+
+  .site-header {
+    min-height: 64px;
+  }
+
+  h1 {
+    font-size: clamp(2.55rem, 13vw, 4rem);
+  }
+
+  .services {
+    grid-template-columns: 1fr;
+  }
+
+  .record {
+    flex-direction: column;
+    gap: 6px;
+    text-align: center;
+  }
+}

index.html

@@ -6,7 +6,9 @@
     <meta name="description" content="sumi.work 服务入口，提供 FRP、Git、Syncthing 与 Gemini 等常用服务导航。" />
     <meta name="theme-color" content="#f5f8ff" />
     <title>sumi.work - 服务入口</title>
-    <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="assets/css/base.css" />
+    <link rel="stylesheet" href="assets/css/layout.css" />
+    <link rel="stylesheet" href="assets/css/components.css" />
   </head>
   <body>
     <header class="site-header" data-header>
@@ -44,7 +46,7 @@
         </div>
 
         <aside class="hero-visual" aria-label="服务概览">
-          <img src="assets/workspace-hero.jpg" alt="整洁的现代桌面工作区，包含笔记本电脑和办公设备" />
+          <img src="assets/images/workspace-hero.jpg" alt="整洁的现代桌面工作区，包含笔记本电脑和办公设备" />
           <div class="visual-overlay">
             <div class="overlay-heading">
               <span>Service Gateway</span>
@@ -71,7 +73,7 @@
 
         <div class="services">
           <a class="service-card accent-blue" href="/frp/" aria-label="进入 FRP 面板">
-            <img src="assets/service-frp.jpg" alt="" loading="lazy" />
+            <img src="assets/images/service-frp.jpg" alt="" loading="lazy" />
             <span class="service-content">
               <span class="service-icon">FRP</span>
               <span class="service-title">FRP 面板</span>
@@ -80,7 +82,7 @@
           </a>
 
           <a class="service-card accent-green" href="/git/" aria-label="进入 Git 服务">
-            <img src="assets/service-git.jpg" alt="" loading="lazy" />
+            <img src="assets/images/service-git.jpg" alt="" loading="lazy" />
             <span class="service-content">
               <span class="service-icon">Git</span>
               <span class="service-title">Git 服务</span>
@@ -89,7 +91,7 @@
           </a>
 
           <a class="service-card accent-orange" href="/sync/" aria-label="进入 Syncthing">
-            <img src="assets/workspace-hero.jpg" alt="" loading="lazy" />
+            <img src="assets/images/workspace-hero.jpg" alt="" loading="lazy" />
             <span class="service-content">
               <span class="service-icon">Sync</span>
               <span class="service-title">Syncthing</span>
@@ -104,7 +106,7 @@
             rel="noreferrer"
             aria-label="打开 Gemini"
           >
-            <img src="assets/service-gemini.jpg" alt="" loading="lazy" />
+            <img src="assets/images/service-gemini.jpg" alt="" loading="lazy" />
             <span class="service-content">
               <span class="service-icon">AI</span>
               <span class="service-title">Gemini</span>
@@ -120,6 +122,6 @@
       <a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer">粤ICP备2026053646号</a>
     </footer>
 
-    <script src="script.js"></script>
+    <script src="assets/js/main.js"></script>
   </body>
 </html>