more

css/nav.css

@@ -10,21 +10,52 @@ nav {
 	a[aria-current="page"] {
 		text-decoration: underline solid .2em var(--color-title-bg);
 	}
+
+	a[aria-current="page"]:focus-visible {
+		text-decoration: none;
+	}
 }
 
 header nav {
+	--font-size: 1.4rem;
+	--header-height: 12vh;
+
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	font-size: 1.4rem;
+	font-size: var(--font-size);
+	line-height: 1;
 
-	> a {
-		height: 5.5rem;
+	#skip {
+		position: absolute;
+		left: -999px;
+		top: auto;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		z-index: -99;
+		background: var(--color-nav-dark);
 	}
 
-	img {
-		height: 100%;
+	#skip:focus-visible {
+		display: inline-block;
+		left: 10%;
+		top: calc((var(--header-height) - var(--font-size)) / 2);
 		width: auto;
+		height: auto;
+		overflow: auto;
+		z-index: 99;
+	}
+
+	a:has(img) {
+		height: calc(var(--header-height) - 1rem);
+		margin: .5rem;
+		border-radius: .5em;
+
+		img {
+			height: 100%;
+			width: auto;
+		}
 	}
 
 	ul {
@@ -43,28 +74,32 @@ header nav {
 
 @media (max-width: 650px) {
 	header nav {
-		--height: 4.5rem;
-
 		display: grid;
 		grid-template-areas:
 			"home button"
 			"links links";
 		padding: 0;
 
-		> a {
+	 	a:has(img) {
 			grid-area: home;
-			height: var(--height);
+			height: calc(var(--header-height) - 1rem);
+			margin: .5rem;
 		}
 
 		button {
 			grid-area: button;
 			display: unset;
 			margin-inline: 1rem;
-			padding: 1rem;
+			padding: .5rem .75rem;
 			border: none;
 			background: var(--color-nav-dark);
 			color: var(--color-nav-light);
 			cursor: pointer;
+			border-radius: .5em;
+		}
+
+		button:focus-visible {
+			outline: .1em solid var(--color-title-bg);
 		}
 
 		ul[aria-hidden="true"] {
@@ -81,7 +116,7 @@ header nav {
 			border-top: .5rem solid var(--color-title-bg);
 			border-bottom: .5rem solid var(--color-title-bg);
 			position: absolute;
-			top: var(--height);
+			top: var(--header-height);
 			width: 100%;
 
 			a {