unfinished bullCRAP

_src/assets/css/default/media.css

@@ -0,0 +1,156 @@
+/* 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);
+	}
+}