feat: style improvements

(cherry picked from commit e308bedff591263b33155cb222108915bf980e51)

src/components/GlobalStyles.astro

@@ -53,12 +53,14 @@ rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30)
   --banner-height 50vh
 
 color_set({
-  --primary: oklch(0.70 0.14 var(--hue))
+  --primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue))
-  --card-bg: white oklch(0.25 0.02 var(--hue))
+  --card-bg: white oklch(0.23 0.015 var(--hue))
 
   --btn-content: oklch(0.55 0.12 var(--hue)) oklch(0.75 0.1 var(--hue))
 
-  --btn-regular-bg: oklch(0.95 0.025 var(--hue)) oklch(0.38 0.04 var(--hue))
+  --btn-regular-bg: oklch(0.95 0.025 var(--hue)) oklch(0.33 0.035 var(--hue))
+  --btn-regular-bg-hover: oklch(0.9 0.05 var(--hue)) oklch(0.38 0.04 var(--hue))
+  --btn-regular-bg-active: oklch(0.85 0.08 var(--hue)) oklch(0.43 0.045 var(--hue))
 
   --btn-plain-bg-hover: oklch(0.95 0.025 var(--hue)) oklch(0.2 0.02 var(--hue))
   --btn-plain-bg-active: oklch(0.98 0.01 var(--hue)) oklch(0.17 0.017 var(--hue))
@@ -66,6 +68,10 @@ color_set({
   --btn-card-bg-hover: oklch(0.96 0.015 var(--hue)) oklch(0.3 0.03 var(--hue))
   --btn-card-bg-active: oklch(0.9 0.03 var(--hue)) oklch(0.35 0.035 var(--hue))
 
+  --enter-btn-bg: var(--btn-regular-bg)
+  --enter-btn-bg-hover: var(--btn-regular-bg-hover)
+  --enter-btn-bg-active: var(--btn-regular-bg-active)
+
   --deep-text: oklch(0.25 0.02 var(--hue))
 
   --line-divider: black(0.08) white(0.08)
@@ -74,7 +80,13 @@ color_set({
   --meta-divider: black(0.2) white(0.2)
   --selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue))
 
+  --link-hover: oklch(0.95 0.025 var(--hue)) oklch(0.40 0.08 var(--hue))
+  --link-active: oklch(0.90 0.05 var(--hue)) oklch(0.35 0.07 var(--hue))
+
   --color-selection-bar: rainbow-light rainbow-dark
+
+  --display-light-icon: 1 0
+  --display-dark-icon: 0 1
 })
 
 
@@ -98,5 +110,8 @@ color_set({
     .card-shadow {
         @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-[6px] -m-[6px];
+    }
 }
 </style>

src/components/Navbar.astro

@@ -23,7 +23,10 @@ const className = Astro.props.class;
             <Button class="rounded-lg" id="display-settings-switch" iconName="material-symbols:palette-outline" iconSize={20} isIcon light></Button>
         </div>
         <div>
-            <Button class="rounded-lg" id="scheme-switch" iconName="material-symbols:wb-sunny-outline-rounded" iconSize={20} isIcon light></Button>
+            <Button class="rounded-lg flex items-center justify-center" id="scheme-switch" light height="44px" width="44px">
+                <Icon name="material-symbols:wb-sunny-outline-rounded" size={20} class="absolute opacity-[var(--display-light-icon)]"></Icon>
+                <Icon name="material-symbols:dark-mode-outline-rounded" size={20} class="absolute opacity-[var(--display-dark-icon)]"></Icon>
+            </Button>
         </div>
     </div>
     <DisplaySetting></DisplaySetting>

src/components/PostMetadata.astro

@@ -33,7 +33,7 @@ const className = Astro.props.class;
                     class="with-divider"
             >
                 <a href=`/archive/category/${category}`
-                   class="transition text-black/50 dark:text-white/50 text-sm font-medium
+                   class="link transition text-black/50 dark:text-white/50 text-sm font-medium
                                 hover:text-[var(--primary)] dark:hover:text-[var(--primary)]">
                     {category}
                 </a>
@@ -53,7 +53,7 @@ const className = Astro.props.class;
                     class="with-divider"
             >
                 <a href=`/archive/tag/${tag}`
-                   class="transition text-black/50 dark:text-white/50 text-sm font-medium
+                   class="link transition text-black/50 dark:text-white/50 text-sm font-medium
                                 hover:text-[var(--primary)] dark:hover:text-[var(--primary)]">
                     {tag}
                 </a>

src/components/TitleCardNew.astro

@@ -18,6 +18,7 @@ const className = Astro.props.class;
 import ImageBox from "./misc/ImageBox.astro";
 import ButtonTag from "./control/ButtonTag.astro";
 import { Icon } from 'astro-icon/components';
+import Button from "./control/Button.astro";
 
 // tags = ['Foo', 'Bar', 'Baz', 'Qux', 'Quux'];
 
@@ -30,14 +31,14 @@ const coverWidth = "30%";
 const { remarkPluginFrontmatter } = await entry.render();
 
 ---
-<div class:list={["card-base flex flex-col-reverse lg: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={[" px-10 pt-4 lg:pt-7 pb-6 relative", {'w-full': !hasCover, "w-full lg:w-[calc(100%_-_var(--coverWidth))]": hasCover}]}>
+    <div class:list={[" px-10 pt-4 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth))]": hasCover}]}>
         <a href={url}
-           class="transition w-full block font-bold mb-3 text-4xl
+           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)]
         before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
-        before:absolute before:top-[26px] lg:before:top-[38px] before:left-5
+        before:absolute md:before:top-[35px] before:left-5
         ">
             {title}
         </a>
@@ -59,18 +60,30 @@ const { remarkPluginFrontmatter } = await entry.render();
 
     {hasCover && <a href={url}
                     class:list={["group",
-                        "max-h-[20vh] lg:max-h-none mx-4 mt-4 lg:mx-0 lg:mt-0",
+                        "max-h-[20vh] md:max-h-none mx-4 mt-4 md:mx-0 md:mt-0",
-                        "lg:w-[var(--coverWidth)] relative lg:absolute lg:top-3 lg:bottom-3 lg:right-3 rounded-xl overflow-hidden"
+                        "md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden"
                     ]} >
         <div class="absolute z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
         <div class="absolute z-20 w-full h-full flex items-center justify-center ">
             <Icon name="material-symbols:chevron-right-rounded"
-                  class="transition opacity-0 group-hover:opacity-100 text-white text-5xl"></Icon>
+                  class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
+            </Icon>
         </div>
         <ImageBox src={cover}
                   class="w-full h-full">
         </ImageBox>
     </a>}
+
+    {!hasCover &&
+        <a href={url} class="hidden md:block">
+            <Button 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)]">
+                <Icon name="material-symbols:chevron-right-rounded"
+                      class="transition text-[var(--primary)] text-4xl mx-auto">
+                </Icon>
+            </Button>
+        </a>
+    }
+
 </div>
 
 <style lang="stylus" define:vars={{coverWidth}}>

src/components/control/Button.astro

@@ -51,13 +51,10 @@ import { Icon } from 'astro-icon/components';
         'dark:hover:text-[var(--primary)]': light,
 
         'bg-[var(--btn-regular-bg)]': regular,
-        'hover:bg-[oklch(0.9_0.05_var(--hue))]': regular,
+        'hover:bg-[var(--btn-regular-bg-hover)]': regular,
-        'active:bg-[oklch(0.85_0.08_var(--hue))]': regular,
+        'active:bg-[var(--btn-regular-bg-active)]': regular,
         'text-[var(--btn-content)]': regular,
 
-        'dark:bg-[oklch(0.38_0.04_var(--hue))]': regular,
-        'dark:hover:bg-[oklch(0.45_0.045_var(--hue))]': regular,
-        'dark:active:bg-[oklch(0.5_0.05_var(--hue))]': regular,
 
         'bg-[var(--card-bg)]': card,
         'enabled:hover:bg-[var(--btn-card-bg-hover)]': card,

src/content/posts/example.md

@@ -1,5 +1,5 @@
 ---
-title: 'My First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog Post'
+title: 'My First Blog Post'
 pubDate: 2022-10-01
 description: 'This is the first post of my new Astro blog.'
 author: 'Astro Learner'

src/pages/posts/[slug].astro

@@ -30,6 +30,7 @@ const enableBanner = getConfig().banner.enable;
         <div class:list={["card-base z-10 px-9 py-6 relative w-full ",
             {}
         ]}>
+            <!-- word count and reading time -->
             <div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition">
                 <div class="flex flex-row items-center">
                     <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
@@ -44,16 +45,20 @@ const enableBanner = getConfig().banner.enable;
                     <div class="text-sm">{remarkPluginFrontmatter.minutes} minutes</div>
                 </div>
             </div>
+
+            <!-- title -->
             <div class="relative">
                 <div
-                        class="transition w-full block font-bold mb-3 text-4xl
+                        class="transition w-full block font-bold mb-3 text-[40px]/[44px]
                 text-black/90 dark:text-white/90
                 before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
-                before:absolute before:top-[10px] before:left-[-18px]
+                before:absolute before:top-[12px] before:left-[-18px]
                 ">
                     {entry.data.title}
                 </div>
             </div>
+
+            <!-- metadata -->
             <PostMetadata
                     class="mb-5"
                     pubDate={entry.data.pubDate}