accessibility maxxing

_src/assets/css/default/blog.css

@@ -1,7 +1,9 @@
 :root {
 	--avatar: 3rem;
 }
-
+#blog:not(:has(#posts)) header {
+	text-align: center;
+}
 article {
 	margin: 0 auto;
 	font-family: "Rubik", sans-serif;
@@ -15,7 +17,12 @@ article {
 		border-radius: var(--round);
 		width: 66%;
 	}
+	h1,h2,h3,h4,h5,h6 {
+		margin-bottom: var(--pad-m);
+	}
 	& [aria-label="Post warning"] {
+		display: flex;
+		flex-direction: column;
 		font-size: 1.4rem;
 		font-weight: bold;
 		text-align: center;

_src/assets/css/default/default.css

@@ -13,7 +13,7 @@ h4,
 h5,
 h6 {
 	display: block;
-	font-size: 2em;
+	font-size: 2rem;
 	margin-block-start: 0;
 	margin-block-end: 0;
 	margin-inline-start: 0;
@@ -36,6 +36,22 @@ body {
 		}
 	}
 }
+svg {
+	fill: currentColor;
+    stroke: currentColor;
+    stroke-width: 0;
+}
+header {
+	padding-top: var(--pad-xl);
+	padding-left: calc(var(--view) + var(--pad-xl));
+	& svg {
+		width: 2rem;
+		height: 2rem;
+	}
+	& h1 {
+		display: inline-flex;
+	}
+}
 
 main {
 	padding: var(--pad-xl);
@@ -170,7 +186,7 @@ article {
 }
 
 :is(main article, main section):not(:last-child) {
-	margin-bottom: var(--pad-xl);
+	margin-bottom: var(--pad-m);
 }
 
 img[src*="/assets/img/flag/"] {
@@ -187,6 +203,12 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 }
 
 @media screen and (max-width: 920px) {
+	header {
+		padding-left: 0;
+		padding-top: var(--pad-m);
+		text-align: center;
+	}
+
 	main {
 		padding: var(--pad-l);
 	}
@@ -209,7 +231,8 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
 		width: auto;
 	}
 
-	body>nav::before, body>nav::after {
+	body>nav::before,
+	body>nav::after {
 		content: none;
 	}
 

_src/assets/css/default/gallery.css

@@ -25,14 +25,6 @@
 		}
 	}
 
-	& h2 {
-		margin: var(--pad-xl) 0;
-		font-size: var(--pad-xl);
-
-		&:first-of-type {
-			margin-top: 0;
-		}
-	}
 	& figure {
 		margin: 0;
 		padding: var(--pad-sm);

_src/assets/css/default/index.css

@@ -1,33 +1,46 @@
 @import url("./variables.css");
 
 #index {
+	margin: 0;
+	padding: 0;
 	color: var(--primary-dark-300);
 	background-color: rgb(255, 190, 0);
 	width: 100%;
-	margin: 0;
-	padding: 0;
-	& main {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 100vh;
-		width: inherit;
-		flex-direction: column;
-		background-image: var(--sunny);
-		background-repeat: no-repeat;
-		background-position: center;
-		background-size: contain;
-		& a {
-			position: absolute;
-			top: 2rem;
-			background-color: unset;
-		}
-	}
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	background-image: var(--sunny);
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: contain;
+
 	& footer {
-		position: absolute;
-		bottom: var(--pad-l);
-		& p {
-			text-align: center;
+		bottom: 0;
+	}
+
+	& header {
+		top: 0;
+		display: flex;
+		flex-direction: column;
+		justify-self: center;
+		& a, img {
+			z-index: 1;
+			display: inherit;
+			flex-direction: inherit;
+		}
+		& span {
+			position: absolute;
+			width: 0;
+			height: 0;
+			overflow: hidden;
 		}
 	}
-}
+
+	& footer,
+	header {
+		position: absolute;
+		left: 0;
+		right: 0;
+		text-align: center;
+	}
+}

_src/assets/css/default/nav.css

@@ -78,12 +78,6 @@ body>nav {
 		}
 	}
 
-	& svg {
-		fill: currentColor;
-		stroke: currentColor;
-		stroke-width: 0;
-	}
-
 	& details {
 		font-size: 1.4rem;
 	}

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

@@ -1,7 +1,8 @@
 @media (prefers-color-scheme: dark) {
 
 	article,
-	body {
+	body,
+	header svg {
 		color: var(--secondary-light-300);
 	}
 

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

@@ -1,7 +1,8 @@
 @media (prefers-color-scheme: light) {
 
 	article,
-	body {
+	body,
+	header svg {
 		color: var(--primary-dark-300);
 	}
 

_src/assets/js/cat.js

@@ -1,24 +1,40 @@
-import { audioPath } from './path.js'
+import { audioPath } from "./path.js";
+
 let pipe = document.getElementById("meow");
 let preload = new Image();
 preload.src = "/assets/img/button/braixdragon-cat2.gif";
 
-pipe.addEventListener("mouseover", func, true);
+let hoverTimeout;
+let hovered = false;
+let played = localStorage.getItem("audioPlayed") === "true";
+let audio = new Audio(`${audioPath}anvil_land_low.ogg`);
 
-function func() {
-    pipe.src = preload.src;
-}
-
-let audio = document.createElement("audio");
-audio.src = `${audioPath}anvil_land_low.ogg`;
-pipe.appendChild(audio);
+window.addEventListener("beforeunload", () => {
+	localStorage.removeItem("catflattened");
+});
 
 pipe.addEventListener(
-    "mouseover",
-    function () {
-        setTimeout(() => {
-            audio.play();
-        }, 1700);
-    },
-    { once: true }
-);
+	"mouseover",
+	() => {
+		if (played) return;
+		hovered = true;
+		hoverTimeout = setTimeout(() => {
+			if (hovered && !played) {
+				pipe.src = preload.src;
+				setTimeout(() => {
+					if (!played) {
+						audio.play();
+						played = true;
+						localStorage.setItem("catflattened", "true");
+					}
+				}, 600);
+			}
+		}, 650);
+	},
+	true
+);
+
+pipe.addEventListener("mouseout", () => {
+	hovered = false;
+	clearTimeout(hoverTimeout);
+});