style(组件): 简化卡片组件的样式类名并移除边框

移除 PostCard 和文章页卡片组件的边框样式,简化 class 列表
统一使用 card-base 和 card-hover 基础样式类
This commit is contained in:
二叉树树
2026-01-01 21:55:59 +08:00
parent bb4aacb07b
commit 3701200fd7
4 changed files with 7 additions and 3 deletions

View File

@@ -33,7 +33,7 @@ const coverWidth = "28%";
const { remarkPluginFrontmatter } = await entry.render();
---
<div class:list={["card-base border border-black/10 dark:border-white/10 flex flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
<div class:list={["card-base card-hover flex flex-col w-full relative", className]} style={style}>
<div class:list={["pl-9 pr-2 pt-6 pb-6 relative", {"w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
<a href={url}
class="transition group w-full block font-bold mb-2 md:mb-3 text-xl md:text-3xl text-90 relative

View File

@@ -46,7 +46,7 @@ const jsonLd = {
<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings}>
<script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
<div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full border border-black/10 dark:border-white/10 ",
<div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full",
{}
]}>
<!-- word count and reading time -->

View File

@@ -3,9 +3,13 @@
@layer components {
.card-base {
@apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
@apply border border-black/5 dark:border-white/10;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.card-hover {
@apply hover:scale-[1.01] hover:shadow-xl hover:border-black/10 dark:hover:border-white/20 hover:z-10;
}
h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
@apply transition;
}

View File

@@ -45,7 +45,7 @@ export function setRainbowSpeed(speed: number): void {
export function getBgBlur(): number {
const stored = localStorage.getItem("bg-blur");
return stored ? Number.parseInt(stored) : 0; // Default blur is 0
return stored ? Number.parseInt(stored) : 4; // Default blur is 4
}
export function setBgBlur(blur: number): void {