From 17ffad34412fc8b8985d2da3b9ef448c989c49c1 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Tue, 11 Jan 2022 22:57:44 +0100
Subject: [PATCH] fix: prevent quick-facts column styling on mobile

---
 src/views/Anatomy.vue | 10 +++++-----
 src/views/General.vue | 22 +++++++++++++---------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/views/Anatomy.vue b/src/views/Anatomy.vue
index e2f7816..cbf1605 100644
--- a/src/views/Anatomy.vue
+++ b/src/views/Anatomy.vue
@@ -47,7 +47,7 @@
     <data-table class="prose" :dataset="getSebinData.colors" />
 
     <quick-facts>
-      <ul>
+      <ul class="col-2">
         <li>Bipedal plantigrade</li>
         <li>Red and yellow scales</li>
         <li>Yellow scales under chin, torso, underside of tail</li>
@@ -78,7 +78,7 @@
     <h3>Wings</h3>
 
     <quick-facts>
-      <ul>
+      <ul class="col-2">
         <li>
           Wingspan {{ wingspan / 100 }} meters ({{ toImperial(this.wingspan) }})
         </li>
@@ -120,7 +120,7 @@
     </ref-figure>
 
     <quick-facts>
-      <ul>
+      <ul class="col-2">
         <li>Round pupils, green iris</li>
         <li>Yellow spikes for eyebrows</li>
         <li>Yellow spikes on cheeks</li>
@@ -151,7 +151,7 @@
 
     <h3>Upper Body</h3>
     <quick-facts>
-      <ul>
+      <ul class="col-2">
         <li>Strong upper body</li>
         <li>Big pecs</li>
         <li>Defined abs</li>
@@ -371,7 +371,7 @@
       <data-table :dataset="getSebinData.penis" />
 
       <quick-facts>
-        <ul>
+        <ul class="col-2">
           <li>Human-shaped with ridges</li>
           <li>Ring-like sheath surrounding shaft</li>
           <li>
diff --git a/src/views/General.vue b/src/views/General.vue
index b238d3a..4208df9 100644
--- a/src/views/General.vue
+++ b/src/views/General.vue
@@ -139,7 +139,7 @@
       <data-table :dataset="getSebinData.preferences" />
 
       <quick-facts>
-        <ul class="col-3">
+        <ul class="col-2">
           <li>Supremely horny</li>
           <li>Confident, knows what he's got</li>
           <li>Dominant lover, likes it rough but is no brute</li>
@@ -200,17 +200,21 @@ export default {
 </script>
 
 <style lang="scss">
+@import "@/scss/_mixins.scss";
+
 ul {
-  &.col-2 {
-    columns: 2 auto;
-  }
+  @include mq-desktop {
+    &.col-2 {
+      columns: 2 auto;
+    }
 
-  &.col-3 {
-    columns: 3 auto;
-  }
+    &.col-3 {
+      columns: 3 auto;
+    }
 
-  &.col-4 {
-    columns: 4 auto;
+    &.col-4 {
+      columns: 4 auto;
+    }
   }
 }
 </style>