余白 UI：手机端适配（☰ 全屏菜单 + 筛选条收口）+ 若干层叠与卡片修正
手机端（≤720 / ≤640） - 窄屏导航不再平铺：设计稿在窄屏把导航整个 display:none，手机上会没有任何 入口，之前的做法是在品牌行下再摊一条横向滚动行，5 个中文项挤成一条读起来 很碎。改为顶栏只留「头像 + ☰」，点 ☰ 开全屏菜单：竖排大字 + 英文小标、 当前项高亮、底部放主题切换；顶行复用同款标头（关掉时视觉不跳）， Esc / 点击空白 / 路由变化 / 窗口拉宽回桌面 都会关闭， 打开时锁背景滚动并把焦点交给对话框（preventScroll） - 顶栏主题切换 ◐ 在窄屏收进 ☰：两边各一个就是重复。桌面没有 ☰， 且那枚 ◐ 是设计稿顶栏自带的（index.html:782），所以只在窄屏藏 - 筛选条：≤640 收起标签 chips（会折三四行）与搜索框，只留类型分段； 标签仍有 /tags 整页入口 - viewport 补 viewport-fit=cover / interactive-widget；触屏补 -webkit-tap-highlight-color、touch-action:manipulation、44px 可点目标、 16px 输入框（防 iOS 聚焦缩放） 层叠（这次量出来的真问题） - 新增 mobile.css 并在 main.ts 里最后 import：.hero/.wrap/.paper/.about-card/ .toolbar 的窄屏覆盖原本写在 chrome.css（第 2 个 import），同特指度被 home/article/pages.css 全程压掉 —— 媒体查询不加特指度，「后导入者赢」， 所以手机上左右留白一直是 28px 而不是设计意图的 18px，圆角/内边距也没换过。 现统一到 20px，实测 hero / wrap / showcase 左边缘对齐； 同时删掉 home.css 里那条 ≤860 的 showcase 18px（与同宽度下 hero 的 28px 错开） - .icon-btn 的 44px 触屏尺寸从 tokens.css 挪回 chrome.css 自己那边： 原位置被后导入的同特指度 36px 反压，触屏上实际是 36×44 的椭圆 - .toolbar 防线补 border:0：只中和 top 会漏出左右两道边框 - 后台 3 处 100vh 补 100dvh 兜底；9 处 transition:all 展开为显式属性列表； 19 处 :hover 收进 @media (hover:hover) and (pointer:fine)（触屏不再粘住 hover） 组件修正 - 首页作品卡片改用与 /projects 同一套结构：文字包进 .body（.proj 自身 padding:0，原来 h3/p 直接贴左边框）、有封面才渲染 .cov（原来无封面时留 150px 空色块）、无封面时用 .st-plain 显示状态 - .proj-grid 轨道下限改 min(300px,100%)：320px 视口下裸 300px 会顶破容器， 被 body 的 overflow-x:hidden 裁掉右边 - 「全部作品 / 查看所有作品」改 RouterLink（原为 <a href>，会整页重载） 清理 - 删除 panels.css：.panels/.panel/.cloud/.plist/.about-box 在 vivid 里已无任何 使用者（后台走 data-ui=classic，命中不到），连带 tokens.css 里的死规则与 main.ts 的 import - 修正注释里残留的 panels 描述 验证：headless Chromium 同源 iframe 探针 + 截图，390 / 320 / 1200 三档； /admin 确认 classic 未被带坏；npm run build 无警告。
This commit is contained in:
Sakurasan
+1
-1
@@ -2,7 +2,7 @@
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
|
||||
<meta name="theme-color" content="#faf7f1" media="(prefers-color-scheme: light)" />
|
||||
<meta name="theme-color" content="#1f1d1a" media="(prefers-color-scheme: dark)" />
|
||||
<title>ONE · 一个博客</title>
|
||||
|
||||
@@ -6,13 +6,15 @@ import { installCustomCss } from './customCss'
|
||||
import './styles.css'
|
||||
// vivid（余白）是第二套 UI，全部规则都以 html[data-ui="vivid"] 前缀收敛；
|
||||
// 必须排在 styles.css 之后，才能在同特指度时按源码顺序取胜。
|
||||
// 顺序即层叠顺序：令牌 → 骨架 → 各视图。不要把 tokens 挪到后面。
|
||||
// 顺序即层叠顺序：令牌 → 骨架 → 各视图 → 手机收口。不要把 tokens/mobile 挪位置。
|
||||
import './ui/yohaku/tokens.css'
|
||||
import './ui/yohaku/chrome.css'
|
||||
import './ui/yohaku/home.css'
|
||||
import './ui/yohaku/panels.css'
|
||||
import './ui/yohaku/article.css'
|
||||
import './ui/yohaku/pages.css'
|
||||
// mobile.css 必须排最后：它修正的是上面几个文件里同特指度的基准尺寸，
|
||||
// 媒体查询不加特指度，「后导入者赢」是它唯一的凭仗。
|
||||
import './ui/yohaku/mobile.css'
|
||||
|
||||
loadSite().then(() => {
|
||||
installCustomCss(router)
|
||||
|
||||
+492
-1300
File diff suppressed because it is too large
Load Diff
@@ -6,7 +6,7 @@ import YohakuFeed from './YohakuFeed.vue'
|
||||
import YohakuPager from './YohakuPager.vue'
|
||||
|
||||
// 首页装配。对应设计稿 viewHome() 的 DOM 顺序：
|
||||
// hero → wrap(toolbar + feed + empty + pager) → panels。
|
||||
// hero → wrap(toolbar + feed + empty + pager) → showcase（作品前三件 + 查看所有）。
|
||||
// 数据与筛选状态由 HomeView 持有（它读路由 query），这里只做呈现。
|
||||
|
||||
const props = defineProps({
|
||||
@@ -65,25 +65,33 @@ const emit = defineEmits(['update:kind', 'update:tag', 'update:query', 'go'])
|
||||
<div class="show-head">
|
||||
<h2 class="serif">做过的东西</h2>
|
||||
<span class="en mono">Projects</span>
|
||||
<a class="push mono" href="/projects">全部作品 →</a>
|
||||
<!-- 用 RouterLink 而不是裸 <a href>：后者会整页重载，手机上会闪一下白屏 -->
|
||||
<RouterLink class="push mono" to="/projects">全部作品 →</RouterLink>
|
||||
</div>
|
||||
<div class="proj-grid">
|
||||
<!-- 和 /projects 用同一套卡片结构：有封面才渲染 .cov（否则会留一个 150px 空色块），
|
||||
文字统一包在 .body 里（.proj 自己 padding:0，直接放 h3 会贴着左边框）。 -->
|
||||
<RouterLink
|
||||
v-for="p in showcase"
|
||||
:key="p.id || p.slug"
|
||||
class="proj"
|
||||
to="/projects"
|
||||
>
|
||||
<div class="cov">
|
||||
<img v-if="p.cover_url" :src="p.cover_url" alt="" loading="lazy">
|
||||
<div v-if="p.cover_url" class="cov">
|
||||
<img :src="p.cover_url" alt="" loading="lazy">
|
||||
<span v-if="p.status" class="st">{{ p.status }}</span>
|
||||
</div>
|
||||
<h3>{{ p.title }}</h3>
|
||||
<p>{{ p.summary }}</p>
|
||||
<div class="body">
|
||||
<h3>
|
||||
{{ p.title }}
|
||||
<span v-if="!p.cover_url && p.status" class="st st-plain">{{ p.status }}</span>
|
||||
</h3>
|
||||
<p>{{ p.summary }}</p>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="show-more">
|
||||
<a class="chip on" href="/projects">查看所有作品</a>
|
||||
<RouterLink class="chip on" to="/projects">查看所有作品</RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -1,33 +1,78 @@
|
||||
<script setup>
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { RouterLink, useRoute } from 'vue-router'
|
||||
import { site } from '../../site'
|
||||
|
||||
// 余白顶栏。对应设计稿的 <header class="top">：品牌 / 导航 / 操作三块，
|
||||
// 滚动过 8px 加 .scrolled（设计稿的「四态里的第一态」）。
|
||||
// 样式在 ui/yohaku/chrome.css，选择器已收敛到 html[data-ui="vivid"] 下。
|
||||
//
|
||||
// 窄屏例外：设计稿在窄屏把导航整个 display:none 掉了，手机上会没有任何导航入口。
|
||||
// 这里补一个 ☰ + 全屏菜单（chrome.css 的 .menu / .menu-btn）。
|
||||
|
||||
const route = useRoute()
|
||||
const scrolled = ref(false)
|
||||
const menuOpen = ref(false)
|
||||
const burger = ref(null)
|
||||
const menuEl = ref(null)
|
||||
|
||||
const links = [
|
||||
{ to: '/', label: '时间线' },
|
||||
{ to: '/archive', label: '归档' },
|
||||
{ to: '/tags', label: '标签' },
|
||||
{ to: '/projects', label: '作品' },
|
||||
{ to: '/about', label: '关于' }
|
||||
{ to: '/', label: '时间线', en: 'Timeline' },
|
||||
{ to: '/archive', label: '归档', en: 'Archive' },
|
||||
{ to: '/tags', label: '标签', en: 'Tags' },
|
||||
{ to: '/projects', label: '作品', en: 'Projects' },
|
||||
{ to: '/about', label: '关于', en: 'About' }
|
||||
]
|
||||
|
||||
const initial = () => (site.author_name || site.site_title || 'O').trim().slice(0, 1).toUpperCase()
|
||||
const title = () => site.site_title?.split(/[·|]/)[0]?.trim() || 'ONE'
|
||||
|
||||
function isOn(l) {
|
||||
return l.to === '/' ? route.path === '/' : route.path.startsWith(l.to)
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
scrolled.value = (window.scrollY || 0) > 8
|
||||
}
|
||||
|
||||
function openMenu() {
|
||||
menuOpen.value = true
|
||||
// 焦点交给对话框本身（aria-modal 承诺过），Tab 第一下才落到「时间线」。
|
||||
// 不直接 focus 第一个链接：即使 touch 上不长出焦点环，也会让首项看起来「被选中」，
|
||||
// 和 .on 的高亮抢意思。preventScroll 防止 iOS 顺手滚背景。
|
||||
nextTick(() => menuEl.value?.focus({ preventScroll: true }))
|
||||
}
|
||||
function closeMenu() {
|
||||
menuOpen.value = false
|
||||
nextTick(() => burger.value?.focus({ preventScroll: true }))
|
||||
}
|
||||
|
||||
// 菜单铺满全屏时锁住底层滚动（iOS 上不锁背景会跟着手指滑）
|
||||
watch(menuOpen, (v) => { document.body.style.overflow = v ? 'hidden' : '' })
|
||||
// 点了链接 → 路由变了 → 菜单收起
|
||||
watch(() => route.fullPath, () => { menuOpen.value = false })
|
||||
|
||||
function onKey(e) {
|
||||
if (e.key === 'Escape') closeMenu()
|
||||
}
|
||||
|
||||
// 窗口拉宽回桌面必须自己退场：v-if 是 JS 状态，CSS 媒体查询管不着它
|
||||
const wide = window.matchMedia('(min-width: 721px)')
|
||||
function onWide(e) { if (e.matches) menuOpen.value = false }
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', onScroll, { passive: true })
|
||||
window.addEventListener('keydown', onKey)
|
||||
wide.addEventListener('change', onWide)
|
||||
onScroll()
|
||||
})
|
||||
onBeforeUnmount(() => window.removeEventListener('scroll', onScroll))
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('scroll', onScroll)
|
||||
window.removeEventListener('keydown', onKey)
|
||||
wide.removeEventListener('change', onWide)
|
||||
document.body.style.overflow = ''
|
||||
menuOpen.value = false
|
||||
})
|
||||
|
||||
// 设计稿里主题键是 ◐ / ◑：亮色时显示 ◐（点它去暗），暗色时显示 ◑。
|
||||
function toggleTheme() {
|
||||
@@ -43,19 +88,66 @@ function toggleTheme() {
|
||||
<div class="top-in">
|
||||
<RouterLink class="brand" to="/">
|
||||
<span class="av">{{ initial() }}</span>
|
||||
<span>{{ site.site_title?.split(/[·|]/)[0]?.trim() || 'ONE' }}</span>
|
||||
<span>{{ title() }}</span>
|
||||
</RouterLink>
|
||||
<nav class="nav" aria-label="站点导航">
|
||||
<RouterLink
|
||||
v-for="l in links"
|
||||
:key="l.to"
|
||||
:to="l.to"
|
||||
:class="{ on: l.to === '/' ? route.path === '/' : route.path.startsWith(l.to) }"
|
||||
:class="{ on: isOn(l) }"
|
||||
>{{ l.label }}</RouterLink>
|
||||
</nav>
|
||||
<div class="top-acts">
|
||||
<button class="icon-btn" type="button" title="切换明暗" aria-label="切换明暗" @click="toggleTheme">◐</button>
|
||||
<button class="icon-btn theme-btn" type="button" title="切换明暗" aria-label="切换明暗" @click="toggleTheme">◐</button>
|
||||
<button
|
||||
ref="burger"
|
||||
class="icon-btn menu-btn"
|
||||
type="button"
|
||||
aria-label="打开菜单"
|
||||
aria-controls="v-menu"
|
||||
:aria-expanded="menuOpen"
|
||||
@click="openMenu"
|
||||
>☰</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 窄屏全屏菜单。必须待在 .top 外面：.top 有 backdrop-filter，
|
||||
会给 position:fixed 的后代当包含块，铺不满屏。 -->
|
||||
<Transition name="v-menu">
|
||||
<div
|
||||
v-if="menuOpen"
|
||||
id="v-menu"
|
||||
ref="menuEl"
|
||||
class="menu"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="站点导航"
|
||||
tabindex="-1"
|
||||
@click.self="closeMenu"
|
||||
>
|
||||
<div class="menu-head">
|
||||
<span class="m-brand">
|
||||
<span class="av">{{ initial() }}</span>
|
||||
<span>{{ title() }}</span>
|
||||
</span>
|
||||
<button class="icon-btn" type="button" aria-label="关闭菜单" @click="closeMenu">✕</button>
|
||||
</div>
|
||||
<nav class="menu-in">
|
||||
<RouterLink
|
||||
v-for="l in links"
|
||||
:key="l.to"
|
||||
:to="l.to"
|
||||
:class="{ on: isOn(l) }"
|
||||
>
|
||||
<span>{{ l.label }}</span>
|
||||
<em>{{ l.en }}</em>
|
||||
</RouterLink>
|
||||
</nav>
|
||||
<div class="menu-foot">
|
||||
<button class="chip" type="button" @click="toggleTheme">◐ 切换明暗</button>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
@@ -1,176 +1,114 @@
|
||||
/* ONE · 余白（yohaku）· 由设计稿按节拆分 / 窄屏
|
||||
*
|
||||
* 由设计稿（仓库根 index.html 的 <style>）按它自己的分节原样拆分。
|
||||
* 只做了一件事：给每条规则加 html[data-ui='vivid'] 前缀（@media 内部的
|
||||
* 规则也逐条加，at-rule 本身不加），并把 :root[data-theme="dark"] 映射到
|
||||
* 本站的 vivid-dark。数值一律未改，规则也没有被拆开过。
|
||||
*
|
||||
* 前缀是硬要求：组件 scoped 样式编译后是 .foo[data-v-HASH]（0,2,0），
|
||||
* html[data-ui='vivid'] .foo 是（0,2,1）才能稳定取胜；scoped 是懒加载
|
||||
* chunk，入口 CSS 之后才到位，平手时按源码顺序反而会赢。
|
||||
*/
|
||||
|
||||
|
||||
/* ---- 设计稿分节：详情：三栏「纸」 ---- */
|
||||
/* ============================================================
|
||||
详情：三栏「纸」· 左时间线 / 中纸张 / 右目录+进度
|
||||
============================================================ */
|
||||
html[data-ui='vivid'] .article-layout{
|
||||
max-width:1100px;margin:0 auto;padding:36px 28px 60px;
|
||||
html[data-ui='vivid'] .article-layout {max-width:1100px;margin:0 auto;padding:36px 28px 60px;
|
||||
display:grid;
|
||||
grid-template-columns:140px minmax(0,1fr) 180px;
|
||||
gap:32px;align-items:start;
|
||||
}
|
||||
gap:32px;align-items:start;}
|
||||
@media (max-width:960px) {
|
||||
html[data-ui='vivid'] .article-layout{grid-template-columns:1fr;gap:0}
|
||||
html[data-ui='vivid'] .side-l, html[data-ui='vivid'] .side-r{display:none}
|
||||
html[data-ui='vivid'] .progress-pct{display:none}
|
||||
html[data-ui='vivid'] .article-layout {grid-template-columns:1fr;gap:0}
|
||||
html[data-ui='vivid'] .side-l, html[data-ui='vivid'] .side-r {display:none}
|
||||
html[data-ui='vivid'] .progress-pct {display:none}
|
||||
}
|
||||
/* 左：时间线 */
|
||||
html[data-ui='vivid'] .side-l{position:sticky;top:80px;padding-top:8px}
|
||||
html[data-ui='vivid'] .tl{position:relative;padding-left:14px}
|
||||
html[data-ui='vivid'] .tl::before{
|
||||
content:"";position:absolute;left:3px;top:6px;bottom:6px;width:1.5px;
|
||||
html[data-ui='vivid'] .side-l {position:sticky;top:80px;padding-top:8px}
|
||||
html[data-ui='vivid'] .tl {position:relative;padding-left:14px}
|
||||
html[data-ui='vivid'] .tl::before {content:"";position:absolute;left:3px;top:6px;bottom:6px;width:1.5px;
|
||||
background:linear-gradient(180deg,var(--accent),transparent);
|
||||
border-radius:2px;
|
||||
}
|
||||
html[data-ui='vivid'] .tl-item{
|
||||
position:relative;padding:0 0 18px 0;font-size:12px;color:var(--muted);
|
||||
}
|
||||
html[data-ui='vivid'] .tl-item::before{
|
||||
content:"";position:absolute;left:-14px;top:5px;
|
||||
border-radius:2px;}
|
||||
html[data-ui='vivid'] .tl-item {position:relative;padding:0 0 18px 0;font-size:12px;color:var(--muted);}
|
||||
html[data-ui='vivid'] .tl-item::before {content:"";position:absolute;left:-14px;top:5px;
|
||||
width:7px;height:7px;border-radius:50%;
|
||||
background:var(--card);border:2px solid var(--accent);
|
||||
}
|
||||
html[data-ui='vivid'] .tl-item.now::before{
|
||||
background:var(--accent);
|
||||
box-shadow:0 0 0 4px var(--accent-soft);
|
||||
}
|
||||
html[data-ui='vivid'] .tl-item b{display:block;color:var(--soft);font-weight:700;font-size:12px}
|
||||
html[data-ui='vivid'] .tl-item.now b{color:var(--accent)}
|
||||
/* 中：纸张 */
|
||||
html[data-ui='vivid'] .paper{
|
||||
background:var(--card);
|
||||
background:var(--card);border:2px solid var(--accent);}
|
||||
html[data-ui='vivid'] .tl-item.now::before {background:var(--accent);
|
||||
box-shadow:0 0 0 4px var(--accent-soft);}
|
||||
html[data-ui='vivid'] .tl-item b {display:block;color:var(--soft);font-weight:700;font-size:12px}
|
||||
html[data-ui='vivid'] .tl-item.now b {color:var(--accent)}
|
||||
html[data-ui='vivid'] .paper {background:var(--card);
|
||||
border:1px solid var(--line);
|
||||
border-radius:var(--radius-lg);
|
||||
box-shadow:var(--shadow-lg);
|
||||
padding:44px 48px 52px;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
animation:paperIn .7s var(--spring) both;
|
||||
}
|
||||
animation:paperIn .7s var(--spring) both;}
|
||||
@keyframes paperIn {
|
||||
html[data-ui='vivid'] from{opacity:0;transform:translateY(24px) scale(.985)}
|
||||
html[data-ui='vivid'] to{opacity:1;transform:none}
|
||||
from {opacity:0;transform:translateY(24px) scale(.985)}
|
||||
to {opacity:1;transform:none}
|
||||
}
|
||||
/* 纸的纹理感：右上角一抹强调色 */
|
||||
html[data-ui='vivid'] .paper::before{
|
||||
content:"";position:absolute;top:0;right:0;
|
||||
html[data-ui='vivid'] .paper::before {content:"";position:absolute;top:0;right:0;
|
||||
width:120px;height:120px;
|
||||
background:radial-gradient(circle at 100% 0,var(--accent-soft),transparent 70%);
|
||||
pointer-events:none;
|
||||
}
|
||||
html[data-ui='vivid'] .paper .meta{
|
||||
display:flex;gap:12px;align-items:center;flex-wrap:wrap;
|
||||
font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:18px;
|
||||
}
|
||||
html[data-ui='vivid'] .paper h1{
|
||||
margin:0 0 20px;font-size:clamp(28px,4vw,40px);font-weight:800;
|
||||
letter-spacing:-.03em;line-height:1.25;color:var(--ink);
|
||||
}
|
||||
html[data-ui='vivid'] .paper .dek{
|
||||
margin:0 0 32px;font-size:17px;line-height:1.8;color:var(--soft);
|
||||
pointer-events:none;}
|
||||
html[data-ui='vivid'] .paper .meta {display:flex;gap:12px;align-items:center;flex-wrap:wrap;
|
||||
font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:18px;}
|
||||
html[data-ui='vivid'] .paper h1 {margin:0 0 20px;font-size:clamp(28px,4vw,40px);font-weight:800;
|
||||
letter-spacing:-.03em;line-height:1.25;color:var(--ink);}
|
||||
html[data-ui='vivid'] .paper .dek {margin:0 0 32px;font-size:17px;line-height:1.8;color:var(--soft);
|
||||
padding-left:16px;border-left:3px solid var(--accent);
|
||||
font-family:var(--serif);
|
||||
}
|
||||
html[data-ui='vivid'] .prose{font-size:16.5px;line-height:1.95;color:var(--text);max-width:var(--measure)}
|
||||
html[data-ui='vivid'] .prose p{margin:0 0 1.35em}
|
||||
html[data-ui='vivid'] .prose h2{
|
||||
font-size:21px;font-weight:800;margin:2.2em 0 .8em;
|
||||
font-family:var(--serif);}
|
||||
html[data-ui='vivid'] .prose {font-size:16.5px;line-height:1.95;color:var(--text);max-width:var(--measure)}
|
||||
html[data-ui='vivid'] .prose p {margin:0 0 1.35em}
|
||||
html[data-ui='vivid'] .prose h2 {font-size:21px;font-weight:800;margin:2.2em 0 .8em;
|
||||
letter-spacing:-.02em;color:var(--ink);
|
||||
padding-bottom:10px;border-bottom:1px solid var(--line);
|
||||
padding-bottom:10px;border-bottom:1px solid var(--line);}
|
||||
html[data-ui='vivid'] .prose a {color:var(--accent);font-weight:600;border-bottom:1.5px solid var(--accent-soft);transition:border-color .25s}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .prose a:hover {border-bottom-color:var(--accent)}
|
||||
}
|
||||
html[data-ui='vivid'] .prose a{color:var(--accent);font-weight:600;border-bottom:1.5px solid var(--accent-soft);transition:border-color .25s}
|
||||
html[data-ui='vivid'] .prose a:hover{border-bottom-color:var(--accent)}
|
||||
html[data-ui='vivid'] .prose code{
|
||||
font-family:var(--mono);font-size:.88em;
|
||||
html[data-ui='vivid'] .prose code {font-family:var(--mono);font-size:.88em;
|
||||
background:var(--accent-soft);color:var(--accent);
|
||||
padding:2px 7px;border-radius:6px;
|
||||
}
|
||||
html[data-ui='vivid'] .prose pre{
|
||||
background:color-mix(in srgb,var(--ink) 92%,var(--accent));
|
||||
padding:2px 7px;border-radius:6px;}
|
||||
html[data-ui='vivid'] .prose pre {background:color-mix(in srgb,var(--ink) 92%,var(--accent));
|
||||
color:#e8e8f0;padding:18px 20px;border-radius:12px;
|
||||
overflow-x:auto;font-size:13.5px;line-height:1.7;
|
||||
box-shadow:var(--shadow-lg);
|
||||
}
|
||||
html[data-ui='vivid'] .prose pre code{background:none;padding:0;color:inherit;font-size:inherit}
|
||||
html[data-ui='vivid'] .prose blockquote{
|
||||
margin:1.8em 0;padding:16px 20px;
|
||||
box-shadow:var(--shadow-lg);}
|
||||
html[data-ui='vivid'] .prose pre code {background:none;padding:0;color:inherit;font-size:inherit}
|
||||
html[data-ui='vivid'] .prose blockquote {margin:1.8em 0;padding:16px 20px;
|
||||
background:var(--accent-soft);
|
||||
border-left:3px solid var(--accent);
|
||||
border-radius:0 12px 12px 0;
|
||||
font-family:var(--serif);font-size:1.05em;
|
||||
color:var(--soft);font-style:italic;
|
||||
}
|
||||
html[data-ui='vivid'] .prose ul{padding-left:1.3em}
|
||||
html[data-ui='vivid'] .prose li{margin-bottom:.55em}
|
||||
html[data-ui='vivid'] .prose hr{border:0;border-top:1px dashed var(--line-strong);margin:2.5em 0}
|
||||
html[data-ui='vivid'] .paper .end{
|
||||
margin-top:40px;padding-top:24px;border-top:1px dashed var(--line-strong);
|
||||
display:flex;gap:8px;flex-wrap:wrap;align-items:center;
|
||||
}
|
||||
html[data-ui='vivid'] .paper .end .lbl{font-size:12px;color:var(--muted);font-weight:700;margin-right:4px}
|
||||
html[data-ui='vivid'] .back{
|
||||
display:inline-flex;align-items:center;gap:6px;
|
||||
color:var(--soft);font-style:italic;}
|
||||
html[data-ui='vivid'] .prose ul {padding-left:1.3em}
|
||||
html[data-ui='vivid'] .prose li {margin-bottom:.55em}
|
||||
html[data-ui='vivid'] .prose hr {border:0;border-top:1px dashed var(--line-strong);margin:2.5em 0}
|
||||
html[data-ui='vivid'] .paper .end {margin-top:40px;padding-top:24px;border-top:1px dashed var(--line-strong);
|
||||
display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
|
||||
html[data-ui='vivid'] .paper .end .lbl {font-size:12px;color:var(--muted);font-weight:700;margin-right:4px}
|
||||
html[data-ui='vivid'] .back {display:inline-flex;align-items:center;gap:6px;
|
||||
font-size:13px;font-weight:700;color:var(--accent);
|
||||
margin-bottom:20px;padding:6px 0;
|
||||
transition:gap .4s var(--spring);
|
||||
transition:gap .4s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .back:hover {gap:12px}
|
||||
}
|
||||
html[data-ui='vivid'] .back:hover{gap:12px}
|
||||
/* 右：目录 + 进度 */
|
||||
html[data-ui='vivid'] .side-r{position:sticky;top:80px;padding-top:8px}
|
||||
html[data-ui='vivid'] .toc h4{
|
||||
margin:0 0 12px;font-size:11px;font-weight:800;
|
||||
letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
|
||||
}
|
||||
html[data-ui='vivid'] .toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
|
||||
html[data-ui='vivid'] .toc li{counter-increment:toc;margin-bottom:2px}
|
||||
html[data-ui='vivid'] .toc a{
|
||||
display:flex;gap:8px;font-size:12.5px;color:var(--soft);
|
||||
html[data-ui='vivid'] .side-r {position:sticky;top:80px;padding-top:8px}
|
||||
html[data-ui='vivid'] .toc h4 {margin:0 0 12px;font-size:11px;font-weight:800;
|
||||
letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
|
||||
html[data-ui='vivid'] .toc ol {list-style:none;margin:0;padding:0;counter-reset:toc}
|
||||
html[data-ui='vivid'] .toc li {counter-increment:toc;margin-bottom:2px}
|
||||
html[data-ui='vivid'] .toc a {display:flex;gap:8px;font-size:12.5px;color:var(--soft);
|
||||
padding:6px 8px;border-radius:8px;line-height:1.4;
|
||||
transition:all .4s var(--spring);
|
||||
}
|
||||
html[data-ui='vivid'] .toc a::before{
|
||||
content:counter(toc,decimal-leading-zero);
|
||||
transition:background .4s var(--spring),color .4s var(--spring),transform .4s var(--spring);}
|
||||
html[data-ui='vivid'] .toc a::before {content:counter(toc,decimal-leading-zero);
|
||||
font-family:var(--mono);font-size:10px;color:var(--muted);
|
||||
flex:none;padding-top:2px;
|
||||
flex:none;padding-top:2px;}
|
||||
html[data-ui='vivid'] .toc a.on {background:var(--accent-soft);color:var(--accent);transform:translateX(4px);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .toc a:hover {background:var(--accent-soft);color:var(--accent);transform:translateX(4px);}
|
||||
}
|
||||
html[data-ui='vivid'] .toc a:hover, html[data-ui='vivid'] .toc a.on{
|
||||
background:var(--accent-soft);color:var(--accent);transform:translateX(4px);
|
||||
html[data-ui='vivid'] .toc a.on::before {color:var(--accent)}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .toc a:hover::before {color:var(--accent)}
|
||||
}
|
||||
html[data-ui='vivid'] .toc a:hover::before, html[data-ui='vivid'] .toc a.on::before{color:var(--accent)}
|
||||
html[data-ui='vivid'] .read-meter{
|
||||
margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
|
||||
}
|
||||
html[data-ui='vivid'] .read-meter .bar{
|
||||
height:3px;background:color-mix(in srgb,var(--ink) 8%,transparent);
|
||||
border-radius:999px;overflow:hidden;
|
||||
}
|
||||
html[data-ui='vivid'] .read-meter .bar i{
|
||||
display:block;height:100%;width:0%;
|
||||
html[data-ui='vivid'] .read-meter {margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
|
||||
html[data-ui='vivid'] .read-meter .bar {height:3px;background:color-mix(in srgb,var(--ink) 8%,transparent);
|
||||
border-radius:999px;overflow:hidden;}
|
||||
html[data-ui='vivid'] .read-meter .bar i {display:block;height:100%;width:0%;
|
||||
background:linear-gradient(90deg,var(--accent),var(--accent-deep));
|
||||
border-radius:999px;transition:width .15s linear;
|
||||
}
|
||||
html[data-ui='vivid'] .read-meter .num{
|
||||
display:flex;justify-content:space-between;
|
||||
border-radius:999px;transition:width .15s linear;}
|
||||
html[data-ui='vivid'] .read-meter .num {display:flex;justify-content:space-between;
|
||||
font-family:var(--mono);font-size:11px;color:var(--muted);
|
||||
margin-top:8px;font-weight:600;
|
||||
}
|
||||
html[data-ui='vivid'] .read-meter .num b{color:var(--accent)}
|
||||
|
||||
/* 视觉隐藏但保留可访问性：短文详情用它放一个文档级 h1（站主要求短文不显示标题） */
|
||||
html[data-ui='vivid'] .sr-only {
|
||||
position: absolute;
|
||||
margin-top:8px;font-weight:600;}
|
||||
html[data-ui='vivid'] .read-meter .num b {color:var(--accent)}
|
||||
html[data-ui='vivid'] .sr-only {position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
@@ -178,5 +116,5 @@ html[data-ui='vivid'] .sr-only {
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
border: 0;}
|
||||
html[data-ui='vivid'] .toc a:active { color: var(--accent); }
|
||||
|
||||
+109
-107
@@ -1,138 +1,140 @@
|
||||
/* ONE · 余白（yohaku）· 由设计稿按节拆分 / 窄屏
|
||||
*
|
||||
* 由设计稿（仓库根 index.html 的 <style>）按它自己的分节原样拆分。
|
||||
* 只做了一件事：给每条规则加 html[data-ui='vivid'] 前缀（@media 内部的
|
||||
* 规则也逐条加，at-rule 本身不加），并把 :root[data-theme="dark"] 映射到
|
||||
* 本站的 vivid-dark。数值一律未改，规则也没有被拆开过。
|
||||
*
|
||||
* 前缀是硬要求：组件 scoped 样式编译后是 .foo[data-v-HASH]（0,2,0），
|
||||
* html[data-ui='vivid'] .foo 是（0,2,1）才能稳定取胜；scoped 是懒加载
|
||||
* chunk，入口 CSS 之后才到位，平手时按源码顺序反而会赢。
|
||||
*/
|
||||
|
||||
|
||||
/* ---- 设计稿分节：顶部导航 ---- */
|
||||
/* ---- 顶部导航：四态里的第一态（悬浮常规条） ---- */
|
||||
html[data-ui='vivid'] .top{
|
||||
position:sticky;top:0;z-index:100;
|
||||
html[data-ui='vivid'] .top {position:sticky;top:0;z-index:100;
|
||||
backdrop-filter:blur(16px) saturate(1.3);
|
||||
-webkit-backdrop-filter:blur(16px) saturate(1.3);
|
||||
background:color-mix(in srgb,var(--paper) 78%,transparent);
|
||||
border-bottom:1px solid transparent;
|
||||
transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
|
||||
}
|
||||
html[data-ui='vivid'] .top.scrolled{
|
||||
border-bottom-color:var(--line);
|
||||
box-shadow:0 1px 0 var(--line);
|
||||
}
|
||||
html[data-ui='vivid'] .top-in{
|
||||
max-width:1100px;margin:0 auto;
|
||||
transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);}
|
||||
html[data-ui='vivid'] .top.scrolled {border-bottom-color:var(--line);
|
||||
box-shadow:0 1px 0 var(--line);}
|
||||
html[data-ui='vivid'] .top-in {max-width:1100px;margin:0 auto;
|
||||
padding:0 28px;height:60px;
|
||||
display:flex;align-items:center;gap:20px;
|
||||
}
|
||||
html[data-ui='vivid'] .brand{
|
||||
display:flex;align-items:center;gap:10px;
|
||||
display:flex;align-items:center;gap:20px;}
|
||||
html[data-ui='vivid'] .brand {display:flex;align-items:center;gap:10px;
|
||||
font-weight:700;font-size:15px;letter-spacing:.02em;
|
||||
transition:transform .5s var(--spring);
|
||||
transition:transform .5s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .brand:hover {transform:scale(1.04)}
|
||||
}
|
||||
html[data-ui='vivid'] .brand:hover{transform:scale(1.04)}
|
||||
html[data-ui='vivid'] .brand .av{
|
||||
width:30px;height:30px;border-radius:50%;
|
||||
/* .m-brand 是全屏菜单里那个同款标头（菜单铺满屏后顶栏被盖住，得有个续接） */
|
||||
html[data-ui='vivid'] :is(.brand, .m-brand) .av {width:30px;height:30px;border-radius:50%;
|
||||
background:linear-gradient(135deg,var(--accent),var(--accent-deep));
|
||||
display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;
|
||||
box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent-soft);
|
||||
position:relative;
|
||||
}
|
||||
html[data-ui='vivid'] .brand .av::after{
|
||||
content:"";position:absolute;right:-1px;bottom:-1px;
|
||||
position:relative;}
|
||||
html[data-ui='vivid'] :is(.brand, .m-brand) .av::after {content:"";position:absolute;right:-1px;bottom:-1px;
|
||||
width:9px;height:9px;border-radius:50%;
|
||||
background:#34c759;border:2px solid var(--paper);
|
||||
}
|
||||
html[data-ui='vivid'] .nav{display:flex;gap:2px;flex:1;justify-content:center}
|
||||
html[data-ui='vivid'] .nav a{
|
||||
position:relative;font-size:13.5px;font-weight:600;color:var(--soft);
|
||||
background:#34c759;border:2px solid var(--paper);}
|
||||
html[data-ui='vivid'] .nav {display:flex;gap:2px;flex:1;justify-content:center}
|
||||
html[data-ui='vivid'] .nav a {position:relative;font-size:13.5px;font-weight:600;color:var(--soft);
|
||||
padding:8px 14px;border-radius:999px;
|
||||
transition:color .25s var(--ease),background .25s var(--ease),transform .5s var(--spring);
|
||||
transition:color .25s var(--ease),background .25s var(--ease),transform .5s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .nav a:hover {color:var(--ink);background:var(--accent-soft);transform:translateY(-1px)}
|
||||
}
|
||||
html[data-ui='vivid'] .nav a:hover{color:var(--ink);background:var(--accent-soft);transform:translateY(-1px)}
|
||||
html[data-ui='vivid'] .nav a.on{color:var(--accent)}
|
||||
html[data-ui='vivid'] .nav a.on::after{
|
||||
content:"";position:absolute;left:50%;bottom:4px;
|
||||
html[data-ui='vivid'] .nav a.on {color:var(--accent)}
|
||||
html[data-ui='vivid'] .nav a.on::after {content:"";position:absolute;left:50%;bottom:4px;
|
||||
width:4px;height:4px;border-radius:50%;
|
||||
background:var(--accent);transform:translateX(-50%);
|
||||
}
|
||||
html[data-ui='vivid'] .top-acts{display:flex;align-items:center;gap:6px}
|
||||
html[data-ui='vivid'] .icon-btn{
|
||||
width:36px;height:36px;border-radius:50%;
|
||||
background:var(--accent);transform:translateX(-50%);}
|
||||
html[data-ui='vivid'] .top-acts {display:flex;align-items:center;gap:6px}
|
||||
html[data-ui='vivid'] .icon-btn {width:36px;height:36px;border-radius:50%;
|
||||
display:grid;place-items:center;color:var(--soft);font-size:15px;
|
||||
transition:background .25s var(--ease),color .25s var(--ease),transform .5s var(--spring);
|
||||
transition:background .25s var(--ease),color .25s var(--ease),transform .5s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .icon-btn:hover {background:var(--accent-soft);color:var(--accent);transform:scale(1.08)}
|
||||
}
|
||||
html[data-ui='vivid'] .icon-btn:hover{background:var(--accent-soft);color:var(--accent);transform:scale(1.08)}
|
||||
/* 手指标准 44px。放这里而不是 tokens.css：那边先导入，同特指度会被上面的 36px 反压 */
|
||||
@media (pointer: coarse) {
|
||||
html[data-ui='vivid'] .icon-btn {min-height:44px;width:44px}
|
||||
}
|
||||
/* ☰ 只给窄屏。这一条必须在下面的媒体查询之前 —— 媒体查询不加特指度，
|
||||
写在后面会把 .menu-btn {display:grid} 压掉。 */
|
||||
html[data-ui='vivid'] .menu-btn {display:none}
|
||||
@media (max-width:720px) {
|
||||
html[data-ui='vivid'] .nav{display:none}
|
||||
/* 设计稿在窄屏把导航整个藏了 / 早先的做法是品牌行下方再摊一条横向滚动行，
|
||||
5 个中文项挤成一条平铺，读起来很碎。改成收进 ☰ 全屏菜单。 */
|
||||
html[data-ui='vivid'] .nav {display:none}
|
||||
html[data-ui='vivid'] .menu-btn {display:grid}
|
||||
/* 主题切换收进 ☰（菜单底部那枚）—— 顶栏和菜单各一个就是重复。
|
||||
桌面没有 ☰，所以只在窄屏藏：那枚 ◐ 是设计稿顶栏自带的，留着。 */
|
||||
html[data-ui='vivid'] .theme-btn {display:none}
|
||||
/* 浏览器标题栏已经在显示站点名，品牌文字在手机上是重复的 —— 只留头像标记 */
|
||||
html[data-ui='vivid'] .brand > span:last-child {display:none}
|
||||
/* .nav 原来是 flex:1（把品牌顶左、操作顶右），它一藏起来就得自己撑开 */
|
||||
html[data-ui='vivid'] .top-in {justify-content:space-between;gap:12px;padding:0 16px}
|
||||
}
|
||||
|
||||
/* ---- 设计稿分节：阅读进度（详情页） ---- */
|
||||
/* ---- 阅读进度（详情页） ---- */
|
||||
html[data-ui='vivid'] .progress{
|
||||
position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
|
||||
background:transparent;pointer-events:none;
|
||||
/* ---- 窄屏全屏菜单 ---- */
|
||||
html[data-ui='vivid'] .m-brand {display:flex;align-items:center;gap:10px;
|
||||
font-weight:700;font-size:15px;letter-spacing:.02em;}
|
||||
html[data-ui='vivid'] .menu {position:fixed;inset:0;z-index:150;
|
||||
background:var(--paper);
|
||||
display:flex;flex-direction:column;
|
||||
/* 上下留出刘海 / 小横条的安全区 */
|
||||
padding:0 max(18px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-bottom));
|
||||
overscroll-behavior:contain;}
|
||||
html[data-ui='vivid'] .menu:focus {outline:none}
|
||||
html[data-ui='vivid'] .menu-head {height:56px;flex:none; /* 对齐顶栏高度，关掉时视觉不跳 */
|
||||
display:flex;align-items:center;justify-content:space-between;}
|
||||
html[data-ui='vivid'] .menu-in {flex:1;display:flex;flex-direction:column;
|
||||
padding-top:10px;overflow-y:auto;}
|
||||
html[data-ui='vivid'] .menu-in a {display:flex;align-items:baseline;gap:12px;
|
||||
padding:16px 2px;font-size:26px;font-weight:800;letter-spacing:-.02em;
|
||||
line-height:1.25;color:var(--soft);
|
||||
border-bottom:1px solid var(--line);
|
||||
transition:color .3s var(--ease);}
|
||||
html[data-ui='vivid'] .menu-in a em {font-style:normal;font-size:11px;font-weight:700;
|
||||
letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
|
||||
html[data-ui='vivid'] .menu-in a.on,
|
||||
html[data-ui='vivid'] .menu-in a.on em {color:var(--accent)}
|
||||
html[data-ui='vivid'] .menu-in a:active {color:var(--accent)}
|
||||
html[data-ui='vivid'] .menu-foot {flex:none;padding-top:18px}
|
||||
/* 进：整块淡入 + 菜单项轻推上来；出：只淡出（避免收起时还要等位移） */
|
||||
html[data-ui='vivid'] .v-menu-enter-active {transition:opacity .26s var(--ease)}
|
||||
html[data-ui='vivid'] .v-menu-enter-active .menu-in {transition:transform .5s var(--spring),opacity .4s var(--ease)}
|
||||
html[data-ui='vivid'] .v-menu-enter-from {opacity:0}
|
||||
html[data-ui='vivid'] .v-menu-enter-from .menu-in {transform:translateY(12px);opacity:0}
|
||||
html[data-ui='vivid'] .v-menu-leave-active {transition:opacity .18s var(--ease)}
|
||||
html[data-ui='vivid'] .v-menu-leave-to {opacity:0}
|
||||
/* 全局 reduce-motion 只把 duration 压扁，delay 会留下来 → 单独清掉 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html[data-ui='vivid'] .v-menu-enter-active,
|
||||
html[data-ui='vivid'] .v-menu-enter-active .menu-in {transition-delay:0s !important}
|
||||
}
|
||||
html[data-ui='vivid'] .progress i{
|
||||
display:block;height:100%;width:0%;
|
||||
html[data-ui='vivid'] .progress {position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
|
||||
background:transparent;pointer-events:none;}
|
||||
html[data-ui='vivid'] .progress i {display:block;height:100%;width:0%;
|
||||
background:linear-gradient(90deg,var(--accent),var(--accent-deep));
|
||||
transition:width .1s linear;
|
||||
}
|
||||
html[data-ui='vivid'] .progress-pct{
|
||||
position:fixed;right:22px;top:50%;transform:translateY(-50%);
|
||||
transition:width .1s linear;}
|
||||
html[data-ui='vivid'] .progress-pct {position:fixed;right:22px;top:50%;transform:translateY(-50%);
|
||||
z-index:90;font-family:var(--mono);font-size:11px;font-weight:700;
|
||||
color:var(--muted);letter-spacing:.06em;
|
||||
writing-mode:vertical-rl;
|
||||
opacity:0;transition:opacity .4s var(--ease);
|
||||
pointer-events:none;
|
||||
}
|
||||
html[data-ui='vivid'] .progress-pct.show{opacity:1}
|
||||
html[data-ui='vivid'] .progress-pct b{color:var(--accent);font-weight:800}
|
||||
|
||||
/* ---- 设计稿分节：页脚 ---- */
|
||||
/* ---- 页脚 ---- */
|
||||
html[data-ui='vivid'] .foot{
|
||||
max-width:1100px;margin:40px auto 0;padding:28px 28px 120px;
|
||||
pointer-events:none;}
|
||||
html[data-ui='vivid'] .progress-pct.show {opacity:1}
|
||||
html[data-ui='vivid'] .progress-pct b {color:var(--accent);font-weight:800}
|
||||
html[data-ui='vivid'] .foot {max-width:1100px;margin:40px auto 0;padding:28px 28px 120px;
|
||||
border-top:1px solid var(--line);
|
||||
text-align:center;color:var(--muted);font-size:12.5px;line-height:2;
|
||||
text-align:center;color:var(--muted);font-size:12.5px;line-height:2;}
|
||||
html[data-ui='vivid'] .foot a {color:var(--accent);font-weight:600;transition:opacity .25s}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .foot a:hover {opacity:.75}
|
||||
}
|
||||
html[data-ui='vivid'] .foot a{color:var(--accent);font-weight:600;transition:opacity .25s}
|
||||
html[data-ui='vivid'] .foot a:hover{opacity:.75}
|
||||
html[data-ui='vivid'] .foot .sep{margin:0 8px;opacity:.4}
|
||||
html[data-ui='vivid'] .foot .quote{
|
||||
font-family:var(--serif);font-style:italic;
|
||||
color:var(--soft);margin-bottom:8px;font-size:13.5px;
|
||||
}
|
||||
|
||||
/* ---- 设计稿分节：切换器 / 窄屏 ---- */
|
||||
/* ---- 切换器 ---- */
|
||||
html[data-ui='vivid'] .switch{
|
||||
position:fixed;z-index:99;left:50%;bottom:18px;transform:translateX(-50%);
|
||||
html[data-ui='vivid'] .foot .sep {margin:0 8px;opacity:.4}
|
||||
html[data-ui='vivid'] .foot .quote {font-family:var(--serif);font-style:italic;
|
||||
color:var(--soft);margin-bottom:8px;font-size:13.5px;}
|
||||
html[data-ui='vivid'] .switch {position:fixed;z-index:99;left:50%;bottom:18px;transform:translateX(-50%);
|
||||
display:flex;gap:6px;padding:6px;border-radius:999px;
|
||||
background:rgba(28,28,30,.88);backdrop-filter:blur(14px);
|
||||
box-shadow:0 10px 36px rgba(0,0,0,.35);
|
||||
border:1px solid rgba(255,255,255,.08);
|
||||
border:1px solid rgba(255,255,255,.08);}
|
||||
html[data-ui='vivid'] .switch button {padding:9px 15px;border-radius:999px;font-size:12.5px;font-weight:700;
|
||||
color:rgba(255,255,255,.55);transition:.2s;}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .switch button:hover {color:#fff;background:rgba(255,255,255,.1)}
|
||||
}
|
||||
html[data-ui='vivid'] .switch button{
|
||||
padding:9px 15px;border-radius:999px;font-size:12.5px;font-weight:700;
|
||||
color:rgba(255,255,255,.55);transition:.2s;
|
||||
}
|
||||
html[data-ui='vivid'] .switch button:hover{color:#fff;background:rgba(255,255,255,.1)}
|
||||
html[data-ui='vivid'] .switch button.on{background:#fff;color:#111}
|
||||
html[data-ui='vivid'] .switch .lbl{color:rgba(255,255,255,.35);font-size:11px;align-self:center;padding:0 8px;letter-spacing:.08em}
|
||||
@media (max-width:640px) {
|
||||
html[data-ui='vivid'] .hero{padding:48px 20px 32px}
|
||||
html[data-ui='vivid'] .wrap{padding:8px 18px 36px}
|
||||
html[data-ui='vivid'] .paper{padding:28px 22px 36px;border-radius:16px}
|
||||
html[data-ui='vivid'] .about-card{padding:32px 22px}
|
||||
html[data-ui='vivid'] .panels{padding:16px 18px 12px}
|
||||
html[data-ui='vivid'] .toolbar{flex-direction:column;align-items:stretch}
|
||||
html[data-ui='vivid'] .search{width:100%}
|
||||
html[data-ui='vivid'] .search input{flex:1;width:auto}
|
||||
html[data-ui='vivid'] .top-in{padding:0 16px;gap:12px}
|
||||
}
|
||||
html[data-ui='vivid'] .switch button.on {background:#fff;color:#111}
|
||||
html[data-ui='vivid'] .switch .lbl {color:rgba(255,255,255,.35);font-size:11px;align-self:center;padding:0 8px;letter-spacing:.08em}
|
||||
/* 窄屏的跨模块覆盖（hero/wrap/paper/about-card/toolbar）在 mobile.css ——
|
||||
那些选择器的基准尺寸定义在 home/article/pages.css，本文件排在它们前面，
|
||||
同特指度压不住。详见 mobile.css 顶部说明。 */
|
||||
|
||||
+114
-198
@@ -1,243 +1,159 @@
|
||||
/* ONE · 余白（yohaku）· 由设计稿按节拆分 / 窄屏
|
||||
*
|
||||
* 由设计稿（仓库根 index.html 的 <style>）按它自己的分节原样拆分。
|
||||
* 只做了一件事：给每条规则加 html[data-ui='vivid'] 前缀（@media 内部的
|
||||
* 规则也逐条加，at-rule 本身不加），并把 :root[data-theme="dark"] 映射到
|
||||
* 本站的 vivid-dark。数值一律未改，规则也没有被拆开过。
|
||||
*
|
||||
* 前缀是硬要求：组件 scoped 样式编译后是 .foo[data-v-HASH]（0,2,0），
|
||||
* html[data-ui='vivid'] .foo 是（0,2,1）才能稳定取胜；scoped 是懒加载
|
||||
* chunk，入口 CSS 之后才到位，平手时按源码顺序反而会赢。
|
||||
*/
|
||||
|
||||
|
||||
/* ---- 设计稿分节：Hero ---- */
|
||||
/* ---- Hero ---- */
|
||||
html[data-ui='vivid'] .hero{
|
||||
max-width:1100px;margin:0 auto;padding:72px 28px 48px;
|
||||
position:relative;
|
||||
}
|
||||
html[data-ui='vivid'] .hero .kicker{
|
||||
display:inline-flex;align-items:center;gap:8px;
|
||||
html[data-ui='vivid'] .hero {max-width:1100px;margin:0 auto;padding:72px 28px 48px;
|
||||
position:relative;}
|
||||
html[data-ui='vivid'] .hero .kicker {display:inline-flex;align-items:center;gap:8px;
|
||||
font-size:12px;font-weight:700;letter-spacing:.14em;
|
||||
color:var(--accent);text-transform:uppercase;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
html[data-ui='vivid'] .hero .kicker::before{
|
||||
content:"";width:20px;height:1.5px;background:var(--accent);border-radius:2px;
|
||||
}
|
||||
html[data-ui='vivid'] .hero h1{
|
||||
margin:0;font-size:clamp(36px,5.5vw,56px);font-weight:800;
|
||||
margin-bottom:20px;}
|
||||
html[data-ui='vivid'] .hero .kicker::before {content:"";width:20px;height:1.5px;background:var(--accent);border-radius:2px;}
|
||||
html[data-ui='vivid'] .hero h1 {margin:0;font-size:clamp(36px,5.5vw,56px);font-weight:800;
|
||||
letter-spacing:-.03em;line-height:1.15;max-width:16ch;
|
||||
color:var(--ink);
|
||||
}
|
||||
html[data-ui='vivid'] .hero h1 .hl{
|
||||
color:var(--accent);
|
||||
position:relative;
|
||||
}
|
||||
html[data-ui='vivid'] .hero h1 .hl::after{
|
||||
content:"";position:absolute;left:0;right:0;bottom:4px;height:8px;
|
||||
background:var(--accent-soft);z-index:-1;border-radius:2px;
|
||||
}
|
||||
html[data-ui='vivid'] .hero .lead{
|
||||
margin:18px 0 0;max-width:480px;font-size:16px;
|
||||
color:var(--soft);line-height:1.8;
|
||||
}
|
||||
html[data-ui='vivid'] .hero .lead strong{color:var(--text);font-weight:700}
|
||||
html[data-ui='vivid'] .stats{display:flex;gap:28px;margin-top:32px;flex-wrap:wrap}
|
||||
html[data-ui='vivid'] .stat b{
|
||||
display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;
|
||||
color:var(--ink);font-variant-numeric:tabular-nums;
|
||||
}
|
||||
html[data-ui='vivid'] .stat span{font-size:12px;color:var(--muted);font-weight:600}
|
||||
|
||||
/* ---- 设计稿分节：筛选 ---- */
|
||||
/* ---- 筛选 ---- */
|
||||
html[data-ui='vivid'] .wrap{max-width:1100px;margin:0 auto;padding:8px 28px 48px}
|
||||
html[data-ui='vivid'] .toolbar{
|
||||
display:flex;gap:10px;flex-wrap:wrap;align-items:center;
|
||||
color:var(--ink);}
|
||||
html[data-ui='vivid'] .hero h1 .hl {color:var(--accent);
|
||||
position:relative;}
|
||||
html[data-ui='vivid'] .hero h1 .hl::after {content:"";position:absolute;left:0;right:0;bottom:4px;height:8px;
|
||||
background:var(--accent-soft);z-index:-1;border-radius:2px;}
|
||||
html[data-ui='vivid'] .hero .lead {margin:18px 0 0;max-width:480px;font-size:16px;
|
||||
color:var(--soft);line-height:1.8;}
|
||||
html[data-ui='vivid'] .hero .lead strong {color:var(--text);font-weight:700}
|
||||
html[data-ui='vivid'] .stats {display:flex;gap:28px;margin-top:32px;flex-wrap:wrap}
|
||||
html[data-ui='vivid'] .stat b {display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;
|
||||
color:var(--ink);font-variant-numeric:tabular-nums;}
|
||||
html[data-ui='vivid'] .stat span {font-size:12px;color:var(--muted);font-weight:600}
|
||||
html[data-ui='vivid'] .wrap {max-width:1100px;margin:0 auto;padding:8px 28px 48px}
|
||||
html[data-ui='vivid'] .toolbar {display:flex;gap:10px;flex-wrap:wrap;align-items:center;
|
||||
padding-bottom:20px;margin-bottom:8px;
|
||||
border-bottom:1px solid var(--line);
|
||||
}
|
||||
html[data-ui='vivid'] .seg{
|
||||
display:inline-flex;background:color-mix(in srgb,var(--ink) 5%,transparent);
|
||||
border-radius:999px;padding:3px;gap:2px;
|
||||
}
|
||||
html[data-ui='vivid'] .seg button{
|
||||
font-size:13px;font-weight:600;color:var(--soft);
|
||||
border-bottom:1px solid var(--line);}
|
||||
html[data-ui='vivid'] .seg {display:inline-flex;background:color-mix(in srgb,var(--ink) 5%,transparent);
|
||||
border-radius:999px;padding:3px;gap:2px;}
|
||||
html[data-ui='vivid'] .seg button {font-size:13px;font-weight:600;color:var(--soft);
|
||||
padding:7px 16px;border-radius:999px;
|
||||
transition:background .3s var(--ease),color .3s var(--ease),transform .5s var(--spring);
|
||||
transition:background .3s var(--ease),color .3s var(--ease),transform .5s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .seg button:hover {color:var(--ink)}
|
||||
}
|
||||
html[data-ui='vivid'] .seg button:hover{color:var(--ink)}
|
||||
html[data-ui='vivid'] .seg button.on{
|
||||
background:var(--card);color:var(--accent);
|
||||
html[data-ui='vivid'] .seg button.on {background:var(--card);color:var(--accent);
|
||||
box-shadow:var(--shadow);
|
||||
transform:scale(1.02);
|
||||
}
|
||||
html[data-ui='vivid'] .chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
|
||||
html[data-ui='vivid'] .chip{
|
||||
font-size:12.5px;font-weight:600;color:var(--soft);
|
||||
transform:scale(1.02);}
|
||||
html[data-ui='vivid'] .chips {display:flex;gap:6px;flex-wrap:wrap;flex:1}
|
||||
html[data-ui='vivid'] .chip {font-size:12.5px;font-weight:600;color:var(--soft);
|
||||
padding:7px 14px;border-radius:999px;
|
||||
border:1px solid var(--line);
|
||||
transition:all .35s var(--spring);
|
||||
transition:border-color .35s var(--spring),color .35s var(--spring),transform .35s var(--spring),box-shadow .35s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .chip:hover {border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
|
||||
}
|
||||
html[data-ui='vivid'] .chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
|
||||
html[data-ui='vivid'] .chip.on{
|
||||
background:var(--accent);border-color:var(--accent);color:#fff;
|
||||
html[data-ui='vivid'] .chip.on {background:var(--accent);border-color:var(--accent);color:#fff;
|
||||
box-shadow:0 6px 16px var(--accent-glow);
|
||||
transform:translateY(-1px);
|
||||
}
|
||||
html[data-ui='vivid'] .search{
|
||||
display:flex;align-items:center;gap:6px;
|
||||
transform:translateY(-1px);}
|
||||
html[data-ui='vivid'] .search {display:flex;align-items:center;gap:6px;
|
||||
background:color-mix(in srgb,var(--ink) 4%,transparent);
|
||||
border-radius:999px;padding:2px 4px 2px 14px;
|
||||
border:1px solid transparent;
|
||||
transition:border-color .3s,background .3s,box-shadow .3s;
|
||||
}
|
||||
html[data-ui='vivid'] .search:focus-within{
|
||||
border-color:var(--accent);background:var(--card);
|
||||
box-shadow:0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
html[data-ui='vivid'] .search input{
|
||||
border:0;background:transparent;outline:none;font:inherit;font-size:13.5px;
|
||||
width:150px;padding:7px 0;color:var(--ink);
|
||||
}
|
||||
html[data-ui='vivid'] .search input::placeholder{color:var(--muted)}
|
||||
html[data-ui='vivid'] .search button{
|
||||
width:32px;height:32px;border-radius:50%;
|
||||
transition:border-color .3s,background .3s,box-shadow .3s;}
|
||||
html[data-ui='vivid'] .search:focus-within {border-color:var(--accent);background:var(--card);
|
||||
box-shadow:0 0 0 3px var(--accent-soft);}
|
||||
html[data-ui='vivid'] .search input {border:0;background:transparent;outline:none;font:inherit;font-size:13.5px;
|
||||
width:150px;padding:7px 0;color:var(--ink);}
|
||||
html[data-ui='vivid'] .search input::placeholder {color:var(--muted)}
|
||||
html[data-ui='vivid'] .search button {width:32px;height:32px;border-radius:50%;
|
||||
background:var(--accent);color:#fff;font-size:13px;
|
||||
transition:transform .5s var(--spring),box-shadow .3s;
|
||||
transition:transform .5s var(--spring),box-shadow .3s;}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .search button:hover {transform:scale(1.1);box-shadow:0 4px 12px var(--accent-glow)}
|
||||
}
|
||||
html[data-ui='vivid'] .search button:hover{transform:scale(1.1);box-shadow:0 4px 12px var(--accent-glow)}
|
||||
|
||||
/* ---- 设计稿分节：列表：长文卡片 / 短文纸条 ---- */
|
||||
/* ---- 列表：长文卡片 / 短文纸条 ---- */
|
||||
html[data-ui='vivid'] .feed{display:flex;flex-direction:column;gap:18px;padding-top:24px}
|
||||
/* 长文：干净卡片 */
|
||||
html[data-ui='vivid'] .card{
|
||||
display:block;background:var(--card);
|
||||
html[data-ui='vivid'] .feed {display:flex;flex-direction:column;gap:18px;padding-top:24px}
|
||||
html[data-ui='vivid'] .card {display:block;background:var(--card);
|
||||
border:1px solid var(--line);
|
||||
border-radius:var(--radius-lg);
|
||||
overflow:hidden;
|
||||
box-shadow:var(--shadow);
|
||||
transition:transform .55s var(--spring),box-shadow .45s var(--ease),border-color .3s;
|
||||
position:relative;
|
||||
}
|
||||
html[data-ui='vivid'] .card:hover{
|
||||
transform:translateY(-4px) scale(1.005);
|
||||
position:relative;}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .card:hover {transform:translateY(-4px) scale(1.005);
|
||||
box-shadow:var(--shadow-lg);
|
||||
border-color:color-mix(in srgb,var(--accent) 35%,transparent);
|
||||
border-color:color-mix(in srgb,var(--accent) 35%,transparent);}
|
||||
}
|
||||
html[data-ui='vivid'] .card:active{transform:translateY(-1px) scale(.998);transition-duration:.15s}
|
||||
html[data-ui='vivid'] .card .cov{
|
||||
height:180px;background:linear-gradient(
|
||||
html[data-ui='vivid'] .card:active {transform:translateY(-1px) scale(.998);transition-duration:.15s}
|
||||
html[data-ui='vivid'] .card .cov {height:180px;background:linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb,var(--accent) 25%,var(--paper)),
|
||||
color-mix(in srgb,var(--accent) 8%,var(--paper))
|
||||
);
|
||||
position:relative;overflow:hidden;
|
||||
position:relative;overflow:hidden;}
|
||||
html[data-ui='vivid'] .card .cov img {width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .card:hover .cov img {transform:scale(1.04)}
|
||||
}
|
||||
html[data-ui='vivid'] .card .cov img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
|
||||
html[data-ui='vivid'] .card:hover .cov img{transform:scale(1.04)}
|
||||
html[data-ui='vivid'] .card .body{padding:22px 26px 24px}
|
||||
html[data-ui='vivid'] .card .meta{
|
||||
display:flex;gap:10px;align-items:center;flex-wrap:wrap;
|
||||
font-size:12px;color:var(--muted);font-weight:600;margin-bottom:10px;
|
||||
}
|
||||
html[data-ui='vivid'] .badge{
|
||||
font-size:10.5px;font-weight:800;letter-spacing:.06em;
|
||||
padding:3px 9px;border-radius:999px;
|
||||
}
|
||||
html[data-ui='vivid'] .badge.long{background:var(--accent-soft);color:var(--accent)}
|
||||
html[data-ui='vivid'] .badge.short{background:rgba(52,199,89,.14);color:#28a745}
|
||||
html[data-ui='vivid'] .card h2{
|
||||
margin:0 0 10px;font-size:clamp(19px,2.2vw,23px);font-weight:800;
|
||||
html[data-ui='vivid'] .card .body {padding:22px 26px 24px}
|
||||
html[data-ui='vivid'] .card .meta {display:flex;gap:10px;align-items:center;flex-wrap:wrap;
|
||||
font-size:12px;color:var(--muted);font-weight:600;margin-bottom:10px;}
|
||||
html[data-ui='vivid'] .badge {font-size:10.5px;font-weight:800;letter-spacing:.06em;
|
||||
padding:3px 9px;border-radius:999px;}
|
||||
html[data-ui='vivid'] .badge.long {background:var(--accent-soft);color:var(--accent)}
|
||||
html[data-ui='vivid'] .badge.short {background:rgba(52,199,89,.14);color:#28a745}
|
||||
html[data-ui='vivid'] .card h2 {margin:0 0 10px;font-size:clamp(19px,2.2vw,23px);font-weight:800;
|
||||
letter-spacing:-.02em;line-height:1.35;color:var(--ink);
|
||||
transition:color .25s;
|
||||
transition:color .25s;}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .card:hover h2 {color:var(--accent)}
|
||||
}
|
||||
html[data-ui='vivid'] .card:hover h2{color:var(--accent)}
|
||||
html[data-ui='vivid'] .card .sum{
|
||||
margin:0;font-size:14.5px;line-height:1.75;color:var(--soft);
|
||||
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
|
||||
}
|
||||
html[data-ui='vivid'] .card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
|
||||
html[data-ui='vivid'] .tg{
|
||||
font-size:11.5px;font-weight:700;color:var(--soft);
|
||||
html[data-ui='vivid'] .card .sum {margin:0;font-size:14.5px;line-height:1.75;color:var(--soft);
|
||||
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
|
||||
html[data-ui='vivid'] .card .tags {display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
|
||||
html[data-ui='vivid'] .tg {font-size:11.5px;font-weight:700;color:var(--soft);
|
||||
padding:4px 11px;border-radius:999px;
|
||||
background:color-mix(in srgb,var(--ink) 5%,transparent);
|
||||
transition:all .4s var(--spring);
|
||||
transition:background .35s var(--spring),color .35s var(--spring),transform .35s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .tg:hover {background:var(--accent-soft);color:var(--accent);transform:translateY(-2px)}
|
||||
}
|
||||
html[data-ui='vivid'] .tg:hover{background:var(--accent-soft);color:var(--accent);transform:translateY(-2px)}
|
||||
/* 短文：纸条，无框更轻 */
|
||||
html[data-ui='vivid'] .note{
|
||||
display:block;background:transparent;
|
||||
html[data-ui='vivid'] .note {display:block;background:transparent;
|
||||
border-left:3px solid var(--accent);
|
||||
border-radius:0 var(--radius) var(--radius) 0;
|
||||
padding:18px 24px;
|
||||
margin-left:12px;
|
||||
position:relative;
|
||||
transition:background .35s var(--ease),transform .55s var(--spring),border-color .3s;
|
||||
}
|
||||
html[data-ui='vivid'] .note:hover{
|
||||
background:var(--card);
|
||||
transition:background .35s var(--ease),transform .55s var(--spring),border-color .3s;}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .note:hover {background:var(--card);
|
||||
transform:translateX(6px);
|
||||
box-shadow:var(--shadow);
|
||||
box-shadow:var(--shadow);}
|
||||
}
|
||||
html[data-ui='vivid'] .note .meta{
|
||||
display:flex;gap:10px;align-items:center;
|
||||
font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px;
|
||||
}
|
||||
html[data-ui='vivid'] .note .body{
|
||||
margin:0;font-size:15.5px;line-height:1.8;color:var(--text);
|
||||
}
|
||||
html[data-ui='vivid'] .note .body a{
|
||||
color:var(--accent);font-weight:600;
|
||||
html[data-ui='vivid'] .note .meta {display:flex;gap:10px;align-items:center;
|
||||
font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px;}
|
||||
html[data-ui='vivid'] .note .body {margin:0;font-size:15.5px;line-height:1.8;color:var(--text);}
|
||||
html[data-ui='vivid'] .note .body a {color:var(--accent);font-weight:600;
|
||||
border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
|
||||
transition:border-color .25s;
|
||||
transition:border-color .25s;}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .note .body a:hover {border-bottom-color:var(--accent)}
|
||||
}
|
||||
html[data-ui='vivid'] .note .body a:hover{border-bottom-color:var(--accent)}
|
||||
html[data-ui='vivid'] .note .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
|
||||
|
||||
/* ---- 设计稿分节：分页 ---- */
|
||||
/* ---- 分页 ---- */
|
||||
html[data-ui='vivid'] .pager{
|
||||
display:flex;gap:8px;align-items:center;justify-content:center;
|
||||
margin-top:36px;flex-wrap:wrap;
|
||||
}
|
||||
html[data-ui='vivid'] .pager button{
|
||||
font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;
|
||||
html[data-ui='vivid'] .note .tags {display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
|
||||
html[data-ui='vivid'] .pager {display:flex;gap:8px;align-items:center;justify-content:center;
|
||||
margin-top:36px;flex-wrap:wrap;}
|
||||
html[data-ui='vivid'] .pager button {font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;
|
||||
color:var(--soft);border:1px solid var(--line);background:var(--card);
|
||||
transition:all .45s var(--spring);
|
||||
transition:border-color .35s var(--spring),color .35s var(--spring),transform .35s var(--spring),box-shadow .35s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .pager button:hover:not(:disabled) {border-color:var(--accent);color:var(--accent);transform:translateY(-2px);
|
||||
box-shadow:0 6px 16px var(--accent-soft);}
|
||||
}
|
||||
html[data-ui='vivid'] .pager button:hover:not(:disabled){
|
||||
border-color:var(--accent);color:var(--accent);transform:translateY(-2px);
|
||||
box-shadow:0 6px 16px var(--accent-soft);
|
||||
}
|
||||
html[data-ui='vivid'] .pager button:disabled{opacity:.4;cursor:not-allowed}
|
||||
html[data-ui='vivid'] .pager .cur{
|
||||
background:var(--accent);border-color:var(--accent);color:#fff;
|
||||
box-shadow:0 6px 16px var(--accent-glow);
|
||||
}
|
||||
html[data-ui='vivid'] .pager .info{border:0;background:none;color:var(--muted);font-weight:600;font-size:12.5px}
|
||||
|
||||
/* ---- 首页作品展示区（参照 diygod.cc：只展示部分 + 查看所有） ---- */
|
||||
html[data-ui='vivid'] .showcase{
|
||||
max-width:1100px;margin:56px auto 0;padding:0 28px;
|
||||
}
|
||||
html[data-ui='vivid'] .show-head{
|
||||
display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px;
|
||||
}
|
||||
html[data-ui='vivid'] .show-head h2{
|
||||
margin:0;font-size:1.4rem;font-weight:650;letter-spacing:0.01em;
|
||||
}
|
||||
html[data-ui='vivid'] .show-head .en{color:var(--muted)}
|
||||
html[data-ui='vivid'] .show-head .push{margin-left:auto;color:var(--muted)}
|
||||
html[data-ui='vivid'] .show-head .push:hover{color:var(--accent-deep)}
|
||||
html[data-ui='vivid'] .show-more{display:flex;justify-content:center;margin-top:26px}
|
||||
html[data-ui='vivid'] .show-more .chip{font-size:13px;padding:9px 22px}
|
||||
@media (max-width:860px){
|
||||
html[data-ui='vivid'] .showcase{
|
||||
padding-left:max(18px, env(safe-area-inset-left));
|
||||
padding-right:max(18px, env(safe-area-inset-right));
|
||||
}
|
||||
html[data-ui='vivid'] .pager button:disabled {opacity:.4;cursor:not-allowed}
|
||||
html[data-ui='vivid'] .pager .cur {background:var(--accent);border-color:var(--accent);color:#fff;
|
||||
box-shadow:0 6px 16px var(--accent-glow);}
|
||||
html[data-ui='vivid'] .pager .info {border:0;background:none;color:var(--muted);font-weight:600;font-size:12.5px}
|
||||
html[data-ui='vivid'] .showcase {max-width:1100px;margin:56px auto 0;padding:0 28px;}
|
||||
html[data-ui='vivid'] .show-head {display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
|
||||
html[data-ui='vivid'] .show-head h2 {margin:0;font-size:1.4rem;font-weight:650;letter-spacing:0.01em;}
|
||||
html[data-ui='vivid'] .show-head .en {color:var(--muted)}
|
||||
html[data-ui='vivid'] .show-head .push {margin-left:auto;color:var(--muted)}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .show-head .push:hover {color:var(--accent-deep)}
|
||||
}
|
||||
html[data-ui='vivid'] .show-more {display:flex;justify-content:center;margin-top:26px}
|
||||
html[data-ui='vivid'] .show-more .chip {font-size:13px;padding:9px 22px}
|
||||
/* 窄屏的左右留白统一在 mobile.css —— 这里原本有一条 ≤860 的 18px，
|
||||
但 hero/wrap 在同一宽度是 28px，展示区会整体错开 10px。 */
|
||||
/* 触屏按压反馈：tap-highlight 已关，每个可点元素自带 :active（mobile-native §5） */
|
||||
html[data-ui='vivid'] .chip:active { transform: scale(0.96); }
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
/* ==========================================================================
|
||||
手机（≤640px）：跨模块的窄屏收口
|
||||
--------------------------------------------------------------------------
|
||||
为什么单独一个文件、而且必须最后 import：
|
||||
这里的 .hero / .wrap / .paper / .about-card / .toolbar 的「基准尺寸」分别定义在
|
||||
home.css / article.css / pages.css 里，而它们都排在 chrome.css 之后。
|
||||
媒体查询不加特指度 —— 同特指度的规则永远是「后导入者赢」，
|
||||
所以这些覆盖只要写在 chrome.css（第 2 个 import）就会被全程压掉：
|
||||
手机上左右留白一直是 28px 而不是 18px，卡片圆角/内边距也没换过。
|
||||
放在最后一个 import，才拿得回顺序优势。
|
||||
========================================================================== */
|
||||
|
||||
@media (max-width:640px) {
|
||||
/* 左右 20px 对齐：hero 的标题和下面卡片列表的左边缘要在同一条竖线上 */
|
||||
html[data-ui='vivid'] .hero {padding:48px 20px 32px}
|
||||
html[data-ui='vivid'] .wrap {padding:8px 20px 36px}
|
||||
html[data-ui='vivid'] .paper {padding:28px 22px 36px;border-radius:16px}
|
||||
html[data-ui='vivid'] .about-card {padding:32px 22px}
|
||||
/* showcase 的 .showcase 是 max-width + 自己的 padding（不带 .wrap 类），
|
||||
单独对齐；用 max() 保住横屏刘海侧的安全区 */
|
||||
html[data-ui='vivid'] .showcase {padding-left:max(20px, env(safe-area-inset-left));
|
||||
padding-right:max(20px, env(safe-area-inset-right));}
|
||||
|
||||
/* 标签 chips 在手机上会折成三四行，搜索框再挤一个 150px 控件 —— 都收起来，
|
||||
只留类型分段，筛选条回到一行。
|
||||
标签还有完整入口：/tags 页本来就比这一条横向 chip 更好找。 */
|
||||
html[data-ui='vivid'] .toolbar .chips,
|
||||
html[data-ui='vivid'] .toolbar .search {display:none}
|
||||
}
|
||||
@@ -1,160 +1,119 @@
|
||||
/* ONE · 余白（yohaku）· 由设计稿按节拆分 / 窄屏
|
||||
*
|
||||
* 由设计稿（仓库根 index.html 的 <style>）按它自己的分节原样拆分。
|
||||
* 只做了一件事：给每条规则加 html[data-ui='vivid'] 前缀（@media 内部的
|
||||
* 规则也逐条加，at-rule 本身不加），并把 :root[data-theme="dark"] 映射到
|
||||
* 本站的 vivid-dark。数值一律未改，规则也没有被拆开过。
|
||||
*
|
||||
* 前缀是硬要求：组件 scoped 样式编译后是 .foo[data-v-HASH]（0,2,0），
|
||||
* html[data-ui='vivid'] .foo 是（0,2,1）才能稳定取胜；scoped 是懒加载
|
||||
* chunk，入口 CSS 之后才到位，平手时按源码顺序反而会赢。
|
||||
*/
|
||||
|
||||
|
||||
/* ---- 设计稿分节：归档 / 标签 / 作品 / 关于 ---- */
|
||||
/* ---- 归档 / 标签 / 作品 / 关于 ---- */
|
||||
html[data-ui='vivid'] .page-head{
|
||||
max-width:1100px;margin:0 auto;padding:56px 28px 32px;
|
||||
}
|
||||
html[data-ui='vivid'] .page-head code{font-family:var(--mono);font-size:.9em}
|
||||
.page-head .kicker{
|
||||
display:inline-flex;align-items:center;gap:8px;
|
||||
html[data-ui='vivid'] .page-head {max-width:1100px;margin:0 auto;padding:56px 28px 32px;}
|
||||
html[data-ui='vivid'] .page-head code {font-family:var(--mono);font-size:.9em}
|
||||
.page-head .kicker {display:inline-flex;align-items:center;gap:8px;
|
||||
font-size:12px;font-weight:700;letter-spacing:.14em;
|
||||
color:var(--accent);text-transform:uppercase;margin-bottom:16px;
|
||||
}
|
||||
html[data-ui='vivid'] .page-head .kicker::before{content:"";width:20px;height:1.5px;background:var(--accent)}
|
||||
html[data-ui='vivid'] .page-head h1{
|
||||
margin:0;font-size:clamp(32px,5vw,48px);font-weight:800;
|
||||
letter-spacing:-.03em;color:var(--ink);
|
||||
}
|
||||
html[data-ui='vivid'] .page-head h1 em{font-style:normal;color:var(--accent)}
|
||||
html[data-ui='vivid'] .page-head p{margin:12px 0 0;max-width:480px;color:var(--soft);font-size:15px;line-height:1.75}
|
||||
html[data-ui='vivid'] .year-block{margin-bottom:36px}
|
||||
html[data-ui='vivid'] .year-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
|
||||
html[data-ui='vivid'] .year-head .y{
|
||||
font-size:clamp(36px,5vw,52px);font-weight:800;letter-spacing:-.03em;
|
||||
color:var(--accent);font-variant-numeric:tabular-nums;
|
||||
}
|
||||
html[data-ui='vivid'] .year-head .c{
|
||||
font-size:12px;font-weight:700;color:var(--muted);
|
||||
color:var(--accent);text-transform:uppercase;margin-bottom:16px;}
|
||||
html[data-ui='vivid'] .page-head .kicker::before {content:"";width:20px;height:1.5px;background:var(--accent)}
|
||||
html[data-ui='vivid'] .page-head h1 {margin:0;font-size:clamp(32px,5vw,48px);font-weight:800;
|
||||
letter-spacing:-.03em;color:var(--ink);}
|
||||
html[data-ui='vivid'] .page-head h1 em {font-style:normal;color:var(--accent)}
|
||||
html[data-ui='vivid'] .page-head p {margin:12px 0 0;max-width:480px;color:var(--soft);font-size:15px;line-height:1.75}
|
||||
html[data-ui='vivid'] .year-block {margin-bottom:36px}
|
||||
html[data-ui='vivid'] .year-head {display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
|
||||
html[data-ui='vivid'] .year-head .y {font-size:clamp(36px,5vw,52px);font-weight:800;letter-spacing:-.03em;
|
||||
color:var(--accent);font-variant-numeric:tabular-nums;}
|
||||
html[data-ui='vivid'] .year-head .c {font-size:12px;font-weight:700;color:var(--muted);
|
||||
padding:5px 12px;border-radius:999px;
|
||||
background:color-mix(in srgb,var(--ink) 5%,transparent);
|
||||
}
|
||||
html[data-ui='vivid'] .month{
|
||||
background:var(--card);border:1px solid var(--line);
|
||||
background:color-mix(in srgb,var(--ink) 5%,transparent);}
|
||||
html[data-ui='vivid'] .month {background:var(--card);border:1px solid var(--line);
|
||||
border-radius:var(--radius-lg);margin-bottom:12px;overflow:hidden;
|
||||
box-shadow:var(--shadow);
|
||||
transition:box-shadow .35s,transform .55s var(--spring);
|
||||
transition:box-shadow .35s,transform .55s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .month:hover {box-shadow:var(--shadow-lg);transform:translateY(-2px)}
|
||||
}
|
||||
html[data-ui='vivid'] .month:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
|
||||
html[data-ui='vivid'] .month h3{
|
||||
margin:0;padding:14px 22px 10px;font-size:12px;font-weight:800;
|
||||
letter-spacing:.1em;color:var(--accent);
|
||||
}
|
||||
html[data-ui='vivid'] .month ul{list-style:none;margin:0;padding:0 10px 10px}
|
||||
html[data-ui='vivid'] .month li a{
|
||||
display:flex;gap:14px;padding:10px 14px;border-radius:10px;
|
||||
html[data-ui='vivid'] .month h3 {margin:0;padding:14px 22px 10px;font-size:12px;font-weight:800;
|
||||
letter-spacing:.1em;color:var(--accent);}
|
||||
html[data-ui='vivid'] .month ul {list-style:none;margin:0;padding:0 10px 10px}
|
||||
html[data-ui='vivid'] .month li a {display:flex;gap:14px;padding:10px 14px;border-radius:10px;
|
||||
font-size:14px;align-items:baseline;
|
||||
transition:background .3s,transform .5s var(--spring);
|
||||
transition:background .3s,transform .5s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .month li a:hover {background:var(--accent-soft);transform:translateX(6px)}
|
||||
}
|
||||
html[data-ui='vivid'] .month li a:hover{background:var(--accent-soft);transform:translateX(6px)}
|
||||
html[data-ui='vivid'] .month .d{font-family:var(--mono);font-size:12px;color:var(--muted);flex:none;font-weight:600}
|
||||
html[data-ui='vivid'] .month .kd{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;flex:none}
|
||||
html[data-ui='vivid'] .month .kd.s{background:rgba(52,199,89,.14);color:#28a745}
|
||||
html[data-ui='vivid'] .month .kd.l{background:var(--accent-soft);color:var(--accent)}
|
||||
html[data-ui='vivid'] .month .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
|
||||
html[data-ui='vivid'] .month li a:hover .t{color:var(--ink)}
|
||||
html[data-ui='vivid'] .tag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
|
||||
html[data-ui='vivid'] .tag-tile{
|
||||
background:var(--card);border:1px solid var(--line);
|
||||
html[data-ui='vivid'] .month .d {font-family:var(--mono);font-size:12px;color:var(--muted);flex:none;font-weight:600}
|
||||
html[data-ui='vivid'] .month .kd {font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;flex:none}
|
||||
html[data-ui='vivid'] .month .kd.s {background:rgba(52,199,89,.14);color:#28a745}
|
||||
html[data-ui='vivid'] .month .kd.l {background:var(--accent-soft);color:var(--accent)}
|
||||
html[data-ui='vivid'] .month .t {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .month li a:hover .t {color:var(--ink)}
|
||||
}
|
||||
html[data-ui='vivid'] .tag-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
|
||||
html[data-ui='vivid'] .tag-tile {background:var(--card);border:1px solid var(--line);
|
||||
border-radius:var(--radius-lg);padding:22px;
|
||||
box-shadow:var(--shadow);position:relative;overflow:hidden;
|
||||
transition:all .55s var(--spring);
|
||||
}
|
||||
html[data-ui='vivid'] .tag-tile:hover{
|
||||
transform:translateY(-6px);
|
||||
transition:transform .55s var(--spring),box-shadow .55s var(--spring),border-color .55s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .tag-tile:hover {transform:translateY(-6px);
|
||||
box-shadow:var(--shadow-lg);
|
||||
border-color:color-mix(in srgb,var(--tc,var(--accent)) 40%,transparent);
|
||||
border-color:color-mix(in srgb,var(--tc,var(--accent)) 40%,transparent);}
|
||||
}
|
||||
html[data-ui='vivid'] .tag-tile .sw{
|
||||
width:32px;height:32px;border-radius:10px 10px 10px 4px;
|
||||
html[data-ui='vivid'] .tag-tile .sw {width:32px;height:32px;border-radius:10px 10px 10px 4px;
|
||||
background:var(--tc,var(--accent));margin-bottom:14px;
|
||||
box-shadow:0 6px 14px -4px var(--tc,var(--accent));
|
||||
transition:transform .55s var(--spring);
|
||||
transition:transform .55s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .tag-tile:hover .sw {transform:rotate(-8deg) scale(1.1)}
|
||||
}
|
||||
html[data-ui='vivid'] .tag-tile:hover .sw{transform:rotate(-8deg) scale(1.1)}
|
||||
html[data-ui='vivid'] .tag-tile .nm{font-size:18px;font-weight:800;display:block;margin-bottom:4px;color:var(--ink)}
|
||||
html[data-ui='vivid'] .tag-tile .ct{font-size:12.5px;color:var(--muted);font-weight:600}
|
||||
html[data-ui='vivid'] .tag-tile .big{
|
||||
position:absolute;right:14px;top:10px;font-size:42px;font-weight:800;
|
||||
html[data-ui='vivid'] .tag-tile .nm {font-size:18px;font-weight:800;display:block;margin-bottom:4px;color:var(--ink)}
|
||||
html[data-ui='vivid'] .tag-tile .ct {font-size:12.5px;color:var(--muted);font-weight:600}
|
||||
html[data-ui='vivid'] .tag-tile .big {position:absolute;right:14px;top:10px;font-size:42px;font-weight:800;
|
||||
color:color-mix(in srgb,var(--tc,var(--accent)) 12%,transparent);
|
||||
letter-spacing:-.04em;line-height:1;
|
||||
}
|
||||
html[data-ui='vivid'] .proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
|
||||
html[data-ui='vivid'] .proj{
|
||||
background:var(--card);border:1px solid var(--line);
|
||||
letter-spacing:-.04em;line-height:1;}
|
||||
/* min(300px,100%) 而不是裸 300px：窄屏（如 320px 的 SE）容器比 300px 还窄时，
|
||||
裸 300px 的轨道下限会顶破容器被 body 的 overflow-x:hidden 裁掉右边。 */
|
||||
html[data-ui='vivid'] .proj-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:20px}
|
||||
html[data-ui='vivid'] .proj {background:var(--card);border:1px solid var(--line);
|
||||
border-radius:var(--radius-lg);overflow:hidden;
|
||||
box-shadow:var(--shadow);display:flex;flex-direction:column;
|
||||
transition:all .55s var(--spring);
|
||||
transition:transform .55s var(--spring),box-shadow .55s var(--spring),border-color .55s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .proj:hover {transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--accent-soft)}
|
||||
}
|
||||
html[data-ui='vivid'] .proj:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--accent-soft)}
|
||||
html[data-ui='vivid'] .proj .cov{height:150px;position:relative;overflow:hidden;background:var(--accent-soft)}
|
||||
html[data-ui='vivid'] .proj .cov img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
|
||||
html[data-ui='vivid'] .proj:hover .cov img{transform:scale(1.05)}
|
||||
html[data-ui='vivid'] .proj .st{
|
||||
position:absolute;top:12px;left:12px;font-size:10.5px;font-weight:800;
|
||||
html[data-ui='vivid'] .proj .cov {height:150px;position:relative;overflow:hidden;background:var(--accent-soft)}
|
||||
html[data-ui='vivid'] .proj .cov img {width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .proj:hover .cov img {transform:scale(1.05)}
|
||||
}
|
||||
html[data-ui='vivid'] .proj .st {position:absolute;top:12px;left:12px;font-size:10.5px;font-weight:800;
|
||||
background:color-mix(in srgb,var(--card) 90%,transparent);
|
||||
backdrop-filter:blur(8px);color:var(--accent);
|
||||
padding:5px 11px;border-radius:999px;
|
||||
}
|
||||
html[data-ui='vivid'] .proj .body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column;gap:8px}
|
||||
html[data-ui='vivid'] .proj h3{margin:0;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
|
||||
html[data-ui='vivid'] .proj p{margin:0;font-size:13.5px;line-height:1.7;color:var(--soft);flex:1}
|
||||
html[data-ui='vivid'] .proj .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
|
||||
html[data-ui='vivid'] .proj .acts span{
|
||||
font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:999px;
|
||||
padding:5px 11px;border-radius:999px;}
|
||||
html[data-ui='vivid'] .proj .body {padding:18px 20px 20px;flex:1;display:flex;flex-direction:column;gap:8px}
|
||||
html[data-ui='vivid'] .proj h3 {margin:0;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
|
||||
html[data-ui='vivid'] .proj p {margin:0;font-size:13.5px;line-height:1.7;color:var(--soft);flex:1}
|
||||
html[data-ui='vivid'] .proj .acts {display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
|
||||
html[data-ui='vivid'] .proj .acts span {font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:999px;
|
||||
background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--soft);
|
||||
transition:all .45s var(--spring);
|
||||
transition:background .45s var(--spring),color .45s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .proj:hover .acts span {background:var(--accent-soft);color:var(--accent)}
|
||||
}
|
||||
html[data-ui='vivid'] .proj:hover .acts span{background:var(--accent-soft);color:var(--accent)}
|
||||
html[data-ui='vivid'] .about-card{
|
||||
max-width:680px;margin:0 auto;background:var(--card);
|
||||
html[data-ui='vivid'] .about-card {max-width:680px;margin:0 auto;background:var(--card);
|
||||
border:1px solid var(--line);border-radius:var(--radius-lg);
|
||||
padding:48px 44px;box-shadow:var(--shadow-lg);
|
||||
animation:paperIn .7s var(--spring) both;
|
||||
}
|
||||
html[data-ui='vivid'] .about-card h1{margin:0 0 8px;font-size:clamp(32px,5vw,44px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
|
||||
html[data-ui='vivid'] .about-card .role{
|
||||
font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--accent);
|
||||
text-transform:uppercase;margin-bottom:22px;
|
||||
}
|
||||
html[data-ui='vivid'] .about-card .bio{
|
||||
font-size:16.5px;line-height:1.95;color:var(--soft);
|
||||
max-width:46ch;margin:0 0 32px;font-family:var(--serif);
|
||||
}
|
||||
html[data-ui='vivid'] .about-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
|
||||
html[data-ui='vivid'] .about-facts div{
|
||||
background:color-mix(in srgb,var(--accent) 8%,transparent);
|
||||
border-radius:var(--radius);padding:16px;
|
||||
}
|
||||
html[data-ui='vivid'] .about-facts b{
|
||||
display:block;font-size:24px;font-weight:800;color:var(--accent);
|
||||
letter-spacing:-.02em;font-variant-numeric:tabular-nums;
|
||||
}
|
||||
html[data-ui='vivid'] .about-facts span{font-size:12px;color:var(--muted);font-weight:700}
|
||||
html[data-ui='vivid'] .empty{
|
||||
max-width:480px;margin:40px auto;background:var(--card);
|
||||
animation:paperIn .7s var(--spring) both;}
|
||||
html[data-ui='vivid'] .about-card h1 {margin:0 0 8px;font-size:clamp(32px,5vw,44px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
|
||||
html[data-ui='vivid'] .about-card .role {font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--accent);
|
||||
text-transform:uppercase;margin-bottom:22px;}
|
||||
html[data-ui='vivid'] .about-card .bio {font-size:16.5px;line-height:1.95;color:var(--soft);
|
||||
max-width:46ch;margin:0 0 32px;font-family:var(--serif);}
|
||||
html[data-ui='vivid'] .about-facts {display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
|
||||
html[data-ui='vivid'] .about-facts div {background:color-mix(in srgb,var(--accent) 8%,transparent);
|
||||
border-radius:var(--radius);padding:16px;}
|
||||
html[data-ui='vivid'] .about-facts b {display:block;font-size:24px;font-weight:800;color:var(--accent);
|
||||
letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
|
||||
html[data-ui='vivid'] .about-facts span {font-size:12px;color:var(--muted);font-weight:700}
|
||||
html[data-ui='vivid'] .empty {max-width:480px;margin:40px auto;background:var(--card);
|
||||
border:1px dashed var(--line-strong);border-radius:var(--radius-lg);
|
||||
padding:48px 32px;text-align:center;box-shadow:var(--shadow);
|
||||
}
|
||||
html[data-ui='vivid'] .empty h3{margin:0 0 8px;font-size:20px;font-weight:800;color:var(--ink)}
|
||||
html[data-ui='vivid'] .empty p{margin:0 0 18px;color:var(--muted);font-size:14px}
|
||||
|
||||
/* 无封面作品卡：状态角标内联到标题旁（设计稿 mock 全有封面，此场景是补的） */
|
||||
html[data-ui='vivid'] .proj .st-plain{
|
||||
position:static;display:inline-block;margin-left:9px;vertical-align:2px;
|
||||
padding:48px 32px;text-align:center;box-shadow:var(--shadow);}
|
||||
html[data-ui='vivid'] .empty h3 {margin:0 0 8px;font-size:20px;font-weight:800;color:var(--ink)}
|
||||
html[data-ui='vivid'] .empty p {margin:0 0 18px;color:var(--muted);font-size:14px}
|
||||
html[data-ui='vivid'] .proj .st-plain {position:static;display:inline-block;margin-left:9px;vertical-align:2px;
|
||||
font-size:10px;font-weight:800;letter-spacing:.06em;
|
||||
padding:2px 9px;border-radius:999px;
|
||||
background:color-mix(in srgb,var(--card) 90%,transparent);
|
||||
color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-strong);
|
||||
}
|
||||
color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-strong);}
|
||||
html[data-ui='vivid'] .chip:active { transform: scale(0.96); }
|
||||
html[data-ui='vivid'] .proj:active { transform: scale(0.985); }
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
/* ONE · 余白（yohaku）· 由设计稿按节拆分 / 窄屏
|
||||
*
|
||||
* 由设计稿（仓库根 index.html 的 <style>）按它自己的分节原样拆分。
|
||||
* 只做了一件事：给每条规则加 html[data-ui='vivid'] 前缀（@media 内部的
|
||||
* 规则也逐条加，at-rule 本身不加），并把 :root[data-theme="dark"] 映射到
|
||||
* 本站的 vivid-dark。数值一律未改，规则也没有被拆开过。
|
||||
*
|
||||
* 前缀是硬要求：组件 scoped 样式编译后是 .foo[data-v-HASH]（0,2,0），
|
||||
* html[data-ui='vivid'] .foo 是（0,2,1）才能稳定取胜；scoped 是懒加载
|
||||
* chunk，入口 CSS 之后才到位，平手时按源码顺序反而会赢。
|
||||
*/
|
||||
|
||||
|
||||
/* ---- 设计稿分节：底部：标签 / 作品 / 关于 ---- */
|
||||
/* ---- 底部：标签 / 作品 / 关于 ---- */
|
||||
html[data-ui='vivid'] .panels{
|
||||
max-width:1100px;margin:0 auto;padding:20px 28px 20px;
|
||||
display:grid;/* 设计稿此处是 1.2fr 1fr 1fr；站主要求标签云卡明显大一圈，改为 1.6fr（实测 444 vs 277px）。
|
||||
高度策略：align-items:start —— 每张卡自适应内容，顶边齐平，不互相拉伸。
|
||||
（试过等高拉伸 / 跨行加高，标签云内容少时会空出一大块，站主否了。） */
|
||||
grid-template-columns:1.6fr 1fr 1fr;align-items:start;
|
||||
}
|
||||
@media (max-width:860px) {
|
||||
html[data-ui='vivid'] .panels{grid-template-columns:1fr}
|
||||
}
|
||||
html[data-ui='vivid'] .panel{
|
||||
background:var(--card);border:1px solid var(--line);
|
||||
border-radius:var(--radius-lg);padding:24px;
|
||||
box-shadow:var(--shadow);
|
||||
transition:transform .55s var(--spring),box-shadow .4s;
|
||||
}
|
||||
|
||||
/* 标签云卡比另外两张高出一截（站主要求）：三张**顶边齐平**，
|
||||
作品 / 关于两卡通过负 bottom margin 各自收短 40px ——
|
||||
于是标签云的底边比它们低出 40px。栅格行高由标签云决定，无需补偿。 */
|
||||
|
||||
html[data-ui='vivid'] .panel:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
|
||||
html[data-ui='vivid'] .panel h3{
|
||||
margin:0 0 16px;font-size:11px;font-weight:800;
|
||||
letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
|
||||
display:flex;align-items:center;gap:10px;
|
||||
}
|
||||
html[data-ui='vivid'] .panel h3::after{content:"";flex:1;height:1px;background:var(--line)}
|
||||
html[data-ui='vivid'] .cloud{display:flex;flex-wrap:wrap;gap:8px}
|
||||
html[data-ui='vivid'] .cloud a{
|
||||
font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;
|
||||
background:color-mix(in srgb,var(--accent) 10%,transparent);
|
||||
color:var(--accent);
|
||||
transition:all .5s var(--spring);
|
||||
}
|
||||
html[data-ui='vivid'] .cloud a:hover{
|
||||
background:var(--accent);color:#fff;
|
||||
transform:translateY(-3px) scale(1.05);
|
||||
box-shadow:0 8px 20px var(--accent-glow);
|
||||
}
|
||||
html[data-ui='vivid'] .cloud a span{opacity:.7;font-size:11px;margin-left:4px;font-weight:600}
|
||||
html[data-ui='vivid'] .plist{display:flex;flex-direction:column;gap:10px}
|
||||
html[data-ui='vivid'] .plist a{
|
||||
display:block;padding:13px 15px;border-radius:var(--radius);
|
||||
background:color-mix(in srgb,var(--ink) 3%,transparent);
|
||||
transition:all .5s var(--spring);
|
||||
}
|
||||
html[data-ui='vivid'] .plist a:hover{
|
||||
background:var(--accent-soft);transform:translateX(6px);
|
||||
}
|
||||
html[data-ui='vivid'] .plist b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
|
||||
html[data-ui='vivid'] .plist small{color:var(--muted);font-size:12px}
|
||||
html[data-ui='vivid'] .about-box .name{
|
||||
font-size:18px;font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.02em;
|
||||
}
|
||||
html[data-ui='vivid'] .about-box p{margin:0;font-size:13.5px;line-height:1.8;color:var(--soft)}
|
||||
|
||||
|
||||
/* 卡变大了一圈，chip 也相应放大一号，避免大卡里塞小字显得空 */
|
||||
html[data-ui='vivid'] .panels .cloud{gap:11px}
|
||||
html[data-ui='vivid'] .panels .cloud a{
|
||||
font-size:15px;padding:10px 19px;
|
||||
}
|
||||
html[data-ui='vivid'] .panels .cloud a span{font-size:12.5px;margin-left:5px}
|
||||
@@ -1,30 +1,5 @@
|
||||
/* ONE · 余白（yohaku）· 令牌层
|
||||
*
|
||||
* 这一层是整套 UI 的地基，做两件事：
|
||||
*
|
||||
* 1. 定义**站主接口** --v-*（28 个），值是设计稿的原始数值。
|
||||
* 站主在后台「自定义 CSS」里写 :root{--v-accent:…} 就能覆盖 ：
|
||||
* 不需要去背 html[data-ui='vivid'] 这种选择器。
|
||||
*
|
||||
* 2. 把**设计稿的令牌名**（--paper / --ink / --accent / …）全部指回 --v-*。
|
||||
* 设计稿里 700 多行规则读的都是这些名字；接上之后站主只改一处，
|
||||
* 整套 UI 连同 classic 的共享组件（PostCard / RightRail / .prose / .btn）
|
||||
* 一起换皮。
|
||||
*
|
||||
* 为什么放进 @layer：未分层的规则永远赢过分层的规则（层级顺序先于特指度）。
|
||||
* 站主的自定义 CSS 是未分层的普通 <style>，所以写进 @layer 是**让出**优先级，
|
||||
* 而不是去压别人。这是刻意的。
|
||||
*
|
||||
* 数值来源：仓库根 index.html（设计稿）的 :root 与 :root[data-theme="dark"]，
|
||||
* 一个数都没有改。
|
||||
*/
|
||||
|
||||
@layer one-yohaku {
|
||||
/* ==========================================================================
|
||||
1. 站主接口 + 设计稿令牌（亮色）
|
||||
========================================================================== */
|
||||
html[data-ui='vivid'] {
|
||||
/* ---- 站主接口：颜色 ---- */
|
||||
html[data-ui='vivid'] {/* ---- 站主接口：颜色 ---- */
|
||||
--v-bg: #faf7f0;
|
||||
--v-surface: #fffefb;
|
||||
--v-surface-2: #f4f1ea;
|
||||
@@ -69,15 +44,8 @@
|
||||
135deg,
|
||||
var(--v-accent),
|
||||
color-mix(in srgb, var(--v-accent) 86%, var(--v-accent-2))
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. 暗色：只覆盖 --v-* 的默认值，上面的别名自动跟随
|
||||
========================================================================== */
|
||||
html[data-ui='vivid'][data-theme='vivid-dark'] {
|
||||
--v-bg: #1c1c1e;
|
||||
);}
|
||||
html[data-ui='vivid'][data-theme='vivid-dark'] {--v-bg: #1c1c1e;
|
||||
--v-surface: #232326;
|
||||
--v-surface-2: #2a2a2d;
|
||||
--v-text: #f2f2f7;
|
||||
@@ -94,21 +62,9 @@
|
||||
--v-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 14px -6px rgba(0, 0, 0, 0.3);
|
||||
--v-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.25), 0 20px 50px -16px rgba(0, 0, 0, 0.5);
|
||||
--v-noise-opacity: 0.3;
|
||||
--v-noise-blend: soft-light;
|
||||
}
|
||||
--v-noise-blend: soft-light;}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
2. 设计稿的令牌名 → 全部指回 --v-*
|
||||
--------------------------------------------------------------------------
|
||||
⚠ 这一段**必须留在 @layer 外面**。
|
||||
层级顺序优先于特指度：未分层的规则永远赢过分层的规则。styles.css 里
|
||||
`:root { --accent: #3d7f9c }` 是未分层的，如果这里放进 @layer，
|
||||
设计稿的配色就会被 classic 的令牌整片压掉 ： 页面「看着像，细节全不对」。
|
||||
（--v-* 的默认值留在层里是为了让站主的自定义 CSS 能覆盖，这一段不是。）
|
||||
========================================================================== */
|
||||
html[data-ui='vivid'] {
|
||||
/* ---- 设计稿的令牌名 → 全部指回 --v-* ----
|
||||
html[data-ui='vivid'] {/* ---- 设计稿的令牌名 → 全部指回 --v-* ----
|
||||
* 下面这些名字是设计稿 700 多行规则在用的。接上之后，
|
||||
* 站主改 --v-* 就等于改整站；classic 的共享组件也一起换皮。 */
|
||||
--paper: var(--v-bg);
|
||||
@@ -139,49 +95,26 @@ html[data-ui='vivid'] {
|
||||
--sans: var(--v-font-display);
|
||||
--serif: var(--v-font-serif);
|
||||
--mono: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
|
||||
--measure: var(--v-measure);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
3. 复位与肌理
|
||||
--------------------------------------------------------------------------
|
||||
设计稿里这几条是全局的。必须逐条前缀收敛到 vivid，
|
||||
否则 a{text-decoration:none} / *{box-sizing} 会连后台一起改掉。
|
||||
========================================================================== */
|
||||
html[data-ui='vivid'] * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html[data-ui='vivid'] {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
html[data-ui='vivid'] body {
|
||||
margin: 0;
|
||||
--measure: var(--v-measure);}
|
||||
html[data-ui='vivid'] * {box-sizing: border-box;}
|
||||
html[data-ui='vivid'] {scroll-behavior: auto;}
|
||||
html[data-ui='vivid'] body {margin: 0;
|
||||
font-family: var(--sans);
|
||||
color: var(--text);
|
||||
background: var(--paper);
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
transition: background 0.4s var(--ease), color 0.4s var(--ease);
|
||||
}
|
||||
html[data-ui='vivid'] a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
html[data-ui='vivid'] button {
|
||||
font: inherit;
|
||||
transition: background 0.4s var(--ease), color 0.4s var(--ease);}
|
||||
html[data-ui='vivid'] a {color: inherit;
|
||||
text-decoration: none;}
|
||||
html[data-ui='vivid'] button {font: inherit;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
}
|
||||
html[data-ui='vivid'] ::selection {
|
||||
background: var(--accent-glow);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* 噪点：强调色染色的细颗粒 */
|
||||
html[data-ui='vivid'] body::before {
|
||||
content: '';
|
||||
color: inherit;}
|
||||
html[data-ui='vivid'] ::selection {background: var(--accent-glow);
|
||||
color: var(--ink);}
|
||||
html[data-ui='vivid'] body::before {content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
@@ -189,61 +122,41 @@ html[data-ui='vivid'] body::before {
|
||||
opacity: var(--v-noise-opacity);
|
||||
mix-blend-mode: var(--v-noise-blend);
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.65 0 0 0 0 0.8 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-size: 180px 180px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
4. 与 classic / 后台样式共存的防线
|
||||
--------------------------------------------------------------------------
|
||||
设计稿是一个独立单页，它默认「没人动过这些属性」。但真站里 styles.css
|
||||
（含后台那一段）是全局、未分层加载的，它的
|
||||
· h1,h2,h3,h4 { font-family: var(--serif) }
|
||||
· body { line-height: 1.8 }
|
||||
· .stat / .toolbar / .chip（后台那套带卡片的）
|
||||
会漏进余白的元素里 ： 凡是设计稿「没声明、靠继承或默认值」的属性都会被改掉。
|
||||
所以这里把设计稿的期望值**显式写死**。
|
||||
|
||||
为什么这样不会误伤设计稿自己的衬线：详情页那 4 处 `font-family: var(--serif)`
|
||||
是 `.xxx .yyy` 形式，前缀后特指度 (0,2,1)，高于这里的 (0,1,1) ： 它们照样赢。
|
||||
这里只负责挡掉裸选择器。
|
||||
|
||||
⚠ 这一段必须留在 @layer 外面：未分层才能压住 styles.css 的未分层规则。
|
||||
========================================================================== */
|
||||
html[data-ui='vivid'] body {
|
||||
line-height: normal;
|
||||
}
|
||||
html[data-ui='vivid'] h1,
|
||||
html[data-ui='vivid'] h2,
|
||||
html[data-ui='vivid'] h3,
|
||||
html[data-ui='vivid'] h4,
|
||||
html[data-ui='vivid'] h5,
|
||||
html[data-ui='vivid'] h6 {
|
||||
font-family: inherit;
|
||||
background-size: 180px 180px;}
|
||||
html[data-ui='vivid'] body {line-height: normal;}
|
||||
html[data-ui='vivid'] h1, html[data-ui='vivid'] h2, html[data-ui='vivid'] h3, html[data-ui='vivid'] h4, html[data-ui='vivid'] h5, html[data-ui='vivid'] h6 {font-family: inherit;
|
||||
/* styles.css 还给 h1..h4 设了 line-height:1.4；设计稿对这些标题是「靠继承」，
|
||||
所以这里一并交还给继承（设计稿自己声明了行高的标题特指度更高，照样赢）。 */
|
||||
line-height: inherit;
|
||||
}
|
||||
/* 后台有同名类且带卡片外观，逐个还原成设计稿里的裸元素 */
|
||||
html[data-ui='vivid'] .stat {
|
||||
background: none;
|
||||
line-height: inherit;}
|
||||
html[data-ui='vivid'] .stat {background: none;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
gap: normal;
|
||||
display: block;
|
||||
}
|
||||
html[data-ui='vivid'] .toolbar {
|
||||
background: none;
|
||||
border-top: 0;
|
||||
display: block;}
|
||||
html[data-ui='vivid'] .toolbar {background: none;
|
||||
border: 0; /* 后台是整圈 1px 边框，只中和 top 会留左右两道 */
|
||||
border-bottom: 1px solid var(--line); /* 设计稿的分隔线 */
|
||||
border-radius: 0;
|
||||
padding: 0 0 20px;
|
||||
}
|
||||
html[data-ui='vivid'] .chip {
|
||||
display: inline-block;
|
||||
gap: normal;
|
||||
}
|
||||
/* styles.css 里有 .panel + .panel { margin-top: 16px }（classic 的纵向排布用），
|
||||
在余白的三栏栅格里它会把第 2、3 张卡往下压 16px，顶边就不齐了 —— 中和掉。 */
|
||||
html[data-ui='vivid'] .panels > .panel + .panel {
|
||||
margin-top: 0;
|
||||
}
|
||||
padding: 0 0 20px;}
|
||||
html[data-ui='vivid'] .chip {display: inline-block;
|
||||
gap: normal;}
|
||||
|
||||
/* ==========================================================================
|
||||
触屏（coarse pointer）：可点目标提到 44px 手指标准，输入框 16px 防聚焦缩放
|
||||
--------------------------------------------------------------------------
|
||||
· 输入框 16px 必须压过 home.css 的 .search input 13.5px，用
|
||||
.toolbar .search input（0,3,2）而不是裸 input（0,0,1），否则被压住
|
||||
· seg/chip 原样是 padding 撑出来的，在这里补 min-height 就够了
|
||||
· .icon-btn 的 width/height 定义在 chrome.css……而后导入的 chrome.css
|
||||
同特指度会反压这里，所以 icon-btn 的 44px 放在 chrome.css 自己那边
|
||||
========================================================================== */
|
||||
@media (pointer: coarse) {
|
||||
html[data-ui='vivid'] .seg button,
|
||||
html[data-ui='vivid'] .chip {
|
||||
min-height: 44px;
|
||||
}
|
||||
html[data-ui='vivid'] .toolbar .search input {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -11,8 +11,8 @@ import { site, applyDocTitle } from '../site'
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// vivid（余白）走的是另一套 DOM：hero + toolbar + feed + pager + panels。
|
||||
// 数据来源和 classic 完全一样，只是呈现不同 —— 所以分支放在视图层，不动取数逻辑。
|
||||
// vivid（余白）走的是另一套 DOM：hero + toolbar + feed + pager + showcase。
|
||||
// 数据来源和 classic 完全一样，只是呈现不同，所以分支放在视图层，不动取数逻辑。
|
||||
const isVivid = computed(() => site.ui_id === 'vivid')
|
||||
const yTags = ref([])
|
||||
const yProjects = ref([])
|
||||
|
||||
Reference in New Issue
Block a user