From 2b000f7e5564e86260ee91719e0a82bf2420d497 Mon Sep 17 00:00:00 2001
From: saicaca <zephyird@gmail.com>
Date: Mon, 6 Nov 2023 21:56:53 +0800
Subject: [PATCH] fix: style improvements for mobile view

---
 src/components/TitleCardNew.astro | 6 +++---
 src/layouts/Layout.astro          | 2 +-
 src/layouts/MainGridLayout.astro  | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/TitleCardNew.astro b/src/components/TitleCardNew.astro
index 154afab..e9d400e 100644
--- a/src/components/TitleCardNew.astro
+++ b/src/components/TitleCardNew.astro
@@ -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={["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}
            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 md:before:top-[35px] before:left-[18px]
+        before:absolute before:top-[32px] md:before:top-[35px] before:left-[18px]
         ">
             {title}
         </a>
@@ -59,7 +59,7 @@ const { remarkPluginFrontmatter } = await entry.render();
 
     {hasCover && <a href={url} aria-label={title}
                     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"
                     ]} >
         <div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d19ce51..0f9144b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -129,7 +129,7 @@ if (title) {
 
 @layer components {
 	.banner-home {
-		@apply h-[var(--banner-height-home)]
+		@apply h-[var(--banner-height)] md:h-[var(--banner-height-home)]
 	}
 	.banner-else {
 		@apply h-[var(--banner-height)]
diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
index 21d0576..a3e9259 100644
--- a/src/layouts/MainGridLayout.astro
+++ b/src/layouts/MainGridLayout.astro
@@ -27,7 +27,7 @@ const enableBanner = siteConfig.banner.enable;
      transition:animate="none"
 >
     <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,}]}
     >
         <Navbar transition:animate="fade" transition:persist></Navbar>