juluo/fuwari
1
0
Fork 0
mirror of https://github.com/afoim/fuwari.git synced 2026-01-31 09:03:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
移除 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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/PostCard.astro
View File

@@ -33,7 +33,7 @@ const coverWidth = "28%";
const { remarkPluginFrontmatter } = await entry.render(); 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}]}> <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} <a href={url}
class="transition group w-full block font-bold mb-2 md:mb-3 text-xl md:text-3xl text-90 relative class="transition group w-full block font-bold mb-2 md:mb-3 text-xl md:text-3xl text-90 relative

2
src/pages/posts/[...slug].astro
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}> <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> <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 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 --> <!-- word count and reading time -->

4
src/styles/main.css
View File

@@ -3,9 +3,13 @@
@layer components { @layer components {
.card-base { .card-base {
@apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition; @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); backdrop-filter: blur(12px);
-webkit-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 { h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
@apply transition; @apply transition;
} }

2
src/utils/setting-utils.ts
View File

@@ -45,7 +45,7 @@ export function setRainbowSpeed(speed: number): void {
export function getBgBlur(): number { export function getBgBlur(): number {
const stored = localStorage.getItem("bg-blur"); 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 { export function setBgBlur(blur: number): void {