156 lines
2.8 KiB
CSS
156 lines
2.8 KiB
CSS
/* default.css */
|
|
@media screen and (max-width: 920px) {
|
|
body::after {
|
|
content: "" !important;
|
|
}
|
|
|
|
footer {
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
header {
|
|
padding-left: 0 !important;
|
|
padding-top: var(--pad-m) !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
main {
|
|
padding: var(--pad-l) !important;
|
|
}
|
|
|
|
main > section {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
main > section {
|
|
width: initial !important;
|
|
}
|
|
|
|
article {
|
|
max-width: initial !important;
|
|
width: auto !important;
|
|
}
|
|
#mobile > nav {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
/* nav.css */
|
|
@media screen and (min-width: 920px) {
|
|
li:has(> button[popovertarget="mobile"]) {
|
|
display: none !important;
|
|
}
|
|
#floating {
|
|
display: none;
|
|
}
|
|
#mobile {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 920px) {
|
|
#floating {
|
|
position: sticky !important;
|
|
top: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* home.css */
|
|
@media screen and (max-width: 920px) {
|
|
article#interests {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
|
|
& ul {
|
|
justify-content: center !important;
|
|
}
|
|
|
|
& li a {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|