accessibility

Signed-off-by: Skylar "The Cobra" Widulski <cobra@vern.cc>

footer.html

@@ -1,4 +1,5 @@
-<footer>
+</main>
+<footer class="constant">
 	<hr />
 	<p>Copyright (C) 2022 Skylar Widulski</p>
 	<p>Find the source code for this website on <a rel="source" href="//git.vern.cc/cobra/cobra.vern.cc">git</a></p>

nav.html

@@ -1,6 +1,7 @@
 <link rel="icon" href="/favicon.png" />
-<header>
+<header class="constant">
 	<a href=/><img style="border-radius:25%" src="/favicon.png" alt="Cobra" class="navlogo" /></a>
+	<a class="skip-to-content" href="#content">Skip to content</a>
 	<nav>
 		<a href="/projects">Projects</a>
 		<a href="/blog">Blog</a>
@@ -9,3 +10,4 @@
 	</nav>
 </header>
 <hr>
+<main id="content">

style.css

@@ -1,6 +1,5 @@
 body {
 	font-family:'Fira Code';
-/*	src:url("/woff/FiraCode-Regular.woff") format("woff"); */
 	margin:10px auto;
 	max-width:1200px;
 	line-height:1.5em;
@@ -9,8 +8,6 @@ body {
 	color:#d0d0d0;
 	padding:0 10%;
 	hyphens:auto;
-/*	transform:scale(0.8);
-	transform-origin:top; */
 }
 
 header {
@@ -20,7 +17,6 @@ header {
 	justify-content:space-between;
 	font-size:1.1em;
 	align-items:center;
-/*	font-variant:small-caps; */
 	overflow:hidden;
 	background-color:#0000007f;
 	backdrop-filter:blur(3px);
@@ -43,8 +39,12 @@ footer img {
 }
 
 nav {
-	display:inline-block;
-	line-height:1.3;
+	display:flex;
+	flex-direction:row;
+	flex-wrap:wrap;
+	justify-content:flex-end;
+	gap:1rem;
+/*	line-height:1.3; */
 }
 
 nav li {
@@ -133,3 +133,17 @@ input[type=submit] {
 .vern {
 	color:#ff6c6b;
 }
+
+.constant {
+	speak:none;
+}
+
+.skip-to-content {
+	opacity:0%;
+	cursor:default;
+}
+
+.skip-to-content:focus {
+	opacity:100%;
+	cursor:pointer;
+}