restruct: updated sass version and rules

src/components/App/AppFooter.vue

@@ -36,6 +36,4 @@ export default defineComponent({
     }
   }
 });
-</script>
-
-<style scoped></style>
+</script>

src/components/App/AppHeader.vue

@@ -116,9 +116,9 @@ export default defineComponent({
   }
 });
 </script>
+
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
 
 // HEADER
 .app_header {
@@ -126,7 +126,7 @@ export default defineComponent({
   justify-content: center;
 
   position: relative;
-  background-color: $primaryCol;
+  background-color: #2c2c2c;
 }
 
 .header {
@@ -141,7 +141,7 @@ export default defineComponent({
 
     border-radius: 0 0 1em 1em;
 
-    @include smallScreen {
+    @include responsive.smallScreen{
       position: relative;
       margin-top: 0.5em;
     }
@@ -180,7 +180,7 @@ export default defineComponent({
 
     padding: 0.5em;
 
-    @include smallScreen {
+    @include responsive.smallScreen{
       transform: translateX(85%);
     }
   }

src/components/App/Clock.vue

@@ -6,9 +6,7 @@
 import { computed, defineComponent, ref } from 'vue';
 export default defineComponent({
   name: 'VueClock',
-  data: () => ({
-    timestamp: Date.now()
-  }),
+  data: () => ({ timestamp: Date.now() }),
   setup() {
     let timestamp = ref(Date.now());
 
@@ -28,8 +26,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
 .clock {
   display: flex;
   align-items: center;

src/components/App/StatusIndicator.vue

@@ -310,7 +310,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';
 
 // INDICATOR TOOLTIP ANIMATION
 .tooltip-anim {
@@ -379,7 +379,7 @@ export default defineComponent({
       content: '';
     }
 
-    @include midScreen() {
+    @include responsive.midScreen() {
       left: auto;
       right: 200%;
 
@@ -393,7 +393,7 @@ export default defineComponent({
       }
     }
 
-    @include smallScreen() {
+    @include responsive.smallScreen{
       min-width: 8em;
     }
   }

src/components/App/UpdateCard.vue

@@ -73,11 +73,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/variables';
-
 ::v-deep(h1) {
   text-align: center;
-  color: $accentCol;
+  color: var(--clr-primary);
 }
 
 ::v-deep(h2) {