Improve style

src/components/layout.lisp

@@ -10,7 +10,7 @@
   (hsx
    (div :class "flex flex-col h-[100svh] w-full max-w-[700px] px-2 mx-auto"
      (~header)
-     (div :class "flex flex-col flex-1 overflow-y-scroll"
+     (div :class "flex flex-col flex-1 overflow-y-scroll zoom-fade"
        (main :class "flex-1 px-2 py-6 md:px-4 md:py-8"
          children)
        (footer :class "flex p-2 justify-center text-sm border-t-1"

src/routes/about.lisp

@@ -24,12 +24,6 @@
          (and draft-key (hsx (p :class "text-lg text-pink-500" "下書きモード")))
          (article :class "prose max-w-none"
            (h1 "About")
-           (div :class "flex justify-center"
-             (figure :class "flex flex-col items-center"
-               (img
-                 :src (accesses about :avatar :url)
-                 :alt "avatar" :class "size-40 rounded-xl shadow-sm avatar")
-               (figcaption (getf about :avatar-caption))))
            (raw! (getf about :content))
            (p :class "text-right"
              "（最終更新："

src/routes/index.lisp

@@ -32,7 +32,7 @@
      (div :class "flex flex-col items-center justify-center h-full"
        (img 
          :src (accesses about :avatar :url)
-         :alt "avatar" :class "size-40 rounded-xl shadow-sm avatar")
+         :alt "avatar" :class "size-40 rounded-xl shadow-sm")
        (div :class "flex flex-col items-center gap-2 py-6"
          (h1 :class "font-bold text-2xl text-center"
            "Akira Tempaku")

static/style/global.css

@@ -28,7 +28,37 @@
   navigation: auto;
 }
 
-.avatar {
-  view-transition-name: avatar;
-  contain: paint;
+@keyframes zoom-fade-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1.05);
+  }
 }
+
+@keyframes zoom-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+::view-transition-old(zoom-fade) {
+  animation: 400ms ease both zoom-fade-out;
+}
+
+::view-transition-new(zoom-fade) {
+  animation: 500ms ease 100ms both zoom-fade-in;
+}
+
+.zoom-fade {
+  view-transition-name: zoom-fade;
+}
+