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

(cherry picked from commit 21319d339305c77311d42aa18501d425a5a2619c)

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,