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

css/home.css

@@ -107,3 +107,18 @@
 	font-size: .85rem;
 	text-align: right;
 }
+
+/* Handling for sample data and wip stuff */
+.draft h3,
+.draft p {
+	opacity: .6;
+}
+
+.wip {
+	border-top: solid var(--color-pink);
+	border-bottom: solid var(--color-pink);
+	border-left: .5rem solid var(--color-cyan);
+	border-right: .5rem solid var(--color-cyan);
+	padding: 1rem 1rem 0;
+	margin: 1rem 0 2rem;
+}

css/main.css

@@ -36,7 +36,6 @@ body {
 
 main {
 	padding-bottom: 2rem;
-	border-bottom: solid var(--color-pink);
 }
 
 @media (max-width: 1050px) {
@@ -83,12 +82,29 @@ p {
 
 a {
 	color: var(--color-cyan);
+	text-decoration-thickness: .1rem;
+	transition: text-decoration-thickness .5s;
+	border-radius: .05rem;
 }
 
 a:visited {
 	color: var(--color-pink);
 }
 
+@media (any-hover: hover) {
+	a:hover {
+		text-decoration-thickness: .2rem;
+	}
+}
+
+a:focus-visible {
+	outline: solid var(--color-pink);
+}
+
+a:visited:focus-visible {
+	outline-color: var(--color-cyan);
+}
+
 main ul {
 	margin-left: 1rem;
 	margin-bottom: 1rem;

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;
 }