feat: mobile style improvements

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>

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>

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

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}

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
     }
 }

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>

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>