83 lines
1.7 KiB
CSS
83 lines
1.7 KiB
CSS
|
@media (prefers-reduced-motion: no-preference) {
|
||
|
|
/* Scrolling pride flag text */
|
||
|
|
article#bio span[id],
|
||
|
|
footer span {
|
||
|
|
font-family: "Nosey Rodent", sans-serif;
|
||
|
|
font-weight: bold;
|
||
|
|
color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
filter: var(--outlined);
|
||
|
|
background-repeat: repeat;
|
||
|
|
background-size: 200% 100%;
|
||
|
|
background-position: 0% 50%;
|
||
|
|
animation: slide 5s linear infinite;
|
||
|
|
transition: color var(--trans);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (prefers-reduced-motion: reduce) {
|
||
|
|
body {
|
||
|
|
animation: none !important;
|
||
|
|
}
|
||
|
|
/* Buttons */
|
||
|
|
:is(a, button),
|
||
|
|
span:has(a) {
|
||
|
|
transition: none !important;
|
||
|
|
}
|
||
|
|
/* Permalinks */
|
||
|
|
.header-anchor,
|
||
|
|
article pre {
|
||
|
|
transition: none !important;
|
||
|
|
}
|
||
|
|
/* Images */
|
||
|
|
#gallery a:has(figure),
|
||
|
|
#blog article figure,
|
||
|
|
a img {
|
||
|
|
transition: none !important;
|
||
|
|
}
|
||
|
|
.emoji:has(img[alt*="🐇"]) {
|
||
|
|
& img {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
&::after {
|
||
|
|
position: absolute;
|
||
|
|
content: "🐇";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* Scrolling pride flag text */
|
||
|
|
article#bio span[id], footer span {
|
||
|
|
transition: none !important;
|
||
|
|
animation: none !important;
|
||
|
|
color: inherit;
|
||
|
|
background-clip: initial !important;
|
||
|
|
background: initial !important;
|
||
|
|
&::before {
|
||
|
|
content: "";
|
||
|
|
display: inline-flex;
|
||
|
|
width: 2rem;
|
||
|
|
height: 1.25rem;
|
||
|
|
margin: 0 2px;
|
||
|
|
background-repeat: repeat-x;
|
||
|
|
border-radius: 2px;
|
||
|
|
top: 4px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
#aromantic::before {
|
||
|
|
background-image: url("/assets/img/flag/aromantic.svg");
|
||
|
|
}
|
||
|
|
#agender::before {
|
||
|
|
background-image: url("/assets/img/flag/agender.svg");
|
||
|
|
}
|
||
|
|
#pansexual::before {
|
||
|
|
background-image: url("/assets/img/flag/pansexual.svg");
|
||
|
|
}
|
||
|
|
footer span::before {
|
||
|
|
background-image: url("/assets/img/flag/trans.svg");
|
||
|
|
}
|
||
|
|
/* Jumping critters */
|
||
|
|
#pkmn span:hover {
|
||
|
|
animation: none !important;
|
||
|
|
transform: translateY(-4px);
|
||
|
|
}
|
||
|
|
}
|