focus rings for header and footer

css/main.css

@@ -11,6 +11,7 @@
 	--color-text: light-dark(var(--color-dark), var(--color-light));
 	--color-bg: light-dark(var(--color-light), var(--color-dark));
 	--color-accent: light-dark(var(--color-blue-dark), var(--color-blue-light));
+	--color-accent-flipped: light-dark(var(--color-blue-light), var(--color-blue-dark));
 	--color-red: light-dark(var(--color-red-dark), var(--color-red-light));
 }
 
@@ -28,8 +29,8 @@
 }
 
 *:focus-visible {
-	outline-offset: .1rem;
+	outline-offset: .12rem;
-	outline: .1rem solid var(--color-accent);
+	outline: .12rem solid var(--color-accent);
 	border-radius: .25rem;
 }
 
@@ -134,13 +135,25 @@ a:visited {
 /* Header/nav/footer */
 header {
 	height: 20vh;
-	padding: 1rem;
+	padding: calc(20vh / 8);
 	background-color: var(--color-accent);
 }
 
 .logo {
 	height: 100%;
 	width: auto;
+	padding: calc(20vh / 30);
+	border: calc(20vh / 50) solid var(--color-accent);
+	border-radius: calc(20vh / 3);
+}
+
+header a:focus-visible {
+	outline: none; /* covered by logo rule below */
+}
+
+header a:focus-visible .logo {
+	border-color: var(--color-text);
+	outline: calc(20vh / 30) solid var(--color-accent-flipped);
 }
 
 @media (prefers-color-scheme: light) {
@@ -170,6 +183,10 @@ footer a:visited {
 	text-decoration-color: var(--color-bg);
 }
 
+footer a:focus-visible {
+	outline: .15rem solid var(--color-accent-flipped);
+}
+
 /* Misc */
 #hero {
 	aspect-ratio: 40 / 9;