reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 19:51:07 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

✨ feat: add fade up animation to post page, optimize global animation curves and durations, refine animation-related naming conventions

Browse source
This commit is contained in:
radishzzz 2025-05-17 20:18:41 +01:00
parent d4ea4c470b
commit a35999629a
14 changed files with 122 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/styles/global.css
View file

@ -30,7 +30,7 @@ h4:hover .heading-anchor-link svg {
--at-apply: 'op-80';
}
.heading-anchor-link svg {
--at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity active:scale-90';
--at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity duration-300 ease-out active:scale-90';
}
h1:hover .heading-anchor-link svg:hover,
h2:hover .heading-anchor-link svg:hover,
@ -65,41 +65,6 @@ h4:hover .heading-anchor-link svg:hover {
}
}
/* View Transition with Theme Toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
::view-transition-new(theme-transition) {
animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
clip-path: inset(0 0 0 0);
z-index: 99;
}
::view-transition-old(theme-transition) {
animation: none;
z-index: -1;
}
@keyframes reveal {
from {
clip-path: inset(var(--from));
}
}
html.dark {
--from: 0 0 100% 0;
}
html:not(.dark) {
--from: 100% 0 0 0;
}
/* Disable animations for other elements during theme switching */
html[data-theme-transition] [data-disable-transition-on-theme] {
view-transition-name: none !important;
}
/* Fallback animation when view-transition-name is not supported */
@supports not (view-transition-name: none) {
html:not([data-restore-theme]) {
--at-apply: 'transition-colors duration-300 ease-out';
}
}
/* Snell Roundhand Static Font >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
@font-face {
font-family: "Snell-Bold";