build: switch from yarn to npm to manage js dependencies and move js contents to root

yarn v1 is being deprecated and starts to have some issues

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

src/styles/_mixins.scss

@@ -0,0 +1,55 @@
+@mixin margin($block-start, $inline-end, $block-end, $inline-start) {
+  @include margin-left($inline-start);
+  @include margin-right($inline-end);
+
+  margin-top: $block-start;
+  margin-bottom: $block-end;
+}
+
+@mixin padding($block-start, $inline-end, $block-end, $inline-start) {
+  @include padding-left($inline-start);
+  @include padding-right($inline-end);
+
+  padding-top: $block-start;
+  padding-bottom: $block-end;
+}
+
+@mixin margin-left($value) {
+  @supports (margin-inline-start: $value) {
+    margin-inline-start: $value;
+  }
+
+  @supports not (margin-inline-start: $value) {
+    margin-left: $value;
+  }
+}
+
+@mixin margin-right($value) {
+  @supports (margin-inline-end: $value) {
+    margin-inline-end: $value;
+  }
+
+  @supports not (margin-inline-end: $value) {
+    margin-right: $value;
+  }
+}
+
+@mixin padding-left($value) {
+  @supports (padding-inline-start: $value) {
+    padding-inline-start: $value;
+  }
+
+  @supports not (padding-inline-start: $value) {
+    padding-left: $value;
+  }
+}
+
+@mixin padding-right($value) {
+  @supports (padding-inline-end: $value) {
+    padding-inline-end: $value;
+  }
+
+  @supports not (padding-inline-end: $value) {
+    padding-right: $value;
+  }
+}

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;
+}

src/styles/vue-skip-to.scss

@@ -0,0 +1,58 @@
+@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;
+  }
+
+  &,
+  &__nav-list {
+    list-style-type: none;
+  }
+
+  &__nav > span,
+  &__link {
+    display: block;
+    padding: 8px 16px;
+    font-size: 18px;
+  }
+
+  &__nav > span {
+    font-weight: bold;
+  }
+
+  &,
+  &__link {
+    text-decoration: none;
+  }
+
+  &__link:focus {
+    outline: none;
+    color: #f2f2f2;
+  }
+}