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

13
index.html
View File

@@ -23,12 +23,8 @@
</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]">
<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>
@@ -48,8 +44,11 @@
>
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>

39
src/tailwind.css
View File

@@ -42,9 +42,7 @@ body.light-mode {
body {
@apply m-0 min-h-screen font-sans antialiased;
color: var(--text);
background:
radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 30%),
linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
background: var(--bg);
}
}
@@ -53,23 +51,36 @@ body.light-mode {
@apply relative mx-auto w-[min(1320px,calc(100%-24px))] md:w-[min(1320px,calc(100%-48px))] pb-10;
}
.site-header {
@apply sticky top-0 z-30 mb-2 border-b py-4 backdrop-blur-xl;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border-color: var(--line);
background: rgba(18, 18, 18, 0.78);
}
body.light-mode .site-header {
background: rgba(242, 236, 228, 0.82);
}
.site-header__inner {
@apply mx-auto grid w-[min(1320px,calc(100%-24px))] grid-cols-1 items-center gap-4 md:w-[min(1320px,calc(100%-48px))] md:grid-cols-[1fr_auto_auto];
}
.grid-overlay {
@apply pointer-events-none absolute inset-0 z-0 hidden md:grid md:grid-cols-12 md:gap-6;
}
.grid-overlay span {
border-left: 1px solid var(--line);
opacity: 0.65;
}
.grid-overlay span:last-child {
border-right: 1px solid var(--line);
@apply pointer-events-none absolute inset-0 z-0 hidden md:block;
background-image:
linear-gradient(to right, transparent calc(25% - 0.5px), color-mix(in srgb, var(--line) 75%, transparent) calc(25% - 0.5px), color-mix(in srgb, var(--line) 75%, transparent) calc(25% + 0.5px), transparent calc(25% + 0.5px)),
linear-gradient(to right, transparent calc(50% - 0.5px), color-mix(in srgb, var(--line) 90%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--line) 90%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
linear-gradient(to right, transparent calc(75% - 0.5px), color-mix(in srgb, var(--line) 75%, transparent) calc(75% - 0.5px), color-mix(in srgb, var(--line) 75%, transparent) calc(75% + 0.5px), transparent calc(75% + 0.5px));
opacity: 0.38;
}
.ui-card {
@apply border shadow-soft;
border-color: var(--line);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
background: color-mix(in srgb, var(--panel) 92%, transparent);
}
.muted {

2
styles.css
View File

File diff suppressed because one or more lines are too long