From cded42ef135a57f7496b51e3a6686fbef4067e52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Thu, 23 Jan 2020 10:11:24 +0100
Subject: [PATCH 1/3] Styling for elements on the landingpage

---
 src/components/VinlottisPage.vue |  7 ++++++-
 src/ui/TotalBought.vue           | 12 ++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/VinlottisPage.vue b/src/components/VinlottisPage.vue
index 8e277a9..34099ef 100644
--- a/src/components/VinlottisPage.vue
+++ b/src/components/VinlottisPage.vue
@@ -65,6 +65,11 @@ export default {
 
 .left-bottom {
   width: 75%;
+
+  @include mobile {
+    padding: 0 1.25rem;
+    width: 100%;
+  }
 }
 
 .bought-and-highscore-separator {
@@ -180,7 +185,7 @@ h1 {
     justify-content: center;
     align-items: center;
 
-    padding-top: 0;
+    padding: 0;
     margin-top: 30px;
   }
 
diff --git a/src/ui/TotalBought.vue b/src/ui/TotalBought.vue
index 90a766f..d24d43e 100644
--- a/src/ui/TotalBought.vue
+++ b/src/ui/TotalBought.vue
@@ -106,6 +106,12 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
+
+  @include mobile {
+    flex-direction: row;
+    justify-content: unset;
+    align-items: center;
+  }
 }
 
 .number-container {
@@ -120,6 +126,12 @@ export default {
 
 .inner-text-container {
   padding-left: 5px;
+
+  // TODO fix styling for displaying in columns
+  @include mobile {
+    margin-top: auto;
+    padding-bottom: 5px;
+  }
 }
 
 .bought-number-span {

From 3a04f5578725c0b191accac6d1da62f87ea5150b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Thu, 23 Jan 2020 10:11:37 +0100
Subject: [PATCH 2/3] Borderwidth set to 2px on both graphs.

---
 src/ui/PurchaseGraph.vue | 4 ++++
 src/ui/WinGraph.vue      | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/ui/PurchaseGraph.vue b/src/ui/PurchaseGraph.vue
index 2d73a65..353abe7 100644
--- a/src/ui/PurchaseGraph.vue
+++ b/src/ui/PurchaseGraph.vue
@@ -24,24 +24,28 @@ export default {
       label: "Blå",
       borderColor: "#57d2fb",
       backgroundColor: "#d4f2fe",
+      borderWidth: 2,
       data: []
     };
     let yellow = {
       label: "Gul",
       borderColor: "#ffde5d",
       backgroundColor: "#fff6d6",
+      borderWidth: 2,
       data: []
     };
     let red = {
       label: "Rød",
       borderColor: "#ef5878",
       backgroundColor: "#fbd7de",
+      borderWidth: 2,
       data: []
     };
     let green = {
       label: "Grønn",
       borderColor: "#10e783",
       backgroundColor: "#c8f9df",
+      borderWidth: 2,
       data: []
     };
 
diff --git a/src/ui/WinGraph.vue b/src/ui/WinGraph.vue
index 125f466..d48818d 100644
--- a/src/ui/WinGraph.vue
+++ b/src/ui/WinGraph.vue
@@ -23,24 +23,28 @@ export default {
       label: "Blå",
       borderColor: "#57d2fb",
       backgroundColor: "#d4f2fe",
+      borderWidth: 2,
       data: []
     };
     let yellow = {
       label: "Gul",
       borderColor: "#ffde5d",
       backgroundColor: "#fff6d6",
+      borderWidth: 2,
       data: []
     };
     let red = {
       label: "Rød",
       borderColor: "#ef5878",
       backgroundColor: "#fbd7de",
+      borderWidth: 2,
       data: []
     };
     let green = {
       label: "Grønn",
       borderColor: "#10e783",
       backgroundColor: "#c8f9df",
+      borderWidth: 2,
       data: []
     };
 

From faa742fa8e25a9484e45eb2748a30165975b4a6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Thu, 23 Jan 2020 10:42:29 +0100
Subject: [PATCH 3/3] Padding on total text

---
 src/ui/TotalBought.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/ui/TotalBought.vue b/src/ui/TotalBought.vue
index d24d43e..a676338 100644
--- a/src/ui/TotalBought.vue
+++ b/src/ui/TotalBought.vue
@@ -134,6 +134,16 @@ export default {
   }
 }
 
+@include mobile {
+  .total-container {
+    > div:nth-of-type(2) {
+      margin-top: auto;
+      padding-bottom: 4px;
+      padding-left: 5px;
+    }
+  }
+}
+
 .bought-number-span {
   display: inline-flex;
 }