From 8a1dfb06120f191bedb94486c8d5682e5526cacb Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 13 Oct 2021 14:49:29 +0200
Subject: [PATCH] Extract vue-announcer and vue-skip-to styles (so that they're
 nt inline)

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/common.scss               |  2 +
 js/src/styles/vue-announcer.scss | 15 ++++++++
 js/src/styles/vue-skip-to.scss   | 63 ++++++++++++++++++++++++++++++++
 3 files changed, 80 insertions(+)
 create mode 100644 js/src/styles/vue-announcer.scss
 create mode 100644 js/src/styles/vue-skip-to.scss

diff --git a/js/src/common.scss b/js/src/common.scss
index 66979923b..30160e383 100644
--- a/js/src/common.scss
+++ b/js/src/common.scss
@@ -3,6 +3,8 @@
 @import "~bulma";
 @import "~bulma-divider";
 @import "~buefy/src/scss/buefy";
+@import "styles/vue-announcer.scss";
+@import "styles/vue-skip-to.scss";
 
 // a {
 //   color: $violet-2;
diff --git a/js/src/styles/vue-announcer.scss b/js/src/styles/vue-announcer.scss
new file mode 100644
index 000000000..0f3e06fcd
--- /dev/null
+++ b/js/src/styles/vue-announcer.scss
@@ -0,0 +1,15 @@
+/**
+ * Taken from https://github.com/vue-a11y/vue-announcer/blob/master/src/vue-announcer.vue because styles are inlined there
+ */
+
+.announcer {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/js/src/styles/vue-skip-to.scss b/js/src/styles/vue-skip-to.scss
new file mode 100644
index 000000000..fdb62d8f2
--- /dev/null
+++ b/js/src/styles/vue-skip-to.scss
@@ -0,0 +1,63 @@
+@import "../variables.scss";
+
+/**
+ * Taken from https://github.com/vue-a11y/vue-skip-to/blob/master/src/VueSkipTo.vue because styles are inlined there
+ */
+
+.vue-skip-to {
+  position: fixed;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+
+  * {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  &.focused,
+  &:hover {
+    left: 0;
+    top: 0;
+    clip: auto;
+    height: auto;
+    width: auto;
+    background-color: $white;
+    border: 2px solid $violet-3;
+  }
+
+  &,
+  &__nav-list {
+    list-style-type: none;
+  }
+
+  &__nav > span,
+  &__link {
+    display: block;
+    padding: 8px 16px;
+    color: $violet-3;
+    font-size: 18px;
+  }
+
+  &__nav > span {
+    border-bottom: 2px solid $violet-3;
+    font-weight: bold;
+  }
+
+  &,
+  &__link {
+    text-decoration: none;
+  }
+
+  &__link:focus {
+    outline: none;
+    background-color: $violet-3;
+    color: #f2f2f2;
+  }
+}