diff options
| author | Helianthella <git@gumi.ca> | 2020-12-25 22:37:30 -0500 |
|---|---|---|
| committer | Helianthella <git@gumi.ca> | 2020-12-25 22:37:30 -0500 |
| commit | 618691cbce7932e1ca4e79873b7b5b3550dc51a9 (patch) | |
| tree | 16c087d57c9dde169d1266df4319aca934230db9 | |
| parent | 965059649ff6de8849f5091435befddba18ced93 (diff) | |
| download | website-618691cbce7932e1ca4e79873b7b5b3550dc51a9.tar.gz website-618691cbce7932e1ca4e79873b7b5b3550dc51a9.tar.bz2 website-618691cbce7932e1ca4e79873b7b5b3550dc51a9.tar.xz website-618691cbce7932e1ca4e79873b7b5b3550dc51a9.zip | |
further improve accessibility
| -rw-r--r-- | src/components/Navigation.vue | 2 | ||||
| -rw-r--r-- | src/components/ServerStatus.vue | 17 | ||||
| -rw-r--r-- | src/views/NewsArchive.vue | 2 | ||||
| -rw-r--r-- | 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> |