70 lines
1.2 KiB
CSS
70 lines
1.2 KiB
CSS
|
@keyframes fade-in-b {
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
translate: 0 0.5rem;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
translate: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fade-in {
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-reduced-motion: no-preference) {
|
||
|
|
main > *:not(h1):not(h2):not(h3) {
|
||
|
|
animation: fade-in-b 0.5s cubic-bezier(0.87, 0, 0.13, 1) both;
|
||
|
|
}
|
||
|
|
|
||
|
|
main h1,
|
||
|
|
main h2,
|
||
|
|
main h3 {
|
||
|
|
animation: fade-in-b 0.625s cubic-bezier(0.87, 0, 0.13, 1) both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.linkView li.ticker {
|
||
|
|
animation: fade-in 0.5s cubic-bezier(0.87, 0, 0.13, 1) 0.5s both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.linkView li:not(.ticker) a {
|
||
|
|
display: inline-block;
|
||
|
|
transition: opacity 0.25s, translate 0.125s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.linkView li:not(.ticker) a:hover {
|
||
|
|
translate: 0 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.linkView li:not(.ticker) a:active {
|
||
|
|
opacity: 0.5;
|
||
|
|
translate: 0 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
summary::after {
|
||
|
|
display: inline-block;
|
||
|
|
transition: opacity 0.25s, translate 0.125s;
|
||
|
|
}
|
||
|
|
|
||
|
|
summary:hover::after {
|
||
|
|
translate: 0 -1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
summary:active::after {
|
||
|
|
translate: 0 -2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
details[open] summary:hover::after {
|
||
|
|
translate: 0 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
details[open] summary:active::after {
|
||
|
|
translate: 0 2px;
|
||
|
|
}
|
||
|
|
}
|