new icons

_src/assets/css/citrus/citrus.css

@@ -1,6 +1,7 @@
 @import url("./variables.css");
 @import url("../default/variables.css");
 @import url("./nav.css");
+
 #bio,
 #interests,
 #badges,
@@ -72,7 +73,7 @@ article {
 		border-radius: inherit;
 		background-color: color-mix(in lch, magenta, white);
 		&:is(:hover, :focus) {
-			background-color: magenta;
+			background-color: color-mix(in lch, magenta, white 30%);
 		}
 	}
 	& code:not(pre *) {
@@ -85,12 +86,17 @@ article {
 #interests div:has(img)::after {
 	display: none !important;
 }
-#interests li:has(div img) {
-	margin: var(--pad-sm);
-	box-shadow: var(--shadow);
-	background: color-mix(in lch, yellow, white);
-	&:nth-child(odd) {
-		transform: rotate(1deg);
+#interests li {
+	& a {
+		align-content: center;
+	}
+	&:has(div img) {
+		margin: var(--pad-sm);
+		box-shadow: var(--shadow);
+		background: color-mix(in lch, yellow, white);
+		&:nth-child(odd) {
+			transform: rotate(1deg);
+		}
 	}
 }
 ul:not([role]) li::before {
@@ -164,6 +170,9 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 			& p {
 				color: initial;
 			}
+			& p:not(:last-child) {
+				color: color-mix(in lch, var(--dark), var(--light) 50%);
+			}
 			&:is(:hover, :focus) {
 				border-color: currentColor;
 			}
@@ -211,7 +220,7 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 			height: 32px;
 			width: calc(100% + var(--pad-xl) * 2);
 			margin: -4rem 0 var(--pad-l) calc(var(--pad-xl) * -1);
-			background-image: var(--border), var(--lined);
+			background-image: var(--border), var(--lined), var(--noise);
 			background-size: 32px, 32px;
 			background-blend-mode: darken;
 		}

_src/assets/css/default/gallery.css

@@ -72,15 +72,18 @@
 		flex-direction: row;
 		gap: var(--pad-l);
 	}
+	& section:has(a:nth-child(n + 3)) {
+		flex-direction: column;
+	}
 	& section {
 		& a {
 			display: flex;
-			width: calc(var(--post) - var(--view) * 1.2);
+			width: calc(var(--post) - var(--view));
 			flex-direction: column;
 		}
 	}
 }
-@media screen and (max-width: 1400px) {
+@media screen and (max-width: 1500px) {
 	#art section:has(a:nth-child(n + 2)) {
 		flex-direction: column;
 		& a {

_src/assets/css/default/home.css

@@ -7,27 +7,41 @@
 		transform: translateY(-4px);
 	}
 }
-@keyframes fadeIn {
-	0% {
-		color: inherit;
-	}
-	100% {
-		color: transparent;
-	}
+@keyframes slide {
+    0% {
+        background-position: 0% 100%;
+    }
+    100% {
+        background-position: 200% 100%;
+    }
 }
 article#bio {
 	& ul {
 		margin: 0 var(--pad-xl);
 	}
+	& li {
+		display: flex;
+	}
 	& span[id] {
+		color: transparent;
 		background-clip: text;
 		background-repeat: repeat;
+		background-size: 200% 100%;
+		background-position: 0% 50%;
+		animation: slide 5s linear infinite;
+		transition: var(--trans);
 		&:hover {
+			opacity: 1;
+			color: var(--dark);
 			background-clip: initial;
-			transition: var(--trans);
-			animation: fadeIn var(--trans) linear forwards;
 		}
 	}
+	& img[alt] {
+		height: 24px;
+		display: inline-flex;
+		margin: 0 0 0 var(--pad-sm);
+		align-self: center;
+	}
 }
 article#badges {
 	& ul {
@@ -127,6 +141,7 @@ article#interests {
 }
 #agender {
 	background-image: linear-gradient(
+		var(--flag),
 		#000 0 14.28%,
 		#c0c0c0 0 28.57%,
 		#fff 0 42.85%,
@@ -138,6 +153,7 @@ article#interests {
 }
 #aromantic {
 	background-image: linear-gradient(
+		var(--flag),
 		#0a2 20%,
 		#7d6 0 40%,
 		#fff 0 60%,
@@ -146,11 +162,13 @@ article#interests {
 	);
 }
 #pansexual {
-	background-image: linear-gradient(#f09 33.33%, #ffd700 0 66.66%, #00bfff 0);
+	background-image: linear-gradient(var(--flag), #f09 33.33%, #ffd700 0 66.66%, #00bfff 0);
 }
 #interests div:has(img)::after  {
-	content: url("/assets/img/icon/shortcut.png");
-	display: flex;
+	content: "";
+	background-image: url("/assets/img/icon/shortcut.png");
+	background-size: 100%;
+	display: block;
 	z-index: 1;
 	position: absolute;
 	width: 24px;

_src/assets/css/default/index.css

@@ -1,6 +1,4 @@
 @import url("./variables.css");
-@import url("./theme-light.css");
-@import url("./theme-dark.css");
 
 #index {
 	color: var(--primary-dark-300);

_src/assets/css/default/variables.css

@@ -48,6 +48,7 @@
     --pad-l: 1rem;
     --pad-m: 0.8rem;
     --pad-sm: 0.4rem;
+    --flag: -45deg;
     --paw: url("/assets/img/theme/paw.svg");
     --sunny: url("/assets/img/theme/citrus/sundae.png")
 }