From 631d979faf2f86f6768fc33d0921c96af1d00c75 Mon Sep 17 00:00:00 2001
From: Akira Tempaku <paku@skyizwhite.dev>
Date: Sun, 18 May 2025 17:51:47 +0900
Subject: [PATCH] Improve style
---
src/components/layout.lisp | 2 +-
src/routes/about.lisp | 6 ------
src/routes/index.lisp | 2 +-
static/style/global.css | 36 +++++++++++++++++++++++++++++++++---
4 files changed, 35 insertions(+), 11 deletions(-)
diff --git a/src/components/layout.lisp b/src/components/layout.lisp
index dcbf668..d53489c 100644
--- a/src/components/layout.lisp
+++ b/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"
diff --git a/src/routes/about.lisp b/src/routes/about.lisp
index 22c5241..a642363 100644
--- a/src/routes/about.lisp
+++ b/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"
"（最終更新："
diff --git a/src/routes/index.lisp b/src/routes/index.lisp
index 398abbc..2e5a16f 100644
--- a/src/routes/index.lisp
+++ b/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")
diff --git a/static/style/global.css b/static/style/global.css
index e20777e..90d006c 100644
--- a/static/style/global.css
+++ b/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;
+}
+