Improve style
This commit is contained in:
parent
688ef6dc18
commit
631d979faf
4 changed files with 35 additions and 11 deletions
|
@ -10,7 +10,7 @@
|
||||||
(hsx
|
(hsx
|
||||||
(div :class "flex flex-col h-[100svh] w-full max-w-[700px] px-2 mx-auto"
|
(div :class "flex flex-col h-[100svh] w-full max-w-[700px] px-2 mx-auto"
|
||||||
(~header)
|
(~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"
|
(main :class "flex-1 px-2 py-6 md:px-4 md:py-8"
|
||||||
children)
|
children)
|
||||||
(footer :class "flex p-2 justify-center text-sm border-t-1"
|
(footer :class "flex p-2 justify-center text-sm border-t-1"
|
||||||
|
|
|
@ -24,12 +24,6 @@
|
||||||
(and draft-key (hsx (p :class "text-lg text-pink-500" "下書きモード")))
|
(and draft-key (hsx (p :class "text-lg text-pink-500" "下書きモード")))
|
||||||
(article :class "prose max-w-none"
|
(article :class "prose max-w-none"
|
||||||
(h1 "About")
|
(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))
|
(raw! (getf about :content))
|
||||||
(p :class "text-right"
|
(p :class "text-right"
|
||||||
"(最終更新:"
|
"(最終更新:"
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
(div :class "flex flex-col items-center justify-center h-full"
|
(div :class "flex flex-col items-center justify-center h-full"
|
||||||
(img
|
(img
|
||||||
:src (accesses about :avatar :url)
|
: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"
|
(div :class "flex flex-col items-center gap-2 py-6"
|
||||||
(h1 :class "font-bold text-2xl text-center"
|
(h1 :class "font-bold text-2xl text-center"
|
||||||
"Akira Tempaku")
|
"Akira Tempaku")
|
||||||
|
|
|
@ -28,7 +28,37 @@
|
||||||
navigation: auto;
|
navigation: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
@keyframes zoom-fade-out {
|
||||||
view-transition-name: avatar;
|
from {
|
||||||
contain: paint;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue