changed home page message and misc stuff

_src/assets/css/gallery.css

@@ -75,13 +75,12 @@
 	& a {
 		display: block;
 		text-decoration: unset;
-
 		& figure {
 			margin: 0;
 			padding: 0.4rem;
 			border-width: 2px;
 			border-style: solid;
-			border-radius: 0.4rem;
+			border-radius: var(--round);
 
 			& img {
 				display: flex;
@@ -101,6 +100,9 @@
 }
 
 #gallery article {
+	& h3 {
+		margin-bottom: 1rem;
+	}
 	& figure {
 		& time {
 			display: flex;
@@ -109,6 +111,7 @@
 
 		& a {
 			width: fit-content;
+			align-self: center;
 			& img {
 				min-height: fit-content;
 				max-height: 18rem;
@@ -120,14 +123,4 @@
 			}
 		}
 	}
-
-	& > section {
-		margin-top: 1rem;
-
-		&:has(figure:nth-child(n + 2)) {
-			display: grid;
-			gap: 1rem;
-			grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
-		}
-	}
 }

_src/assets/css/home.css

@@ -7,9 +7,17 @@
 		transform: translateY(-4px);
 	}
 }
+@keyframes fadeIn {
+	0% {
+		color: inherit;
+	}
+	100% {
+		color: transparent;
+	}
+}
 @media (prefers-color-scheme: light) {
-	#intro span[id]::before {
-		text-shadow: 0 0 1rem var(--primary-dark-500);
+	#badges a:is(:hover, :focus) img {
+		filter: drop-shadow(4px 6px 0 var(--primary-500));
 	}
 	#collection {
 		& a:is(:hover, :focus) {
@@ -23,8 +31,8 @@
 	}
 }
 @media (prefers-color-scheme: dark) {
-	#intro span[id]::before {
-		text-shadow: 0 0 1rem var(--secondary-900);
+	#badges a:is(:hover, :focus) img {
+		filter: drop-shadow(4px 6px 0 var(--secondary-500));
 	}
 	#collection {
 		& a:is(:hover, :focus) {
@@ -64,54 +72,42 @@ body [id]:not(:nth-child(1)) ul {
 }
 #agender {
 	background-image: linear-gradient(
-		black 0 14.28%,
-		silver 0 28.57%,
-		white 0 42.85%,
+		#000 0 14.28%,
+		#c0c0c0 0 28.57%,
+		#fff 0 42.85%,
 		#a3fa73 0 57.14%,
-		white 0 71.42%,
-		silver 0 85.71%,
-		black 0
+		#fff 0 71.42%,
+		#c0c0c0 0 85.71%,
+		#000 0
 	);
 }
 #aromantic {
 	background-image: linear-gradient(
 		#0a2 20%,
 		#7d6 0 40%,
-		white 0 60%,
-		darkgray 0 80%,
-		black 0
+		#fff 0 60%,
+		#a9a9a9 0 80%,
+		#000 0
 	);
 }
 #pansexual {
-	background-image: linear-gradient(#f09 33.33%, gold 0 66.66%, deepskyblue 0);
-}
-#agender::before {
-	content: "agender";
-}
-#aromantic::before {
-	content: "aromantic";
-}
-#pansexual::before {
-	content: "pansexual";
-}
-#intro span[id]::before {
-	width: inherit;
-	height: inherit;
-	position: absolute;
-	z-index: -1;
-}
-#intro span[id] {
-	font-size: 2rem;
-	color: transparent;
-	background-clip: text;
-	background-size: 2rem;
-	background-position: center;
-	background-repeat: repeat-x;
+	background-image: linear-gradient(#f09 33.33%, #ffd700 0 66.66%, #00bfff 0);
 }
 #intro {
-	& p {
+	& p, ul {
 		font-family: "Urbanist", sans-serif;
-		font-size: 1.8rem;
+		font-size: 1.3rem;
+	}
+	& ul {
+		margin: 0;
+	}
+	& span[id] {
+		background-clip: text;
+		background-repeat: repeat;
+		&:hover {
+			animation: fadeIn var(--trans) linear forwards;
+			filter: drop-shadow(2px 2px 1px #0006);
+		}
 	}
 }
 #collection {
@@ -120,12 +116,12 @@ body [id]:not(:nth-child(1)) ul {
 	& ul {
 		margin: 0;
 		padding: 0;
-		justify-content: center;
+		justify-content: start;
 	}
 	& li {
 		display: flex;
 		& a {
-			padding: 8px;
+			padding-top: 8px;
 			transition: background-color var(--trans);
 			text-decoration: none;
 		}
@@ -151,12 +147,12 @@ body [id]:not(:nth-child(1)) ul {
 		list-style-type: none;
 	}
 	& a {
+		outline: none;
 		display: flex;
 		padding: inherit;
 		margin: 0;
 	}
 	& a:is(:hover, :focus) img {
-		filter: drop-shadow(4px 6px 0 #0006);
 		transform: translateY(-4px);
 		transition: 0.3s;
 	}