critter box overhaul

_src/_data/media-albums.json

@@ -2,7 +2,7 @@
     "items": [
         {
             "artist": "2 Mello",
-            "cover": "/assets/img/media/music/albums/2-mello_future.png",
+            "cover": "/assets/img/media/music/albums/2-mello_sounds-of-tokyo-to-future.png",
             "src": "https://2mellomakes.bandcamp.com/album/sounds-of-tokyo-to-future",
             "title": "Sounds of Tokyo-To Future"
         },
@@ -20,19 +20,19 @@
         },
         {
             "artist": "Bôa",
-            "cover": "/assets/img/media/music/albums/boa_thousand-camels.png",
+            "cover": "/assets/img/media/music/albums/boa_the-race-of-a-thousand-camels.png",
             "src": "https://musicbrainz.org/release-group/2b81ce5f-7b48-3f75-a714-cbab421db712",
             "title": "The Race of a Thousand Camels"
         },
         {
             "artist": "Duran Duran",
-            "cover": "/assets/img/media/music/albums/dd_1993.png",
+            "cover": "/assets/img/media/music/albums/duran-duran_1993.png",
             "src": "https://musicbrainz.org/release-group/faedc66c-59ae-36ee-a89d-9dda4a9ea393",
             "title": "The Wedding Album"
         },
         {
             "artist": "Everything Everything",
-            "cover": "/assets/img/media/music/albums/ee_man-alive.png",
+            "cover": "/assets/img/media/music/albums/everything-everything_man-alive.png",
             "src": "https://musicbrainz.org/release-group/053c59e7-2277-4187-ae85-3294923dc9ab",
             "title": "Man Alive"
         },
@@ -74,13 +74,13 @@
         },
         {
             "artist": "Linkin Park",
-            "cover": "/assets/img/media/music/albums/lp_hybrid-theory.png",
+            "cover": "/assets/img/media/music/albums/linkin-park_hybrid-theory.png",
             "src": "https://musicbrainz.org/release-group/b5b4bb4b-8ba5-3acf-88cb-4cae2699d8da",
             "title": "Hybrid Theory"
         },
         {
             "artist": "Linkin Park",
-            "cover": "/assets/img/media/music/albums/lp_meteora.png",
+            "cover": "/assets/img/media/music/albums/linkin-park_meteora.png",
             "src": "https://musicbrainz.org/release-group/09474d62-17dd-3a4f-98fb-04c65f38a479",
             "title": "Meteora"
         },
@@ -128,13 +128,13 @@
         },
         {
             "artist": "Various artists",
-            "cover": "/assets/img/media/music/albums/jet-set-radio_future.png",
+            "cover": "/assets/img/media/music/albums/jet-set-radio-future.png",
             "src": "https://jetsetradiofuture.live/",
             "title": "Jet Set Radio Future"
         },
         {
             "artist": "Various artists",
-            "cover": "/assets/img/media/music/albums/lethal-league_blaze.png",
+            "cover": "/assets/img/media/music/albums/lethal-league-blaze.png",
             "src": "https://store.steampowered.com/app/991870/Lethal_League_Blaze__Soundtrack/",
             "title": "Lethal League Blaze"
         }

_src/_includes/base.njk

@@ -19,6 +19,9 @@ theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2"
         <link rel="stylesheet" href="/assets/css/reset.css">
         <link rel="stylesheet" href="/assets/css/default/default.css">
         <link rel="stylesheet" href="/assets/css/default/system.css" id="custom">
+        {%if page.url === "/home/"%}
+        <link rel="stylesheet" href="/assets/css/pokesprite-pokemon-gen8.css"/>
+        {%endif%}
         {%set availableStyles = ['home', 'blog', 'gallery']%}
         {%if page.url%}
             {%if availableStyles.indexOf(page.url|firstSegment) !== -1%}

_src/assets/css/default/default.css

@@ -4,15 +4,21 @@
 :root {
 	--view: 18rem;
 }
+
 /* i hate default styles >:( and also chrome */
-h1, h2 ,h3 ,h4 ,h5 ,h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
 	display: block;
-    font-size: 2em;
-    margin-block-start: 0;
-    margin-block-end: 0;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
-    font-weight: bold;
+	font-size: 2em;
+	margin-block-start: 0;
+	margin-block-end: 0;
+	margin-inline-start: 0;
+	margin-inline-end: 0;
+	font-weight: bold;
 }
 
 body {
@@ -41,6 +47,7 @@ details {
 	cursor: pointer;
 	display: flex;
 	flex-direction: column;
+
 	& summary::marker {
 		content: none;
 	}
@@ -54,12 +61,15 @@ details {
 	margin: 0 0 0 calc(var(--pad-xl) * -1);
 	border-radius: 0 var(--round) var(--round) 0;
 }
+
 main article[id] {
+
 	& p,
 	li {
 		font-size: 1.2rem;
 	}
 }
+
 article {
 	border-style: solid;
 	border-width: 2px;
@@ -151,11 +161,11 @@ article {
 			padding-top: var(--pad-sm);
 		}
 	}
-	& h3 code {
+
+	&>:first-child>code {
 		display: flex;
-		gap: var(--pad-l);
 		width: fit-content;
-		margin: var(--pad-l) 0;
+		margin: var(--pad-sm) 0;
 	}
 }
 
@@ -180,16 +190,17 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 	main {
 		padding: var(--pad-l);
 	}
-	body > nav {
+
+	body>nav {
 		position: initial;
 		width: 100%;
 	}
 
-	main > section {
+	main>section {
 		flex-direction: column;
 	}
 
-	main > section {
+	main>section {
 		width: initial;
 	}
 
@@ -198,11 +209,11 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 		width: auto;
 	}
 
-	body > nav::before {
+	body>nav::before {
 		content: none;
 	}
 
-	body > nav {
+	body>nav {
 		flex-direction: row;
 		border: 0;
 		width: 100%;
@@ -219,7 +230,7 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 }
 
 @media screen and (max-width: 450px) {
-	body > nav {
+	body>nav {
 		flex-direction: column;
 		justify-content: start;
 

_src/assets/css/default/home.css

@@ -7,21 +7,26 @@
 		transform: translateY(-4px);
 	}
 }
+
 @keyframes slide {
-    0% {
-        background-position: 0% 100%;
-    }
-    100% {
-        background-position: 200% 100%;
-    }
+	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;
@@ -30,12 +35,14 @@ article#bio {
 		background-position: 0% 50%;
 		animation: slide 5s linear infinite;
 		transition: var(--trans);
+
 		&:hover {
 			opacity: 1;
 			color: var(--dark);
 			background-clip: initial;
 		}
 	}
+
 	& img[alt] {
 		height: 24px;
 		display: inline-flex;
@@ -43,6 +50,7 @@ article#bio {
 		align-self: center;
 	}
 }
+
 article#badges {
 	& ul {
 		gap: 1rem;
@@ -50,6 +58,7 @@ article#badges {
 		display: flex;
 		flex-wrap: wrap;
 	}
+
 	& a {
 		display: flex;
 		padding: inherit;
@@ -57,9 +66,11 @@ article#badges {
 		background-color: unset;
 	}
 }
+
 article#bio ul {
 	padding: 0;
 }
+
 article#bio ul li {
 	&::before {
 		content: "";
@@ -71,10 +82,12 @@ article#bio ul li {
 		mask-repeat: no-repeat;
 		margin: var(--pad-sm) 0 0 calc(var(--pad-xl)*-1);
 	}
+
 	&::marker {
 		content: none;
 	}
 }
+
 article#interests ul {
 	display: flex;
 	flex-wrap: wrap;
@@ -85,15 +98,19 @@ article#interests {
 		margin: 0;
 		padding: var(--pad-l) 0;
 	}
+
 	& details:last-child ul {
 		padding: var(--pad-l) 0 0 0
 	}
+
 	& li {
 		display: flex;
+
 		& a {
 			padding: var(--pad-sm);
 			background: transparent;
 		}
+
 		& span {
 			display: flex;
 			width: 14ch;
@@ -101,21 +118,26 @@ article#interests {
 			justify-content: center;
 		}
 	}
+
 	& details h3 {
 		border-bottom-width: 1px;
 		border-bottom-style: solid;
 	}
+
 	& div:has(img) {
 		margin: 0 auto;
 		width: fit-content;
 	}
+
 	.music img {
 		height: 48px;
 	}
+
 	.manga img {
 		height: 128px;
 	}
 }
+
 #pkmn {
 	display: flex;
 	flex-wrap: wrap;
@@ -130,42 +152,42 @@ article#interests {
 	border-width: 3px;
 	border-style: solid;
 	margin: var(--pad-l) 0 0 0;
-	& img {
-		image-rendering: pixelated;
+	&>* {
+		display: flex;
+		margin-top: -8px;
+
 		&:hover {
-			filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff)
-				drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
-				drop-shadow(0 2px 3px #0006);
+			filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 3px #0006);
 			animation: jump 200ms infinite alternate;
 		}
 	}
 }
+
 #agender {
-	background-image: linear-gradient(
-		var(--flag),
-		#000 0 14.28%,
-		#c0c0c0 0 28.57%,
-		#fff 0 42.85%,
-		#a3fa73 0 57.14%,
-		#fff 0 71.42%,
-		#c0c0c0 0 85.71%,
-		#000 0
-	);
+	background-image: linear-gradient(var(--flag),
+			#000 0 14.28%,
+			#c0c0c0 0 28.57%,
+			#fff 0 42.85%,
+			#a3fa73 0 57.14%,
+			#fff 0 71.42%,
+			#c0c0c0 0 85.71%,
+			#000 0);
 }
+
 #aromantic {
-	background-image: linear-gradient(
-		var(--flag),
-		#0a2 20%,
-		#7d6 0 40%,
-		#fff 0 60%,
-		#a9a9a9 0 80%,
-		#000 0
-	);
+	background-image: linear-gradient(var(--flag),
+			#0a2 20%,
+			#7d6 0 40%,
+			#fff 0 60%,
+			#a9a9a9 0 80%,
+			#000 0);
 }
+
 #pansexual {
 	background-image: linear-gradient(var(--flag), #f09 33.33%, #ffd700 0 66.66%, #00bfff 0);
 }
-#interests div:has(img)::after  {
+
+#interests div:has(img)::after {
 	content: "";
 	background-image: url("/assets/img/icon/shortcut.png");
 	background-size: 100%;
@@ -177,13 +199,16 @@ article#interests {
 	margin: -1.5rem 0 0 -0.5rem;
 	pointer-events: none;
 }
+
 @media screen and (max-width: 920px) {
 	article#interests {
 		display: flex;
 		flex-direction: column;
+
 		& ul {
 			justify-content: center;
 		}
+
 		& li a {
 			padding: 0;
 		}

_src/assets/css/default/variables.css

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