mirror of
https://github.com/afoim/fuwari.git
synced 2026-01-31 00:53:19 +08:00
style(组件): 简化卡片组件的样式类名并移除边框
移除 PostCard 和文章页卡片组件的边框样式,简化 class 列表 统一使用 card-base 和 card-hover 基础样式类
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user