CapaCake/milkblogs-fuwari
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: much better mobile view design (#11)

Browse Source
This commit is contained in:
saica.go
2024-01-22 02:06:24 +08:00
committed by GitHub
parent 6ba4db0ef8
commit 025953bca3
15 changed files with 50 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TitleCardNew.astro
+5 -5
View File
@@ -33,20 +33,20 @@ 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]}>
<div class:list={["pl-9 pr-9 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}]}>
<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 w-full block font-bold mb-3 text-3xl
text-black/90 dark:text-white/90
hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
before:absolute before:top-[32px] md:before:top-[35px] before:left-[18px]
before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
">
{title}
{title}<Icon class="inline text-[var(--primary)] md:hidden -translate-y-[0.15rem]" name="material-symbols:chevron-right-rounded" size={28} ></Icon>
</a>
<!-- metadata -->
<PostMetadata published={published} tags={tags} category={category} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>
<PostMetadata published={published} tags={tags} category={category} hideTagsForMobile={true} class:list={{"mb-4": description, "mb-6": !description}}></PostMetadata>
<div class="transition text-black/75 dark:text-white/75 mb-3.5">
{ description }
@@ -85,8 +85,8 @@ const { remarkPluginFrontmatter } = await entry.render();
</Button>
</a>
}
</div>
<div class="transition border-t-[1px] border-dashed mx-6 border-black/10 dark:border-white/[0.15] last:border-t-0 md:hidden"></div>
<style lang="stylus" define:vars={{coverWidth}}>
:root