new nav background

_src/assets/css/default/default.css

@@ -209,7 +209,7 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 		width: auto;
 	}
 
-	body>nav::before {
+	body>nav::before, body>nav::after {
 		content: none;
 	}
 

_src/assets/css/default/home.css

@@ -7,7 +7,6 @@
 		transform: translateY(-4px);
 	}
 }
-
 @keyframes slide {
 	0% {
 		background-position: 0% 100%;
@@ -17,7 +16,6 @@
 		background-position: 200% 100%;
 	}
 }
-
 article#bio {
 	& ul {
 		margin: 0 var(--pad-xl);

_src/assets/css/default/nav.css

@@ -14,11 +14,25 @@ body::after {
 body>nav::before {
 	bottom: 0;
 	left: 0;
-	mask-size: 150%;
+	mask-size: 160%;
-	-webkit-mask-position-x: -10px;
+	-webkit-mask-position-x: -25px;
 	-webkit-mask-position-y: 90%;
 }
 
+body>nav::after {
+	top: 0;
+	left: 0;
+	width: var(--view);
+	content: "";
+	position: absolute;
+	height: 100%;
+	z-index: -2;
+	pointer-events: none;
+	mask-image: var(--paw-tiled);
+	animation: navbg 10s linear infinite;
+	mask-size: 128px;
+}
+
 body::after {
 	content: none;
 	mask-size: 100%;

_src/assets/css/default/theme-dark.css

@@ -1,7 +1,10 @@
 @media (prefers-color-scheme: dark) {
-	article, body {
+
+	article,
+	body {
 		color: var(--secondary-light-300);
 	}
+
 	article {
 		border-color: var(--secondary-300);
 		background-color: var(--secondary-200);
@@ -35,57 +38,67 @@
 		code {
 			border-color: var(--secondary-400);
 		}
+
 		/* blog.css */
 		& [aria-label="Postscript"]::after {
 			background-color: var(--secondary);
 		}
+
 		& [aria-label="Post warning"] {
 			background-color: var(--secondary);
 			color: var(--secondary-100);
+
 			&::before,
 			&::after {
 				background-color: var(--secondary);
 			}
 		}
+
 		& [aria-label="Addendum"] {
 			box-shadow: inset 0 0 0 2px var(--secondary);
-			border-image-source: linear-gradient(
+			border-image-source: linear-gradient(45deg,
-				45deg,
 					var(--secondary),
 					var(--secondary-600),
-				var(--secondary)
+					var(--secondary));
-			);
 			background-color: var(--secondary-400);
 		}
 	}
+
 	#posts {
 		& p:not(:last-child) {
 			color: var(--secondary-light-700);
 		}
 	}
+
 	/* default.css */
 	body {
 		background-color: var(--secondary-100);
+
 		/* this is cursed */
 		& :is(a, button) {
 			color: var(--secondary-light-400);
 			border-color: var(--secondary-600);
 			background-color: var(--secondary-300);
+
 			&:is(:hover, :focus) {
 				color: var(--secondary-light-500);
 				border-color: currentColor;
 				background-color: var(--secondary-500);
 			}
+
 			&:is(.header-anchor):is(:hover, :focus) {
 				background-color: var(--secondary-light-400);
 				color: var(--secondary-300);
 				box-shadow: 0 0 0 2px var(--secondary-300);
 			}
 		}
+
 		&>nav {
 			border-color: var(--secondary);
+
 			& details {
 				background-color: var(--secondary-100);
+
 				&:not([open]) summary {
 					color: var(--secondary);
 				}
@@ -102,35 +115,44 @@
 					background-color: var(--secondary-light-500);
 				}
 			}
-			&::before,
+
-			::after {
+			&::before {
 				background-color: var(--secondary);
 			}
+
+			&::after {
+				background-image: linear-gradient(to bottom, var(--secondary-600) 0%, transparent 30vw);
+			}
 		}
 
 		&::after {
 			background-color: var(--secondary);
 		}
 	}
+
 	/* home.css */
 	ul:not([role]) li::before {
 		background-color: var(--secondary-light-300);
 	}
+
 	#interests {
 		& a:is(:hover, :focus):not(.header-anchor) {
 			box-shadow: 0 0 0 1px currentColor;
 			background-color: var(--secondary-500);
 		}
+
 		& img {
-			box-shadow: 0 0 0 1px
+			box-shadow: 0 0 0 1px color-mix(in lch, transparent, var(--secondary-500) 70%);
-				color-mix(in lch, transparent, var(--secondary-500) 70%);
 		}
+
 		& details h3 {
 			border-color: var(--secondary-600);
 		}
 	}
+
 	a:has(img[src*="/assets/img/button"]) {
 		background-color: unset;
+
 		&:is(:hover, :focus) img {
 			filter: drop-shadow(4px 6px 0 var(--secondary-500));
 		}

_src/assets/css/default/theme-light.css

@@ -1,7 +1,10 @@
 @media (prefers-color-scheme: light) {
-	article, body {
+
+	article,
+	body {
 		color: var(--primary-dark-300);
 	}
+
 	article {
 		border-color: var(--primary-300);
 		background-color: var(--primary-200);
@@ -35,57 +38,67 @@
 		code {
 			border-color: var(--primary-400);
 		}
+
 		/* blog.css */
 		& [aria-label="Postscript"]::after {
 			background-color: var(--primary);
 		}
+
 		& [aria-label="Post warning"] {
 			background-color: var(--primary);
 			color: var(--primary-dark-100);
+
 			&::before,
 			&::after {
 				background-color: var(--primary);
 			}
 		}
+
 		& [aria-label="Addendum"] {
 			box-shadow: inset 0 0 0 2px var(--primary);
-			border-image-source: linear-gradient(
+			border-image-source: linear-gradient(45deg,
-				45deg,
 					var(--primary),
 					var(--primary-600),
-				var(--primary)
+					var(--primary));
-			);
 			background-color: var(--primary-400);
 		}
 	}
+
 	#posts {
 		& p:not(:last-child) {
 			color: var(--primary-dark-700);
 		}
 	}
+
 	/* default.css */
 	body {
 		background-color: var(--primary-100);
+
 		/* this is cursed */
 		& :is(a, button) {
 			color: var(--primary-dark-400);
 			border-color: var(--primary-600);
 			background-color: var(--primary-400);
+
 			&:is(:hover, :focus) {
 				color: var(--primary-dark-500);
 				border-color: currentColor;
 				background-color: var(--primary-500);
 			}
+
 			&:is(.header-anchor):is(:hover, :focus) {
 				background-color: var(--primary-dark-400);
 				color: var(--primary-300);
 				box-shadow: 0 0 0 2px var(--primary-300);
 			}
 		}
+
 		&>nav {
 			border-color: var(--primary);
+
 			& details {
 				background-color: var(--primary-100);
+
 				&:not([open]) summary {
 					color: var(--primary);
 				}
@@ -102,35 +115,44 @@
 					background-color: var(--primary-dark-500);
 				}
 			}
-			&::before,
+
-			&::after {
+			&::before {
 				background-color: var(--primary);
 			}
+
+			&::after {
+				background-image: linear-gradient(to bottom, var(--primary-600) 0%, transparent 30vw);
+			}
 		}
 
 		&::after {
 			background-color: var(--primary);
 		}
 	}
+
 	/* home.css */
 	ul:not([role]) li::before {
 		background-color: var(--primary-dark-300);
 	}
+
 	#interests {
 		& a:is(:hover, :focus):not(.header-anchor) {
 			box-shadow: 0 0 0 1px currentColor;
 			background-color: var(--primary-500);
 		}
+
 		& img {
-			box-shadow: 0 0 0 1px
+			box-shadow: 0 0 0 1px color-mix(in lch, transparent, var(--primary-dark-500) 30%);
-				color-mix(in lch, transparent, var(--primary-dark-500) 30%);
 		}
+
 		& details h3 {
 			border-color: var(--primary-dark-600);
 		}
 	}
+
 	a:has(img[src*="/assets/img/button"]) {
 		background-color: unset;
+
 		&:is(:hover, :focus) img {
 			filter: drop-shadow(4px 6px 0 var(--primary-500));
 		}

_src/assets/css/default/variables.css

@@ -50,8 +50,19 @@
     --pad-sm: 0.4rem;
     --flag: 45deg;
     --paw: url("/assets/img/theme/paw.svg");
+    --paw-tiled: url("/assets/img/theme/paw-tiled.png");
     --sunny: url("/assets/img/theme/citrus/sundae.png")
 }
+@keyframes navbg {
+	0% {
+		mask-position: 0rem 0rem;
+	}
+
+	100% {
+		mask-position: 16rem 16rem;
+	}
+}
+
 @font-face {
     font-family: Rubik;
     src: url("/assets/fonts/Rubik.ttf") format("truetype");

_src/data/changelog/2023-03-12.md

@@ -1,5 +1,5 @@
 - Added [Home](/home), [Gallery](/gallery) and ~~About~~
   - ~~About~~ contains Pokémon boxes and a small bio
-- Added `a hrefs` to other pages
+- Added links to other pages
 - Added `header`
   - Added a portrait of Sunny of his PETSCII avatar

_src/data/changelog/2023-03-16.md

@@ -12,4 +12,4 @@ title: Version 0
   - Tiled icon of Sunny for the inner background
 
 - Attribution:
-  - [Terence Eden's SuperTinyIcons GitHub repository](https://github.com/edent/SuperTinyIcons) (MIT) - Social link icons, for sidebar buttons
+  - [Terence Eden's SuperTinyIcons GitHub repository](https://github.com/edent/SuperTinyIcons) (MIT)

_src/data/changelog/2025-09-10.md

@@ -1,4 +1,6 @@
 - Website (hopefully) fixed for Chromium-based browsers _...grr_
+- Changed sidebar
+  - Added an animated tiled paw background for desktop view
 - Changed [Home](/home)
   - Updated the Pokémon box, now using a spritesheet instead of individual files
     - Ironically, this is marginally slower than before, because it includes every Pokémon (up to Gen 8), not just my favorites.<br>(Works great if you've [forked my site](https://bunsin.space/forgejo/sundae/website) and want to change it to include your personal favorites, though!)
@@ -6,5 +8,5 @@
 - Changed [Changelog](/changelog)
   - **Actually** processed with [Prettier](https://github.com/prettier/prettier), now.
 - Attribution:
-  - [PokéSprite](https://github.com/msikma/pokesprite) (MIT)
+  - [PokéSprite GitHub repository](https://github.com/msikma/pokesprite) (MIT)
   - [PokéSprite - generated spritesheet](https://github.com/msikma/pokesprite-spritesheet/)