feat: back-to-top, footer, about page, responsive design, etc.

(cherry picked from commit 21319d339305c77311d42aa18501d425a5a2619c)

src/components/ArchivePanel.astro

@@ -85,11 +85,11 @@ function formatDate(date: Date) {
                                             ></div>
                                         </div>
                                         <!-- post title -->
-                                        <div class="max-w-[65%] w-[65%] transition text-left font-bold">
-                                            <div class="group-hover:ml-1 transition-all group-hover:text-[var(--primary)]
-                                            text-black/80 dark:text-white/80 pr-8 whitespace-nowrap overflow-ellipsis overflow-hidden">
+                                        <div class="max-w-[65%] w-[65%] text-left font-bold
+                                            group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
+                                            text-black/80 dark:text-white/80 pr-8 whitespace-nowrap overflow-ellipsis overflow-hidden"
+                                        >
                                                 {post.data.title}
-                                            </div>
                                         </div>
                                         <!-- tag list -->
                                         <div class="w-[15%] text-left text-sm transition

src/components/Footer.astro

@@ -0,0 +1,11 @@
+---
+
+---
+
+<div class="card-base max-w-[var(--page-width)] min-h-[72px] rounded-b-none mx-auto flex items-center px-6">
+    <div class="text-black/50 dark:text-white/50 text-sm">
+        © 2023 Author. All Rights Reserved.
+        <br>
+        Powered by Vivia
+    </div>
+</div>

src/components/GlobalStyles.astro

@@ -65,6 +65,8 @@ color_set({
 
   --deep-text: oklch(0.25 0.02 var(--hue))
 
+  --line-divider: black(0.08) white(0.08)
+
   --line-color: black(0.1) white(0.1)
   --meta-divider: black(0.2) white(0.2)
   --selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue))
@@ -88,5 +90,8 @@ color_set({
     h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
         @apply transition;
     }
+    .card-shadow {
+        @apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
+    }
 }
 </style>

src/components/Navbar.astro

@@ -15,7 +15,7 @@ const className = Astro.props.class;
     <div>
         <a href="/"><Button light class="font-bold px-5">Home</Button></a>
         <a href="/archive"><Button light class="font-bold px-5">Archive</Button></a>
-        <Button light class="font-bold px-5">About</Button>
+        <a href="/about"><Button light class="font-bold px-5">About</Button></a>
     </div>
     <div>
         <Button id="scheme-switch" iconName="material-symbols:wb-sunny-outline-rounded" iconSize={20} isIcon light></Button>

src/components/TitleCardNew.astro

@@ -30,14 +30,14 @@ const coverWidth = "30%";
 const { remarkPluginFrontmatter } = await entry.render();
 
 ---
-<div class:list={["card-base flex w-full rounded-[var(--radius-large)] overflow-hidden relative", className]}>
-    <div class:list={[" px-10 pt-7 pb-6 relative", {'w-full': !hasCover, "w-[calc(100%_-_var(--coverWidth))]": hasCover}]}>
+<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={[" px-10 pt-4 lg:pt-7 pb-6 relative", {'w-full': !hasCover, "w-full lg:w-[calc(100%_-_var(--coverWidth))]": hasCover}]}>
         <a href={url}
            class="transition w-full block font-bold mb-3 text-4xl
         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-[38px] before:left-5
+        before:absolute before:top-[26px] lg:before:top-[38px] before:left-5
         ">
             {title}
         </a>
@@ -58,7 +58,10 @@ const { remarkPluginFrontmatter } = await entry.render();
     </div>
 
     {hasCover && <a href={url}
-                    class=`group w-[var(--coverWidth)] absolute top-3 bottom-3 right-3 rounded-xl overflow-hidden`>
+                    class:list={["group",
+                        "max-h-[20vh] lg:max-h-none mx-4 mt-4 lg:mx-0 lg:mt-0",
+                        "lg:w-[var(--coverWidth)] relative lg:absolute lg:top-3 lg:bottom-3 lg: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"

src/components/control/BackToTop.astro

@@ -0,0 +1,59 @@
+---
+import { Icon } from 'astro-icon/components';
+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" transition:persist>
+    <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden" onclick="topFunction()">
+        <Button card height="60px" width="60px">
+            <Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>
+        </Button>
+    </div>
+</div>
+
+
+
+<style lang="stylus">
+.back-to-top-wrapper
+    width: 60px
+    height: 60px
+    position: absolute
+    right: -84px
+    top: 0
+
+.back-to-top-btn
+    color: var(--primary)
+    font-size: 36px
+    font-weight: bold
+    border: none
+    position: fixed
+    bottom: 240px
+    opacity: 1
+    cursor: pointer
+    i
+        font-size: 28px
+    &.hide
+        transform: scale(0.9)
+        opacity: 0
+        pointer-events: none
+
+</style>
+
+<script is:raw>
+
+function topFunction() {
+    window.scroll({ top: 0, behavior: 'smooth' });
+}
+function scrollFunction() {
+    let btn = document.getElementById('back-to-top-btn');
+    if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
+        btn.classList.remove('hide')
+    } else {
+        btn.classList.add('hide')
+    }
+}
+window.onscroll = function() {
+    scrollFunction();
+}
+</script>

src/components/control/Button.astro

@@ -45,10 +45,10 @@ import { Icon } from 'astro-icon/components';
         'bg-none': light,
         'hover:bg-[var(--btn-plain-bg-hover)]': light,
         'active:bg-[var(--btn-plain-bg-active)]': light,
-        'text-neutral-900': light,
+        'text-black/75': light,
         'hover:text-[var(--primary)]': light,
 
-        'dark:text-neutral-300': light || regular,
+        'dark:text-white/75': light || regular,
         'dark:hover:text-[var(--primary)]': light,
 
         'bg-[var(--btn-regular-bg)]': regular,

src/components/widget/Profile.astro

@@ -11,7 +11,7 @@ const vConf = getConfig();
 
 ---
 <div class="card-base" transition:persist>
-    <ImageBox src={vConf.profile.avatar} class="w-full rounded-2xl mb-3"></ImageBox>
+    <ImageBox src={vConf.profile.avatar} class="w-[240px] 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>