hover and focus, sample data handling, skip to content link, more

css/nav.css

@@ -1,40 +1,44 @@
-nav {
-  margin: 1rem 25%;
-  text-align: center;
-  border-bottom: solid var(--color-pink);
+nav,
+footer {
+	padding: 1rem 0;
 }
 
-nav a,
+nav ul,
+footer ul {
+  list-style: none;
+  display: flex;
+  flex-flow: column;
+  text-align: center;
+	gap: .2rem;
+}
+
+header,
+nav li,
 footer li {
   font-family: "Bebas Neue";
   font-size: 1.3rem;
 }
 
-nav a {
-  text-decoration: none;
-}
-
-.wip {
-  margin: 1rem 0;
-  border: solid var(--color-cyan);
-  border-radius: .1rem;
-  padding: 1rem;
-}
-
-.wip p {
-  margin: 0;
+header {
+  border-bottom: solid var(--color-pink);
 }
 
 footer {
-	padding: 1rem 0;
+  border-top: solid var(--color-pink);
 }
 
-footer ul {
-	list-style: none;
-	display: flex;
-	justify-content: space-around;
+a[aria-current="page"] {
+  text-decoration: line-through;
+  color: rgb(from var(--color-pink) r g b / 65%);
 }
 
-footer li {
-	display: inline;
+/* Skip link */
+#skip {
+	-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
+}
+
+#skip:focus-visible {
+	-webkit-clip-path: none;
+	clip-path: none;
 }