diff options
Diffstat (limited to 'src')
| -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> |