Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: style improvements for mobile view

This commit is contained in:
saicaca 2023-11-06 21:56:53 +08:00
parent b64cf8eee3
commit 2b000f7e55
3 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/TitleCardNew.astro
View File

@ -30,14 +30,14 @@ 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={["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-4 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-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}]}>
<a href={url} <a href={url}
class="transition w-full block font-bold mb-3 text-3xl class="transition w-full block font-bold mb-3 text-3xl
text-black/90 dark:text-white/90 text-black/90 dark:text-white/90
hover:text-[var(--primary)] dark:hover:text-[var(--primary)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
active:text-[var(--title-active)] dark:active:text-[var(--title-active)] 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:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
before:absolute md:before:top-[35px] before:left-[18px] before:absolute before:top-[32px] md:before:top-[35px] before:left-[18px]
"> ">
{title} {title}
</a> </a>
@ -59,7 +59,7 @@ const { remarkPluginFrontmatter } = await entry.render();
{hasCover && <a href={url} aria-label={title} {hasCover && <a href={url} aria-label={title}
class:list={["group", class:list={["group",
"max-h-[20vh] md:max-h-none mx-4 mt-4 md:mx-0 md:mt-0", "max-h-[20vh] md:max-h-none mx-4 mt-4 -mb-2 md:mb-0 md:mx-0 md:mt-0",
"md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95" "md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95"
]} > ]} >
<div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div> <div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>

2
src/layouts/Layout.astro
View File

@ -129,7 +129,7 @@ if (title) {
@layer components { @layer components {
.banner-home { .banner-home {
@apply h-[var(--banner-height-home)] @apply h-[var(--banner-height)] md:h-[var(--banner-height-home)]
} }
.banner-else { .banner-else {
@apply h-[var(--banner-height)] @apply h-[var(--banner-height)]

2
src/layouts/MainGridLayout.astro
View File

@ -27,7 +27,7 @@ const enableBanner = siteConfig.banner.enable;
transition:animate="none" transition:animate="none"
> >
<div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={["transition-all", { <div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={["transition-all", {
'h-[calc(var(--banner-height-home)_-_72px)]': enableBanner && isHomePage, 'h-[calc(var(--banner-height)_-_72px)] md:h-[calc(var(--banner-height-home)_-_72px)]': enableBanner && isHomePage,
'h-[calc(var(--banner-height)_-_72px)]': enableBanner && !isHomePage,}]} 'h-[calc(var(--banner-height)_-_72px)]': enableBanner && !isHomePage,}]}
> >
<Navbar transition:animate="fade" transition:persist></Navbar> <Navbar transition:animate="fade" transition:persist></Navbar>