From 618691cbce7932e1ca4e79873b7b5b3550dc51a9 Mon Sep 17 00:00:00 2001
From: Helianthella <git@gumi.ca>
Date: Fri, 25 Dec 2020 22:37:30 -0500
Subject: further improve accessibility

---
 src/components/Navigation.vue   |  2 +-
 src/components/ServerStatus.vue | 17 ++++++++++++++---
 src/views/NewsArchive.vue       |  2 +-
 src/views/NotFound.vue          | 13 +++++++++++++
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 3ced42e..4fec0ff 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -93,7 +93,7 @@
 			border: solid 1px #CBA083;
 			padding: 1ch;
 
-			&:hover, &.router-link-exact-active, &.custom-active {
+			&:is(:hover, :focus), &.router-link-exact-active, &.custom-active {
 				background-color: rgba(255,255,255,0.4);
 				border: solid 1px #2f2e32;
 			}
diff --git a/src/components/ServerStatus.vue b/src/components/ServerStatus.vue
index d9d23b2..dd4eaa7 100644
--- a/src/components/ServerStatus.vue
+++ b/src/components/ServerStatus.vue
@@ -9,13 +9,24 @@
 <style scoped>
 aside :any-link {
 	text-decoration: none;
-	text-shadow: 0 0 1ch #e1d6cf;
-	color: green;
+	color: #0E490B;
 	display: block;
 	padding: 8px;
 
 	&.offline {
-		color: #d42424;
+		color: #810909;
+
+		&:is(:hover, :focus)::before {
+			content: "⚠️";
+			padding-right: 1em;
+			opacity: .6;
+		}
+
+		&:is(:hover, :focus):after {
+			content: "⚠️";
+			padding-left: 1em;
+			opacity: .6;
+		}
 	}
 }
 </style>
diff --git a/src/views/NewsArchive.vue b/src/views/NewsArchive.vue
index c00810a..b673fc8 100644
--- a/src/views/NewsArchive.vue
+++ b/src/views/NewsArchive.vue
@@ -24,7 +24,7 @@
 		border-radius: 30%;
 		opacity: .6;
 
-		&:hover {
+		&:is(:hover, :focus) {
 			background: orange;
 			color: #fff;
 			opacity: 1;
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index 35b9753..5dab5d0 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -2,5 +2,18 @@
 	<main>
 		<h1>Page not found</h1>
 		<p>This page does not exist or has been removed.</p>
+		<p><router-link :to="{ name: 'home' }">back to home page</router-link></p>
 	</main>
 </template>
+
+<style scoped>
+a {
+	margin-top: 2em;
+	font-size: 1.3em;
+
+	&::before {
+		content: "🠨  ";
+		text-decoration: none;
+	}
+}
+</style>
-- 
cgit v1.2.3-70-g09d2