92 lines
1.4 KiB
SCSS
92 lines
1.4 KiB
SCSS
body {
|
|
@apply min-h-100vh m-0 grid;
|
|
|
|
&.dark-theme {
|
|
@apply bg-[#020202];
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
footer,
|
|
main > *,
|
|
footer,
|
|
main > * > * {
|
|
--stagger: 0;
|
|
--delay: 150ms;
|
|
--start: 0ms;
|
|
animation: fade-in 1s both 1;
|
|
animation-delay: calc(var(--start) + var(--stagger) * var(--delay));
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
& {
|
|
animation: enter 0.6s both;
|
|
animation-delay: calc(var(--stagger) * var(--delay) + var(--start));
|
|
}
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 15 {
|
|
main > *:nth-child(#{$i}),
|
|
main > * > *:nth-child(#{$i}) {
|
|
--stagger: #{$i};
|
|
}
|
|
}
|
|
|
|
footer {
|
|
@apply h-10vh;
|
|
--stagger: 15;
|
|
}
|
|
}
|
|
|
|
a {
|
|
&:not([reset-style]) {
|
|
@apply dark:text-white
|
|
font-inter
|
|
font-bold
|
|
decoration-underline
|
|
decoration-1
|
|
decoration-offset-3
|
|
decoration-gray2
|
|
transition-all
|
|
delay-0 duration-0.5s
|
|
relative;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
@apply dark:decoration-white decoration-2;
|
|
}
|
|
}
|
|
|
|
&[target="_blank"] {
|
|
@apply mr-.5em;
|
|
&::after {
|
|
content: "↗";
|
|
@apply inline-block
|
|
i-solar:square-top-down-line-duotone
|
|
transition-all
|
|
delay-0 duration-0.5s
|
|
absolute
|
|
z-10
|
|
-translate-y-.1em
|
|
-translate-x-.2em
|
|
scale-50
|
|
text-gray10;
|
|
}
|
|
|
|
&:hover::after,
|
|
&:focus::after {
|
|
content: "↗";
|
|
@apply i-solar:square-top-down-outline text-current scale-60;
|
|
}
|
|
}
|
|
}
|