From e428b1d5a53ecdbc8322fede4bb4e052f9fbfdb8 Mon Sep 17 00:00:00 2001
From: saicaca <zephyird@gmail.com>
Date: Mon, 22 Jan 2024 11:25:56 +0800
Subject: [PATCH] feat: mobile style improvements

---
 src/components/ArchivePanel.astro  |  2 +-
 src/components/Footer.astro        |  2 +-
 src/components/GlobalStyles.astro  |  6 ++---
 src/components/Navbar.astro        |  2 +-
 src/components/PostMetadata.astro  |  2 +-
 src/components/TitleCardNew.astro  |  2 +-
 src/components/misc/Markdown.astro | 40 ++++++++++++++++++++----------
 src/layouts/MainGridLayout.astro   |  6 ++---
 src/pages/about.astro              |  2 +-
 src/pages/posts/[...slug].astro    | 12 ++++-----
 10 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/src/components/ArchivePanel.astro b/src/components/ArchivePanel.astro
index 5b040d1..59e973e 100644
--- a/src/components/ArchivePanel.astro
+++ b/src/components/ArchivePanel.astro
@@ -65,7 +65,7 @@ function formatTag(tag: string[]) {
     {
         groups.map(group => (
                 <div>
-                    <div class="flex flex-row w-full items-center h-[60px]">
+                    <div class="flex flex-row w-full items-center h-[3.75rem]">
                         <div class="w-[15%] md:w-[10%] transition text-2xl font-bold text-right text-black/75 dark:text-white/75">{group.year}</div>
                         <div class="w-[15%] md:w-[10%]">
                             <div class="h-3 w-3 bg-none rounded-full outline outline-[var(--primary)] mx-auto -outline-offset-[2px] z-50 outline-3"></div>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 37fb507..f048c79 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -4,7 +4,7 @@ import {profileConfig} from "../config";
 
 ---
 
-<div class="card-base max-w-[var(--page-width)] min-h-[72px] rounded-b-none mx-auto flex items-center px-6">
+<div class="card-base max-w-[var(--page-width)] min-h-[4.5rem] rounded-b-none mx-auto flex items-center px-6">
     <div class="text-black/50 dark:text-white/50 text-sm">
         © 2023 {profileConfig.name}. All Rights Reserved.
         <br>
diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro
index a009b25..1da7378 100644
--- a/src/components/GlobalStyles.astro
+++ b/src/components/GlobalStyles.astro
@@ -47,7 +47,7 @@ rainbow-light = linear-gradient(to right, oklch(0.80 0.10 0), oklch(0.80 0.10 30
 rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30), oklch(0.70 0.10 60), oklch(0.70 0.10 90), oklch(0.70 0.10 120), oklch(0.70 0.10 150), oklch(0.70 0.10 180), oklch(0.70 0.10 210), oklch(0.70 0.10 240), oklch(0.70 0.10 270), oklch(0.70 0.10 300), oklch(0.70 0.10 330), oklch(0.70 0.10 360))
 
 :root
-  --radius-large 16px
+  --radius-large 1rem
 
   --banner-height-home 60vh
   --banner-height 40vh
@@ -184,10 +184,10 @@ color_set({
         @apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
     }
     .link {
-        @apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-[4px] -m-[4px];
+        @apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1 -m-1;
     }
     .link-lg {
-        @apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-[6px] -m-[6px];
+        @apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-1.5 -m-1.5;
     }
     .float-panel {
         @apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 9d56afd..8281b45 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -44,7 +44,7 @@ function getLinkPresetInfo(p: LinkPreset): NavBarLink {
 <div transition:animate="none" class:list={[
     className,
     "card-base sticky top-0 overflow-visible max-w-[var(--page-width)] h-[4.5rem] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
-    <a href="/page/1"><Button height="52px" class="px-5 font-bold rounded-lg active:scale-95" light>
+    <a href="/page/1"><Button height="3.25rem" class="px-5 font-bold rounded-lg active:scale-95" light>
         <div class="flex flex-row text-[var(--primary)] items-center text-md">
             <Icon name="material-symbols:home-outline-rounded" size={"1.75rem"} class="mb-1 mr-2" />
             {siteConfig.title}
diff --git a/src/components/PostMetadata.astro b/src/components/PostMetadata.astro
index 7303516..c4b5325 100644
--- a/src/components/PostMetadata.astro
+++ b/src/components/PostMetadata.astro
@@ -70,7 +70,7 @@ const className = Astro.props.class;
         text-[var(--btn-content)] mr-2
     }
     .with-divider {
-        @apply before:content-['/'] before:mx-[6px] before:text-[var(--meta-divider)] before:text-sm
+        @apply before:content-['/'] before:ml-1.5 before:mr-0.5 before:text-[var(--meta-divider)] before:text-sm
         before:font-medium before:first-of-type:hidden before:transition
     }
 }
diff --git a/src/components/TitleCardNew.astro b/src/components/TitleCardNew.astro
index 95b3aa6..dd5ad30 100644
--- a/src/components/TitleCardNew.astro
+++ b/src/components/TitleCardNew.astro
@@ -78,7 +78,7 @@ const { remarkPluginFrontmatter } = await entry.render();
 
     {!hasCover &&
         <a href={url} aria-label={title} class="hidden md:block">
-            <Button name="Enter the Post" width="52px" height="full" class="absolute right-3 top-3 bottom-3 rounded-xl bg-[var(--enter-btn-bg)] hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95">
+            <Button name="Enter the Post" width="3.25rem" height="full" class="absolute right-3 top-3 bottom-3 rounded-xl bg-[var(--enter-btn-bg)] hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95">
                 <Icon name="material-symbols:chevron-right-rounded"
                       class="transition text-[var(--primary)] text-4xl mx-auto">
                 </Icon>
diff --git a/src/components/misc/Markdown.astro b/src/components/misc/Markdown.astro
index 6ef732f..a569330 100644
--- a/src/components/misc/Markdown.astro
+++ b/src/components/misc/Markdown.astro
@@ -5,7 +5,7 @@ interface Props {
 }
 const className = Astro.props.class;
 ---
-<div class=`prose dark:prose-invert prose-sm md:prose-base max-w-none custom-md ${className}`>
+<div class=`prose dark:prose-invert prose-base max-w-none custom-md ${className}`>
     <!--<div class="prose dark:prose-invert max-w-none custom-md">-->
     <!--<div class="max-w-none custom-md">-->
     <slot />
@@ -15,9 +15,9 @@ const className = Astro.props.class;
   .custom-md
     h1,h2,h3,h4,h5,h6
       .anchor
-        margin: -2px
+        margin: -0.125rem
         margin-left: 0.2ch
-        padding: 2px
+        padding: 0.125rem
         user-select: none
         opacity: 0
         transition: opacity 0.15s ease-in-out, background 0.15s ease-in-out
@@ -30,9 +30,9 @@ const className = Astro.props.class;
     a
       position: relative
       background: none
-      margin: -4px
-      padding: 4px
-      border-radius: 6px
+      margin: -0.25rem
+      padding: 0.25rem
+      border-radius: 0.375rem
       color: var(--primary)
       text-decoration-line: none;
       /*&:after*/
@@ -56,8 +56,8 @@ const className = Astro.props.class;
       font-family: JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
       background: var(--inline-code-bg)
       color: var(--inline-code-color)
-      padding: 2px 4px
-      border-radius: 4px
+      padding: 0.125rem 0.25rem
+      border-radius: 0.25rem
       overflow: hidden
       &:before
         content: none
@@ -65,9 +65,9 @@ const className = Astro.props.class;
         content: none
     pre
       background: var(--codeblock-bg) !important
-      border-radius: 12px
-      padding-left: 20px
-      padding-right: 20px
+      border-radius: 0.75rem
+      padding-left: 1.25rem
+      padding-right: 1.25rem
       code
         color: unset
         font-size: 0.875rem
@@ -106,13 +106,27 @@ const className = Astro.props.class;
         &:after
           content: none
     img
-      border-radius: 12px
+      border-radius: 0.75rem
     hr
       border-color: var(--line-divider)
       border-style: dashed
     iframe
-      border-radius: 12px
+      border-radius: 0.75rem
       margin-left: auto
       margin-right: auto
       max-width: 100%
+</style>
+
+<style lang="css" is:global>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+    .custom-md h1 {
+        @apply text-3xl
+
+    }
+}
+
 </style>
\ No newline at end of file
diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
index 2d4b68b..64f1be3 100644
--- a/src/layouts/MainGridLayout.astro
+++ b/src/layouts/MainGridLayout.astro
@@ -27,8 +27,8 @@ 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)_-_72px)] md:h-[calc(var(--banner-height-home)_-_72px)]': enableBanner && isHomePage,
-        'h-[calc(var(--banner-height)_-_72px)]': enableBanner && !isHomePage,}]}
+        'h-[calc(var(--banner-height)_-_4.5rem)] md:h-[calc(var(--banner-height-home)_-_4.5rem)]': enableBanner && isHomePage,
+        'h-[calc(var(--banner-height)_-_4.5rem)]': enableBanner && !isHomePage,}]}
     >
         <Navbar transition:animate="fade" transition:persist></Navbar>
     </div>
@@ -70,5 +70,5 @@ html::view-transition-new(rrrr) {
 <style lang="stylus" is:global>
 .banner-closed
     #top-row
-      height: 72px;
+      height: 4.5rem;
 </style>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 08f365a..bcb52e2 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -13,7 +13,7 @@ const { Content } = await aboutPost.render()
 
 ---
 <MainGridLayout title={i18n(I18nKey.about)}>
-    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-[120px]">
+    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
         <div class="card-base z-10 px-9 py-6 relative w-full ">
             <Markdown class="mt-2">
                 <Content />
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 3d4eed1..bfba41b 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -53,10 +53,10 @@ const { remarkPluginFrontmatter } = await entry.render();
             <div class="relative">
                 <div
                     class="transition w-full block font-bold mb-3
-                    text-3xl md:text-[40px]/[44px]
+                    text-3xl md:text-[2.5rem]/[2.75rem]
                     text-black/90 dark:text-white/90
                     md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
-                    before:absolute before:top-[12px] before:left-[-18px]
+                    before:absolute before:top-[0.75rem] before:left-[-1.125rem]
                 ">
                     {entry.data.title}
                 </div>
@@ -89,17 +89,17 @@ const { remarkPluginFrontmatter } = await entry.render();
 
     <div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
         <a href={getPostUrlBySlug(entry.data.nextSlug)} class="w-full font-bold overflow-hidden active:scale-95">
-            {entry.data.nextSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-start gap-4" card height="60px">
+            {entry.data.nextSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-start gap-4" card height="3.75rem">
                 <Icon name="material-symbols:chevron-left-rounded" size={32} class="text-[var(--primary)]" />
-                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
+                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
                     {entry.data.nextTitle}
                 </div>
             </Button>}
         </a>
 
         <a href={getPostUrlBySlug(entry.data.prevSlug)} class="w-full font-bold overflow-hidden active:scale-95">
-            {entry.data.prevSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-end gap-4" card height="60px">
-                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
+            {entry.data.prevSlug && <Button class="w-full max-w-full h-10 px-4 rounded-2xl flex items-center justify-end gap-4" card height="3.75rem">
+                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
                     {entry.data.prevTitle}
                 </div>
                 <Icon name="material-symbols:chevron-right-rounded" size={32} class="text-[var(--primary)]" />