more

_includes/header.njk

@@ -1,7 +1,9 @@
 <header>
 	<nav aria-label="main navigation">
+    <a id="skip" href="#main">skip to main content</a>
+
 	  <a href="/" {% if page.url == "/" %}aria-current="page"{% endif %} title="go home">
-			<img src="/img/RGLK+LOGO.webp" alt="the logo for Rachel Guinevere LordKenaga, a dappled multicolor circle with several oval lines surrounding and overlapping. Inside in yellow it reads rglk art.">
+			<img src="/img/logo.webp" alt="the logo for Rachel Guinevere LordKenaga, a dappled multicolor circle with several oval lines surrounding and overlapping. Inside in yellow it reads rglk art.">
     </a>
 
     <button aria-label="menu" aria-expanded="false" class="menu-button-mobile">

css/home.css

@@ -1,10 +1,10 @@
 .tagline {
 	margin-block: 2rem;
 	p {
-		font-size: 1.2rem;
+		font-size: 1.3rem;
 		font-family: var(--font-headers);
 		text-align: center;
-		color: var(--color-nav-light);
+		color: var(--color-headers);
 	}
 }
 

css/main.css

@@ -128,6 +128,7 @@ p {
 
 a {
 	color: var(--color-text);
+	border-radius: .25em;
 	text-decoration-line: underline;
 	text-decoration-style: solid;
 	text-decoration-thickness: .2em;
@@ -141,6 +142,11 @@ a {
 	}
 }
 
+a:focus-visible {
+	outline: .1em solid var(--color-title-bg);
+	text-decoration: none;
+}
+
 a:active {
 	text-decoration-thickness: .4em;
 }

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 {