Ad-closeNN/blog-fuwari
1
0
Fork 0
mirror of https://github.com/Ad-closeNN/blog-fuwari.git synced 2026-05-31 01:20:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

style: 新增卡片缩放效果

Browse Source
This commit is contained in:
Ad-closeNN
2026-03-03 19:16:13 +08:00
parent 71226be673
commit 0cdf41e5b7
3 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PostCard.astro
+1 -1
View File
@@ -43,7 +43,7 @@ const coverWidth = "28%";
const { remarkPluginFrontmatter } = await entry.render();
---
<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative hover:scale-[1.02] hover:shadow-xl transition-all duration-[600ms]", className]} style={style}>
<div class:list={["pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
<a href={url}
class="transition group w-full block font-bold mb-3 text-3xl text-90
src/components/PostPage.astro
+1 -1
View File
@@ -8,7 +8,7 @@ const { page } = Astro.props;
let delay = 0;
const interval = 50;
---
<div class="transition flex flex-col rounded-[var(--radius-large)] bg-[var(--card-bg)] py-1 md:py-0 md:bg-transparent md:gap-4 mb-4">
<div class="transition flex flex-col rounded-[var(--radius-large)] bg-[var(--card-bg)] py-1 md:py-0 md:bg-transparent md:gap-4 mb-8 overflow-visible">
{page.data.map((entry: CollectionEntry<"posts">) => (
<PostCard
entry={entry}
src/layouts/MainGridLayout.astro
+1 -1
View File
@@ -82,7 +82,7 @@ const mainPanelTop = siteConfig.banner.enable
<SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation" headings={headings}></SideBar>
<main id="swup-container" class="transition-swup-fade col-span-2 lg:col-span-1 overflow-hidden">
<main id="swup-container" class="transition-swup-fade col-span-2 lg:col-span-1 overflow-visible">
<div id="content-wrapper" class="onload-animation">
<!-- the overflow-hidden here prevent long text break the layout-->
<!-- make id different from windows.swup global property -->