feat: style and animation improvements

(cherry picked from commit 69deabde36f96a96bc3c69775fa5a9b4eead0f01)

src/components/GlobalStyles.astro

@@ -63,10 +63,10 @@ color_set({
   --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-hover: oklch(0.95 0.025 var(--hue)) oklch(0.17 0.017 var(--hue))
-  --btn-plain-bg-active: oklch(0.98 0.01 var(--hue)) oklch(0.17 0.017 var(--hue))
+  --btn-plain-bg-active: oklch(0.98 0.01 var(--hue)) oklch(0.19 0.017 var(--hue))
 
-  --btn-card-bg-hover: oklch(0.96 0.015 var(--hue)) oklch(0.3 0.03 var(--hue))
+  --btn-card-bg-hover: oklch(0.98 0.005 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)

src/components/Navbar.astro

@@ -22,7 +22,7 @@ function getLinkName(name: string) {
 <div transition:animate="none" class:list={[
     className,
     "card-base sticky top-0 overflow-visible max-w-[var(--page-width)] h-[72px] 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" light>
+    <a href="/page/1"><Button height="52px" 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={28} class="mb-1 mr-2" />
             {getConfig().title}
@@ -30,15 +30,15 @@ function getLinkName(name: string) {
     </Button></a>
     <div>
         {Object.keys(getConfig().menu).map((key) => {
-            return <a href={getConfig().menu[key]}><Button light class="font-bold px-5 rounded-lg">{getLinkName(key)}</Button></a>
+            return <a href={getConfig().menu[key]}><Button light class="font-bold px-5 rounded-lg active:scale-95">{getLinkName(key)}</Button></a>
         })}
     </div>
     <div class="flex">
         <div>
-            <Button class="rounded-lg" id="display-settings-switch" iconName="material-symbols:palette-outline" iconSize={20} isIcon light></Button>
+            <Button class="rounded-lg active:scale-90" id="display-settings-switch" iconName="material-symbols:palette-outline" iconSize={20} isIcon light></Button>
         </div>
         <div>
-            <Button class="rounded-lg flex items-center justify-center" id="scheme-switch" light height="44px" width="44px">
+            <Button class="rounded-lg flex items-center justify-center active:scale-90" 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>

src/components/PostMetadata.astro

@@ -14,7 +14,7 @@ const {pubDate, tags, categories} = Astro.props;
 const className = Astro.props.class;
 ---
 
-<div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-3", className]}>
+<div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2", className]}>
     <!-- publish date -->
     <div class="flex items-center">
         <div class="meta-icon"

src/components/TitleCardNew.astro

@@ -63,7 +63,7 @@ const { remarkPluginFrontmatter } = await entry.render();
     {hasCover && <a href={url}
                     class:list={["group",
                         "max-h-[20vh] md:max-h-none mx-4 mt-4 md:mx-0 md:mt-0",
-                        "md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md: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 active:scale-95"
                     ]} >
         <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 ">
@@ -78,7 +78,7 @@ const { remarkPluginFrontmatter } = await entry.render();
 
     {!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)]">
+            <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)] active:scale-95">
                 <Icon name="material-symbols:chevron-right-rounded"
                       class="transition text-[var(--primary)] text-4xl mx-auto">
                 </Icon>

src/components/comment/CommentLayout.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<div class="card-base w-full h-[200px]">
+
+</div>

src/components/control/BackToTop.astro

@@ -5,7 +5,7 @@ import Button from "./Button.astro";
 
 <!-- There can't be a filter on parent element, or it will break `fixed` -->
 <div class="back-to-top-wrapper hidden lg:block" transition:persist>
-    <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="topFunction()">
+    <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition active:scale-90" onclick="topFunction()">
         <Button card height="60px" width="60px">
             <Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>
         </Button>

src/components/control/Pagination.astro

@@ -55,7 +55,7 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
 
 <div class:list={[className, "flex flex-row gap-3 justify-center"]}>
     <a href={page.url.prev}>
-        <Button isIcon card iconName="material-symbols:chevron-left-rounded" class="text-[var(--primary)] rounded-lg" iconSize={28}
+        <Button isIcon card iconName="material-symbols:chevron-left-rounded" class:list={["text-[var(--primary)] rounded-lg", {"active:scale-90": page.url.prev != undefined}]} iconSize={28}
                 disabled = {page.url.prev == undefined}
         ></Button>
     </a>
@@ -70,14 +70,14 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
                     {p}
                 </div>
             return <a href={commonUrl + p}>
-                <Button card iconName="material-symbols:chevron-left-rounded" class="rounded-lg" height="44px" width="44px">
+                <Button card iconName="material-symbols:chevron-left-rounded" class="rounded-lg active:scale-[0.85]" height="44px" width="44px">
                     {p}
                 </Button>
             </a>
         })}
     </div>
     <a href={page.url.next}>
-        <Button isIcon card iconName="material-symbols:chevron-right-rounded" class="text-[var(--primary)] rounded-lg" iconSize={28}
+        <Button isIcon card iconName="material-symbols:chevron-right-rounded" class:list={["text-[var(--primary)] rounded-lg", {"active:scale-90": page.url.next != undefined}]} iconSize={28}
                 disabled = {page.url.next == undefined}
         ></Button>
     </a>

src/components/widget/DisplaySetting.astro

@@ -56,22 +56,36 @@ const enableBanner = getConfig().banner.enable;
         border-radius: 2px;
         background: rgba(255, 255, 255, 0.7);
         box-shadow: none;
+        &:hover
+          background: rgba(255, 255, 255, 0.8);
+        &:active
+          background: rgba(255, 255, 255, 0.6);
 
     ::-moz-range-thumb
         -webkit-appearance: none;
-        height: 24px;
+        height: 16px;
-        width: 10px;
+        width: 8px;
-        border-radius: 4px;
+        border-radius: 2px;
         background: rgba(255, 255, 255, 0.7);
         box-shadow: none;
+        &:hover
+          background: rgba(255, 255, 255, 0.8);
+        &:active
+          background: rgba(255, 255, 255, 0.6);
+
 
     &::-ms-thumb
         -webkit-appearance: none;
-        height: 24px;
+        height: 16px;
-        width: 10px;
+        width: 8px;
-        border-radius: 4px;
+        border-radius: 2px;
         background: rgba(255, 255, 255, 0.7);
         box-shadow: none;
+        &:hover
+          background: rgba(255, 255, 255, 0.8);
+        &:active
+          background: rgba(255, 255, 255, 0.6);
+
 
 .banner-closed
   #display-setting

src/components/widget/Profile.astro

@@ -10,15 +10,15 @@ const className = Astro.props
 const vConf = getConfig();
 
 ---
-<div class="card-base" transition:persist>
+<div class="card-base">
-    <ImageBox src={vConf.profile.avatar} class="w-[240px] mt-4 mx-auto lg:w-full lg:mt-0 rounded-2xl mb-3"></ImageBox>
+    <ImageBox src={vConf.profile.avatar} class="mt-4 mx-auto lg:w-full lg:mt-0 rounded-2xl mb-3"></ImageBox>
     <div class="font-bold text-lg text-center mb-1 dark:text-neutral-50 transition">{vConf.profile.author}</div>
     <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-3 transition"></div>
     <div class="text-center text-neutral-400 mb-2 transition">{vConf.profile.subtitle}</div>
     <div class="flex gap-2 mx-2 justify-center mb-4">
         {vConf.profile.links.map(item =>
             <a href={item.url} target="_blank">
-                <Button isIcon iconName={item.icon} regular height="40px" class="rounded-lg"></Button>
+                <Button isIcon iconName={item.icon} regular height="40px" class="rounded-lg active:scale-90"></Button>
             </a>
         )}
     </div>

src/components/widget/SideBar.astro

@@ -7,7 +7,7 @@ import Categories from "./Categories.astro";
 const className = Astro.props.class;
 ---
 <div id="sidebar" class:list={[className, "w-full"]} transition:persist>
-    <div class="flex flex-col w-full gap-4 mb-4">
+    <div class="flex flex-col w-full gap-4 mb-4" transition:animate="none">
         <Profile></Profile>
     </div>
     <div class="flex flex-col w-full gap-4 top-4 sticky top-4" transition:animate="none">
@@ -18,16 +18,4 @@ const className = Astro.props.class;
 </div>
 
 <style>
-#sidebar {
-    view-transition-name: ssss;
-}
-/* TODO temporarily */
-html::view-transition-old(ssss) {
-    mix-blend-mode: normal;
-    animation: none;
-}
-html::view-transition-new(ssss) {
-    mix-blend-mode: normal;
-    animation: none;
-}
 </style>

src/pages/posts/[slug].astro

@@ -9,6 +9,7 @@ import {getConfig} from "../../utils/config-utils";
 import {i18n} from "../../i18n/translation";
 import I18nKey from "../../i18n/i18nKey";
 import {getPostUrlBySlug} from "../../utils/url-utils";
+import CommentLayout from "../../components/comment/CommentLayout.astro";
 
 export async function getStaticPaths() {
     const blogEntries = await getCollection('posts');
@@ -83,8 +84,8 @@ const { remarkPluginFrontmatter } = await entry.render();
         </div>
     </div>
 
-    <div class="flex flex-col md:flex-row justify-between gap-4 overflow-hidden w-full">
+    <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">
+        <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">
                 <Icon name="material-symbols:chevron-left-rounded" size={32} class="text-[var(--primary)]" />
                 <div class="overflow-hidden overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
@@ -93,7 +94,7 @@ const { remarkPluginFrontmatter } = await entry.render();
             </Button>}
         </a>
 
-        <a href={getPostUrlBySlug(entry.data.prevSlug)} class="w-full font-bold overflow-hidden">
+        <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 overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_48px)] text-black/75 dark:text-white/75">
                     {entry.data.prevTitle}
@@ -103,6 +104,10 @@ const { remarkPluginFrontmatter } = await entry.render();
         </a>
     </div>
 
+    <CommentLayout>
+
+    </CommentLayout>
+
 </MainGridLayout>
 
 <style lang="stylus" is:global>