Migracja z wersji Vue 2 na Vue 3

src/App.scss

@@ -0,0 +1,162 @@
+@import "./styles/responsive.scss";
+@import "./styles/variables.scss";
+@import "./styles/global.scss";
+@import "./styles/scenery_status.scss";
+
+:root {
+  --clr-primary: #ffc014;
+  --clr-secondary: #2f2f2f;
+
+  --clr-bg: #333;
+
+  --clr-accent: #1085b3;
+  --clr-accent2: #ff3d5d;
+
+  --clr-skr: #ff5100;
+  --clr-twr: #ffbb00;
+}
+
+// VUE ROUTE CHANGE ANIMATION
+.view-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0.02;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+    min-height: 100%;
+  }
+}
+
+.route {
+  margin: 0 0.2em;
+
+  &-active {
+    color: $accentCol;
+    font-weight: bold;
+  }
+}
+
+// APP
+.app {
+  background: $bgCol;
+  color: white;
+
+  overflow: hidden;
+
+  font-size: 1rem;
+
+  @include smallScreen() {
+    font-size: calc(0.45rem + 1vw);
+  }
+}
+
+// CONTAINER
+.app_container {
+  display: flex;
+  flex-flow: column;
+
+  min-width: 0;
+  min-height: 100vh;
+
+  header {
+    flex: 0 0 auto;
+  }
+
+  main {
+    flex: 1 1 auto;
+  }
+
+  footer {
+    flex: 0 1 0.2em;
+  }
+}
+
+// HEADER
+.app_header {
+  background: $primaryCol;
+  padding: 0.15em;
+
+  border-radius: 0 0 1em 1em;
+
+  display: flex;
+  justify-content: center;
+}
+
+.header {
+  &_brand {
+    position: relative;
+    width: 100%;
+    font-size: 4.25em;
+
+    text-align: center;
+
+    img {
+      width: 0.8em;
+    }
+
+    .brand_lang {
+      position: absolute;
+      right: 0;
+
+      transform: translate(110%, -35%);
+
+      img {
+        width: 0.6em;
+      }
+
+      cursor: pointer;
+    }
+  }
+
+  &_info {
+    display: flex;
+    justify-content: space-between;
+
+    font-size: 1.25em;
+
+    margin: 0 0.3em;
+    padding: 0.2em;
+  }
+
+  &_links {
+    display: flex;
+    justify-content: center;
+
+    border-radius: 0.7em;
+
+    font-size: 1.25em;
+    padding: 0.5em;
+  }
+}
+
+// COUNTER
+.info_counter {
+  display: flex;
+  align-items: center;
+  color: $accentCol;
+
+  span {
+    margin: 0 0.15em;
+  }
+
+  img {
+    width: 1.35em;
+  }
+}
+
+// FOOTER
+footer.app_footer {
+  max-width: 100%;
+  padding: 0.5em;
+
+  z-index: 10;
+
+  background: #111;
+  color: white;
+
+  text-align: center;
+  vertical-align: middle;
+}