summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/components/Navigation.vue2
-rw-r--r--src/components/ServerStatus.vue17
-rw-r--r--src/views/NewsArchive.vue2
-rw-r--r--src/views/NotFound.vue13
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>