feat: 网页样式修改

Author: OpportunityLiu

packages/website/src/pages/index.module.css

@@ -12,6 +12,17 @@
   background: var(--ifm-background-color);
 }
 
+.scroll-progress,
+.hero-grid,
+.syntax-stage,
+.scroll-cue,
+.window-dots,
+.closing-signal,
+.btn-primary,
+.btn-secondary {
+  user-select: none;
+}
+
 .scroll-progress {
   position: fixed;
   z-index: calc(var(--ifm-z-index-fixed) + 1);
@@ -27,14 +38,31 @@
 }
 
 .hero {
+  --ifm-color-primary: #8b8df7;
+  --ifm-color-primary-dark: #7274f4;
+  --ifm-color-primary-light: #a5a7fa;
+  --ifm-color-primary-lightest: #dfe0ff;
+  --ifm-heading-color: #f5f3ff;
+  --ifm-font-color-base: #e6e4ef;
+  --ifm-background-color: #0f0f15;
+  --ifm-background-surface-color: #191920;
+  --ifm-color-emphasis-500: #858392;
+  --ifm-color-emphasis-600: #aaa8b6;
+  --home-panel: #191920;
+  --home-muted: #aaa8b6;
+  --home-line: rgba(255 255 255 / 12%);
+  --home-soft: #161620;
+  --home-glow: rgba(134 136 243 / 28%);
   position: relative;
   min-height: calc(100vh - var(--ifm-navbar-height));
   min-height: calc(100svh - var(--ifm-navbar-height));
   display: grid;
   isolation: isolate;
   overflow: hidden;
+  color: var(--ifm-font-color-base);
   background:
     radial-gradient(circle at 73% 46%, var(--home-glow), transparent 31rem),
+    radial-gradient(circle at 14% 7%, rgba(109 46 255 / 16%), transparent 22rem),
     linear-gradient(145deg, var(--home-soft), var(--ifm-background-color) 58%);
 }
 
@@ -391,14 +419,12 @@
   display: block;
   min-height: 5.3rem;
   color: #d4d4d4;
-  background: transparent;
+  color-scheme: dark;
+  background: linear-gradient(145deg, #252526, #1e1e1e 72%);
+  box-shadow: inset 0 1px rgba(255 255 255 / 5%);
   font-size: 0.67rem;
   line-height: 1.7;
   white-space: pre;
-
-  :root[data-theme='light'] & {
-    filter: hue-rotate(0.5turn) invert(0.8) brightness(1.5);
-  }
 }
 
 .scroll-cue {
@@ -759,6 +785,17 @@
 }
 
 .closing-card {
+  --ifm-color-primary: #8b8df7;
+  --ifm-color-primary-dark: #7274f4;
+  --ifm-color-primary-light: #a5a7fa;
+  --ifm-color-primary-lightest: #dfe0ff;
+  --ifm-heading-color: #f5f3ff;
+  --ifm-font-color-base: #e6e4ef;
+  --home-panel: #191920;
+  --home-muted: #aaa8b6;
+  --home-line: rgba(255 255 255 / 12%);
+  --home-soft: #161620;
+  --home-glow: rgba(134 136 243 / 28%);
   position: relative;
   width: min(1180px, 100%);
   min-height: 31rem;
@@ -769,11 +806,13 @@
   align-items: flex-start;
   justify-content: center;
   overflow: hidden;
+  color: var(--ifm-font-color-base);
   border: 1px solid color-mix(in srgb, var(--ifm-color-primary) 40%, var(--home-line));
   border-radius: 1rem;
   background:
     radial-gradient(circle at 86% 32%, var(--home-glow), transparent 18rem),
-    linear-gradient(135deg, var(--home-soft), var(--home-panel));
+    radial-gradient(circle at 14% 92%, rgba(109 46 255 / 12%), transparent 20rem),
+    linear-gradient(135deg, var(--home-soft), #0f0f15);
 }
 
 .closing-card::before,

packages/website/src/pages/index.tsx

@@ -365,7 +365,11 @@ export default function Home(): JSX.Element {
                                 READY
                             </span>
                             <p className={styles['section-kicker']}>YOUR TURN</p>
-                            <h2>把下一段想法，写成可运行的表达式。</h2>
+                            <h2>
+                                把下一段想法，
+                                <br />
+                                写成可运行的表达式。
+                            </h2>
                             <p>从交互式教程开始，几分钟内掌握 MiraScript 的核心语法。</p>
                             <CtaButtons />
                         </div>