From f2948005e1efdc428fb83504c8763a57675ec774 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Tue, 11 Jan 2022 20:47:25 +0100
Subject: [PATCH] refactor: import specific SCSS mixins

---
 src/components/DataTable.vue  | 12 ++++++++++--
 src/components/Navigation.vue |  4 ++--
 src/components/NsfwSwitch.vue |  2 +-
 src/components/Prose.vue      | 10 +++++++---
 src/components/QuickFacts.vue |  6 +-----
 src/views/Abilities.vue       |  2 +-
 src/views/Home.vue            |  2 +-
 7 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 4107b78..de86db6 100644
--- a/src/components/DataTable.vue
+++ b/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;
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 3d5aa11..54f5a04 100644
--- a/src/components/Navigation.vue
+++ b/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;
   }
diff --git a/src/components/NsfwSwitch.vue b/src/components/NsfwSwitch.vue
index 8dd2bf9..a333d76 100644
--- a/src/components/NsfwSwitch.vue
+++ b/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",
diff --git a/src/components/Prose.vue b/src/components/Prose.vue
index 8c90220..71264b5 100644
--- a/src/components/Prose.vue
+++ b/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>
diff --git a/src/components/QuickFacts.vue b/src/components/QuickFacts.vue
index be6ae74..3d61d1c 100644
--- a/src/components/QuickFacts.vue
+++ b/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 {
diff --git a/src/views/Abilities.vue b/src/views/Abilities.vue
index 39e34b7..30ad8a6 100644
--- a/src/views/Abilities.vue
+++ b/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;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1c1e094..eee3d89 100644
--- a/src/views/Home.vue
+++ b/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;