fixed index page

_src/assets/css/citrus/citrus.css

@@ -51,6 +51,11 @@ article {
 	background-image: var(--noise);
 	box-shadow: var(--shadow);
 	border: 0;
+	& code:not(pre *) {
+		border-radius: 0;
+		color: var(--citrus-primary);
+		background-color: #000;
+	}
 }
 /* home.css */
 body[id] > main::before {
@@ -102,11 +107,6 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 			border-color: var(--citrus-primary);
 			border-radius: 0;
 		}
-		& code:not(pre *) {
-			border-radius: 0;
-			color: var(--citrus-primary);
-			background-color: #000;
-		}
 		& pre {
 			border-radius: 0;
 			color: var(--citrus-primary);
@@ -152,6 +152,10 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 		padding: 1rem;
 		background-size: auto, 32px;
 	}
+	& article[id] {
+		background-image: var(--noise), var(--paper);
+		background-size: auto, 4px;
+	}
 	& a:has(figure) {
 		transition: border-color var(--trans), background-color var(--trans);
 		box-shadow: var(--shadow);

_src/assets/css/default/index.css

@@ -13,18 +13,15 @@
 		height: 100vh;
 		width: inherit;
 		flex-direction: column;
+		background-image: var(--sunny);
+		background-color: rgb(255, 190, 0);
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: contain;
 		& a {
-			font-family: "Urbanist", sans-serif;
-			font-size: 500%;
-			margin: 0;
-			&::after {
-				content: "";
-				mask-image: url("/assets/img/theme/paw.svg");
-				background-color: red;
-				height: 100%;
-				position: absolute;
-				pointer-events: none;
-			}
+			position: absolute;
+			top: 2rem;
+			background-color: unset;
 		}
 	}
 	& footer {

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

@@ -126,7 +126,10 @@
 				color-mix(in lch, transparent, var(--secondary-500) 70%);
 		}
 	}
-	a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
-		filter: drop-shadow(4px 6px 0 var(--secondary-500));
+	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/theme-light.css

@@ -125,7 +125,10 @@
 				color-mix(in lch, transparent, var(--primary-dark-500) 30%);
 		}
 	}
-	a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
-		filter: drop-shadow(4px 6px 0 var(--primary-500));
+	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

@@ -49,6 +49,7 @@
     --pad-m: 0.8rem;
     --pad-sm: 0.4rem;
     --paw: url("/assets/img/theme/paw.svg");
+    --sunny: url("/assets/img/theme/citrus/sundae.png")
 }
 @font-face {
     font-family: Rubik;