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> </head>
<body> <body>
<div class="shell"> <div class="shell">
<div class="grid-overlay" aria-hidden="true"> <header class="site-header">
<span></span><span></span><span></span><span></span><span></span><span></span> <div class="site-header__inner">
<span></span><span></span><span></span><span></span><span></span><span></span> <a class="inline-flex items-center gap-3 text-[0.95rem] font-bold uppercase tracking-[0.15em]" href="#top" aria-label="Spectra Lab 首页">
</div> <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>
<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>
<a class="inline-flex items-center gap-3 text-[0.95rem] font-bold uppercase tracking-[0.15em]" href="#top" aria-label="Spectra Lab 首页"> <nav class="hidden items-center gap-5 text-sm md:flex">
<span class="h-[10px] w-[10px] rounded-full bg-[color:var(--accent)] shadow-[0_0_0_6px_var(--accent-soft)]"></span> <a class="muted hover:text-[color:var(--text)]" href="#statement">Statement</a>
<span>Spectra Lab</span> <a class="muted hover:text-[color:var(--text)]" href="#works">Works</a>
</a> <a class="muted hover:text-[color:var(--text)]" href="#system">System</a>
<nav class="hidden items-center gap-5 text-sm md:flex"> <a class="muted hover:text-[color:var(--text)]" href="#components">Components</a>
<a class="muted hover:text-[color:var(--text)]" href="#statement">Statement</a> <a class="muted hover:text-[color:var(--text)]" href="#closing">Closing</a>
<a class="muted hover:text-[color:var(--text)]" href="#works">Works</a> </nav>
<a class="muted hover:text-[color:var(--text)]" href="#system">System</a> <button
<a class="muted hover:text-[color:var(--text)]" href="#components">Components</a> id="modeToggle"
<a class="muted hover:text-[color:var(--text)]" href="#closing">Closing</a> 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)]"
</nav> type="button"
<button aria-label="切换页面模式"
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)]" Light Mode
type="button" </button>
aria-label="切换页面模式" </div>
>
Light Mode
</button>
</header> </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"> <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"> <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"> <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>
<section id="closing" class="section reveal"> <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> <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> <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> <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 { body {
@apply m-0 min-h-screen font-sans antialiased; @apply m-0 min-h-screen font-sans antialiased;
color: var(--text); color: var(--text);
background: background: var(--bg);
radial-gradient(circle at top, rgba(255, 255, 255, 0.04), transparent 30%),
linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
} }
} }
@@ -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; @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 { .grid-overlay {
@apply pointer-events-none absolute inset-0 z-0 hidden md:grid md:grid-cols-12 md:gap-6; @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)),
.grid-overlay span { 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)),
border-left: 1px solid var(--line); 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.65; opacity: 0.38;
}
.grid-overlay span:last-child {
border-right: 1px solid var(--line);
} }
.ui-card { .ui-card {
@apply border shadow-soft; @apply border shadow-soft;
border-color: var(--line); 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 { .muted {

2
styles.css
View File

File diff suppressed because one or more lines are too long