feat: post styles and transition improvements

(cherry picked from commit 53d2c803be5c9bc81ed1705d7053a8fde8bafe27)

src/components/GlobalStyles.astro

@@ -50,7 +50,7 @@ rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30)
   --radius-large 16px
 
   --banner-height-home 60vh
-  --banner-height 50vh
+  --banner-height 40vh
 
 color_set({
   --primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue))
@@ -78,7 +78,12 @@ color_set({
 
   --line-color: black(0.1) white(0.1)
   --meta-divider: black(0.2) white(0.2)
+
+  --inline-code-bg: var(--btn-regular-bg)
+  --inline-code-color: var(--btn-content)
   --selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue))
+  --codeblock-selection: oklch(0.40 0.08 var(--hue))
+  --codeblock-bg: oklch(0.2 0.015 var(--hue)) oklch(0.17 0.015 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))

src/components/TitleCardNew.astro

@@ -28,19 +28,19 @@ import I18nKey from "../i18n/i18nKey";
 // cover = null;
 const hasCover = cover !== undefined && cover !== null && cover !== '';
 
-const coverWidth = "30%";
+const coverWidth = "28%";
 
 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={[" 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}]}>
+    <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}]}>
         <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)]
         before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
-        before:absolute md:before:top-[35px] before:left-5
+        before:absolute md:before:top-[35px] before:left-[18px]
         ">
             {title}
         </a>

src/components/widget/DisplaySetting.astro

@@ -72,6 +72,10 @@ const enableBanner = getConfig().banner.enable;
         border-radius: 4px;
         background: rgba(255, 255, 255, 0.7);
         box-shadow: none;
+
+.banner-closed
+  #display-setting
+    border-width: 3px
 </style>
 
 <style>