refactor: import specific SCSS mixins

src/components/DataTable.vue

@@ -63,14 +63,22 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/scss/base.scss";
+@import "@/scss/_variables.scss";
+@import "@/scss/_mixins.scss";
 
 .datatable {
   border-collapse: collapse;
   width: 100%;
-  max-width: 55rem;
   margin: auto;
 
+  @include mq-desktop {
+    max-width: 45rem;
+  }
+
+  @include mq-bigscreen {
+    max-width: 55rem;
+  }
+
   &__heading,
   &__cell {
     padding: 0.25em 0.5em;

src/components/Navigation.vue

@@ -23,7 +23,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/scss/base.scss";
+@import "@/scss/_variables.scss";
+@import "@/scss/_mixins.scss";
 
 .nav {
   overflow: auto;
@@ -89,7 +90,6 @@ export default {
     position: absolute;
     width: 0;
     height: 0.125em;
-    // background-color: $copy-color;
     bottom: 0;
     transition: all 0.2s ease-in-out;
   }

src/components/NsfwSwitch.vue

@@ -25,7 +25,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/scss/base.scss";
+@import "@/scss/_variables.scss";
 
 .nsfw-switch {
   font-family: "apple color emoji", "segoe ui emoji", "noto color emoji",

src/components/Prose.vue

@@ -5,7 +5,7 @@
 </template>
 
 <style lang="scss">
-@import "@/scss/base.scss";
+@import "@/scss/_mixins.scss";
 
 .prose {
   padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
@@ -16,18 +16,22 @@
   p,
   .quickfacts,
   .btn-group {
-    max-width: 55rem;
     margin: {
       left: 1rem;
       right: 1rem;
     }
 
-    @media (min-width: 55em) {
+    @include mq-desktop {
+      max-width: 45rem;
       margin: {
         left: auto;
         right: auto;
       }
     }
+
+    @include mq-bigscreen {
+      max-width: 55rem;
+    }
   }
 }
 </style>

src/components/QuickFacts.vue

@@ -24,7 +24,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/scss/base.scss";
+@import "@/scss/_variables.scss";
 
 .quickfacts {
   border-radius: 1em;
@@ -83,10 +83,6 @@ export default {
     ul {
       margin: 0;
       padding: 0 0.5em;
-
-      @media (min-width: 40em) {
-        columns: 2 auto;
-      }
     }
 
     li {

src/views/Abilities.vue

@@ -101,7 +101,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/scss/base.scss";
+@import "@/scss/_mixins.scss";
 
 .attacks {
   display: flex;

src/views/Home.vue

@@ -38,7 +38,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/scss/base.scss";
+@import "@/scss/_mixins.scss";
 
 .btn-group {
   justify-content: space-evenly;