From 3798fd6b64b7c0c9f1a1ca7698550663cbc13e1f Mon Sep 17 00:00:00 2001
From: saicaca <zephyird@gmail.com>
Date: Wed, 8 Nov 2023 10:36:59 +0800
Subject: [PATCH] fix: style improvements

---
 src/components/GlobalStyles.astro          | 8 ++++++++
 src/components/PostMetadata.astro          | 4 ++--
 src/components/misc/Markdown.astro         | 1 +
 src/components/widget/DisplaySetting.astro | 4 +---
 src/components/widget/NavMenuPanel.astro   | 6 ++----
 src/components/widget/Profile.astro        | 4 ++--
 src/layouts/MainGridLayout.astro           | 2 +-
 7 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro
index a135aa2..b9a3896 100644
--- a/src/components/GlobalStyles.astro
+++ b/src/components/GlobalStyles.astro
@@ -93,6 +93,8 @@ color_set({
   --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))
 
+  --float-panel-bg: white oklch(0.19 0.015 var(--hue))
+
   --color-selection-bar: rainbow-light rainbow-dark
 
   --display-light-icon: 1 0
@@ -121,7 +123,13 @@ 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];
+    }
+    .link-lg {
         @apply transition hover:bg-[var(--link-hover)] active:bg-[var(--link-active)] rounded-md p-[6px] -m-[6px];
     }
+    .float-panel {
+        @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/PostMetadata.astro b/src/components/PostMetadata.astro
index edb0690..2db87ef 100644
--- a/src/components/PostMetadata.astro
+++ b/src/components/PostMetadata.astro
@@ -36,7 +36,7 @@ const className = Astro.props.class;
                     class="with-divider"
             >
                 <a href=`/archive/category/${category}` aria-label=`View all posts in the ${category} category`
-                   class="link transition text-black/50 dark:text-white/50 text-sm font-medium
+                   class="link-lg transition text-black/50 dark:text-white/50 text-sm font-medium
                                 hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
                     {category}
                 </a>
@@ -56,7 +56,7 @@ const className = Astro.props.class;
                     class="with-divider"
             >
                 <a href=`/archive/tag/${tag}` aria-label=`View all posts with the ${tag} tag`
-                   class="link transition text-black/50 dark:text-white/50 text-sm font-medium
+                   class="link-lg transition text-black/50 dark:text-white/50 text-sm font-medium
                                 hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
                     {tag}
                 </a>
diff --git a/src/components/misc/Markdown.astro b/src/components/misc/Markdown.astro
index 6fb94da..6e31fdc 100644
--- a/src/components/misc/Markdown.astro
+++ b/src/components/misc/Markdown.astro
@@ -70,6 +70,7 @@ const className = Astro.props.class;
           color: var(--primary)
     blockquote
       font-style: normal
+      font-weight: inherit
       border-left-color: rgba(0,0,0,0)
       position: relative;
       &:before
diff --git a/src/components/widget/DisplaySetting.astro b/src/components/widget/DisplaySetting.astro
index a84c440..057a000 100644
--- a/src/components/widget/DisplaySetting.astro
+++ b/src/components/widget/DisplaySetting.astro
@@ -6,9 +6,7 @@ import {siteConfig} from "../../config";
 const enableBanner = siteConfig.banner.enable;
 
 ---
-<div id="display-setting" class:list={["card-base closed absolute transition-all w-[320px] fixed right-4 border-[var(--primary)] px-4 py-4",
-    {"border-[3px]": !enableBanner}
-]}>
+<div id="display-setting" class:list={["float-panel closed absolute transition-all w-[320px] fixed right-4 px-4 py-4"]}>
     <div class="flex flex-row gap-2 mb-3 items-center justify-between">
         <div class="font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
             before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
diff --git a/src/components/widget/NavMenuPanel.astro b/src/components/widget/NavMenuPanel.astro
index 6f499e2..590d24e 100644
--- a/src/components/widget/NavMenuPanel.astro
+++ b/src/components/widget/NavMenuPanel.astro
@@ -12,11 +12,9 @@ const links = Astro.props.links;
 const enableBanner = siteConfig.banner.enable;
 
 ---
-<div id="nav-menu-panel" class:list={["card-base closed absolute transition-all fixed right-4 border-[var(--primary)] px-2 py-2",
-    {"border-[3px]": !enableBanner}
-]}>
+<div id="nav-menu-panel" class:list={["float-panel closed absolute transition-all fixed right-4 px-2 py-2"]}>
     {links.map((link) => (
-        <a href={link.url} class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-md gap-8
+        <a href={link.url} class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-lg gap-8
             hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
         "
            target={link.external ? "_blank" : null}
diff --git a/src/components/widget/Profile.astro b/src/components/widget/Profile.astro
index eaa647d..eae10f5 100644
--- a/src/components/widget/Profile.astro
+++ b/src/components/widget/Profile.astro
@@ -12,13 +12,13 @@ const config = profileConfig;
 
 ---
 <div class="card-base">
-    <a aria-label="Go to About Page" href="/about" class="group block relative m-3 overflow-hidden rounded-xl active:scale-95">
+    <a aria-label="Go to About Page" href="/about" class="group block relative mx-auto mt-4 lg:mx-3 lg:mt-3 mb-3 max-w-[240px] lg:max-w-none overflow-hidden rounded-xl active:scale-95">
         <div class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50 w-full h-full z-50 flex items-center justify-center">
             <Icon name="fa6-regular:address-card"
                   class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
             </Icon>
         </div>
-        <ImageBox src={config.avatar} alt="Profile Image of the Author" class="mt-1 mx-auto w-[240px] lg:w-full h-full lg:mt-0 "></ImageBox>
+        <ImageBox src={config.avatar} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageBox>
     </a>
     <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
     <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
index a3e9259..799aeb3 100644
--- a/src/layouts/MainGridLayout.astro
+++ b/src/layouts/MainGridLayout.astro
@@ -23,7 +23,7 @@ const enableBanner = siteConfig.banner.enable;
 
 <Layout title={title} banner={banner}>
 <div class=`max-w-[var(--page-width)] min-h-screen grid grid-cols-[280px_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto] 
-    mx-auto gap-4 relative  md:px-4 lg:px-0`
+    mx-auto gap-4 relative px-3 md:px-4 lg:px-0`
      transition:animate="none"
 >
     <div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={["transition-all", {