mobile view fix

_src/assets/css/citrus/citrus.css

@@ -1,7 +1,11 @@
 @import url("./variables.css");
 @import url("../default/variables.css");
 @import url("./nav.css");
-#bio, #interests, #badges, #artworks, #art {
+#bio,
+#interests,
+#badges,
+#artworks,
+#art {
 	font-family: "Pangolin", sans-serif;
 }
 body {
@@ -50,7 +54,12 @@ body > nav {
 		}
 	}
 	& details {
-		background-image: linear-gradient(-45deg, var(--citrus-primary), var(--citrus-secondary), var(--citrus-primary));
+		background-image: linear-gradient(
+			-45deg,
+			var(--citrus-primary),
+			var(--citrus-secondary),
+			var(--citrus-primary)
+		);
 	}
 }
 article {
@@ -62,7 +71,7 @@ article {
 	& .header-anchor {
 		border-radius: inherit;
 		background-color: color-mix(in lch, magenta, white);
-		&:is(:hover,:focus) {
+		&:is(:hover, :focus) {
 			background-color: magenta;
 		}
 	}
@@ -81,7 +90,7 @@ article {
 	box-shadow: var(--shadow);
 	background: color-mix(in lch, yellow, white);
 	&:nth-child(odd) {
-		transform: rotate(1deg)
+		transform: rotate(1deg);
 	}
 }
 ul:not([role]) li::before {
@@ -199,13 +208,12 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 		&::before {
 			content: "";
 			display: flex;
-			height: 100%;
+			height: 32px;
 			width: calc(100% + var(--pad-xl) * 2);
-			margin: -4rem 0 0 calc(var(--pad-xl) * -1);
+			margin: -4rem 0 var(--pad-l) calc(var(--pad-xl) * -1);
 			background-image: var(--border), var(--lined);
 			background-size: 32px, 32px;
 			background-blend-mode: darken;
-			padding: var(--pad-xl);
 		}
 	}
 }
@@ -232,3 +240,11 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 		content: none;
 	}
 }
+@media screen and (max-width: 450px) {
+	#artworks & article {
+		&::before {
+			width: calc(100% + var(--pad-l) * 2) !important;
+			margin: -3rem 0 0 -16px;
+		}
+	}
+}

_src/assets/css/default/default.css

@@ -48,7 +48,8 @@ h3 {
 	border-radius: 0 var(--round) var(--round) 0;
 }
 main article[id] {
-	& p, li {
+	& p,
+	li {
 		font-size: 1.2rem;
 	}
 }
@@ -170,20 +171,19 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 }
 
 @media screen and (max-width: 920px) {
-	body>nav {
+	main {
+		padding: var(--pad-l);
+	}
+	body > nav {
 		position: initial;
 		width: 100%;
 	}
 
-	main {
-		padding: var(--pad-l);
-	}
-
-	main>section {
+	main > section {
 		flex-direction: column;
 	}
 
-	main>section {
+	main > section {
 		width: initial;
 	}
 
@@ -192,11 +192,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%;
@@ -213,16 +213,7 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 }
 
 @media screen and (max-width: 450px) {
-	main {
-		padding: var(--pad-sm);
-	}
-
-	article {
-		padding: var(--pad-l);
-		border: 0;
-	}
-
-	body>nav {
+	body > nav {
 		flex-direction: column;
 		justify-content: start;
 
@@ -230,4 +221,4 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 			width: 100%;
 		}
 	}
-}
+}