gch3n/spectra-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: refine spectra lab visual restraint
All checks were successful
Deploy / deploy (push) Successful in 0s
Details

Browse Source
This commit is contained in:
Chen Gu
2026-04-25 12:08:31 +08:00
parent 04d6aebe59
commit 385994ca46
3 changed files with 51 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
index.html
View File

@@ -23,33 +23,32 @@
</head>
<body>
<div class="shell">
<div class="grid-overlay" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<header class="sticky top-0 z-20 mb-2 grid grid-cols-1 items-center gap-4 border-b border-[color:var(--line)] bg-[color:var(--bg)]/90 py-4 backdrop-blur md:grid-cols-[1fr_auto_auto]">
<a class="inline-flex items-center gap-3 text-[0.95rem] font-bold uppercase tracking-[0.15em]" href="#top" aria-label="Spectra Lab 首页">
<span class="h-[10px] w-[10px] rounded-full bg-[color:var(--accent)] shadow-[0_0_0_6px_var(--accent-soft)]"></span>
<span>Spectra Lab</span>
</a>
<nav class="hidden items-center gap-5 text-sm md:flex">
<a class="muted hover:text-[color:var(--text)]" href="#statement">Statement</a>
<a class="muted hover:text-[color:var(--text)]" href="#works">Works</a>
<a class="muted hover:text-[color:var(--text)]" href="#system">System</a>
<a class="muted hover:text-[color:var(--text)]" href="#components">Components</a>
<a class="muted hover:text-[color:var(--text)]" href="#closing">Closing</a>
</nav>
<button
id="modeToggle"
class="mode-toggle w-fit border border-[color:var(--line)] px-3 py-2 text-sm text-[color:var(--muted)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)] hover:text-[color:var(--text)]"
type="button"
aria-label="切换页面模式"
>
Light Mode
</button>
<header class="site-header">
<div class="site-header__inner">
<a class="inline-flex items-center gap-3 text-[0.95rem] font-bold uppercase tracking-[0.15em]" href="#top" aria-label="Spectra Lab 首页">
<span class="h-[10px] w-[10px] rounded-full bg-[color:var(--accent)] shadow-[0_0_0_6px_var(--accent-soft)]"></span>
<span>Spectra Lab</span>
</a>
<nav class="hidden items-center gap-5 text-sm md:flex">
<a class="muted hover:text-[color:var(--text)]" href="#statement">Statement</a>
<a class="muted hover:text-[color:var(--text)]" href="#works">Works</a>
<a class="muted hover:text-[color:var(--text)]" href="#system">System</a>
<a class="muted hover:text-[color:var(--text)]" href="#components">Components</a>
<a class="muted hover:text-[color:var(--text)]" href="#closing">Closing</a>
</nav>
<button
id="modeToggle"
class="mode-toggle w-fit border border-[color:var(--line)] px-3 py-2 text-sm text-[color:var(--muted)] transition hover:border-[color:var(--line-strong)] hover:bg-[color:var(--accent-soft)] hover:text-[color:var(--text)]"
type="button"
aria-label="切换页面模式"
>
Light Mode
</button>
</div>
</header>
<div class="grid-overlay" aria-hidden="true"></div>
<main id="top" class="relative z-10 space-y-9 pb-6 md:space-y-12">
<section class="hero reveal space-y-6 pt-2 md:space-y-8">
<div class="flex flex-col gap-2 border-t border-[color:var(--line)] pt-3 md:flex-row md:items-baseline md:justify-between">
@@ -236,7 +235,7 @@
</section>
<section id="closing" class="section reveal">
<div class="rounded-none border border-[rgba(0,0,0,0.08)] bg-[linear-gradient(0deg,color-mix(in_srgb,var(--accent)_12%,transparent_88%),color-mix(in_srgb,var(--accent)_12%,transparent_88%)),linear-gradient(180deg,var(--paper-soft),var(--paper))] p-6 text-[color:var(--ink)] shadow-soft md:p-9">
<div class="rounded-none border border-[rgba(0,0,0,0.08)] bg-[color:var(--paper)] p-6 text-[color:var(--ink)] shadow-soft md:p-9">
<p class="smallcaps text-[rgba(20,20,20,0.72)]">Closing</p>
<h2 class="mt-3 max-w-4xl font-serif text-[1.9rem] leading-[1.18] tracking-[-0.02em] md:text-[3rem]">引入 Tailwind 之后，页面在不同端的表现更可控、更一致。</h2>
<p class="mt-4 max-w-4xl leading-[1.82] text-[rgba(20,20,20,0.72)]">这一版核心不是换皮，而是让响应式策略和组件状态都进入标准化轨道。你再看线上效果时，看到的会更接近我本地验收看到的实际结果。</p>