From 7962de566727df6f3a53211ccea1e95f3e0013a9 Mon Sep 17 00:00:00 2001
From: Bob Mottram <bob@freedombone.net>
Date: Tue, 24 Sep 2019 11:48:57 +0100
Subject: [PATCH] Buttons are taller on mobile so that you can get your finger
 on them

---
 epicyon-profile.css | 43 +++++++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/epicyon-profile.css b/epicyon-profile.css
index 65b1b7762..3f5c3486c 100644
--- a/epicyon-profile.css
+++ b/epicyon-profile.css
@@ -25,6 +25,9 @@
     --button-selected-highlighted: darkgreen;
     --button-approve: darkgreen;
     --button-deny: darkred;
+    --button-height: 10px;
+    --button-height-padding-mobile: 20px;
+    --button-height-padding: 10px;
 }
 
 body, html {
@@ -805,7 +808,7 @@ input[type=checkbox]
         color: var(--button-text);
         text-align: center;
         font-size: 18px;
-        padding: 10px;
+        padding: var(--button-height-padding);
         width: 10%;
         max-width: 100px;
         min-width: 80px;
@@ -820,7 +823,7 @@ input[type=checkbox]
 	color: var(--button-text);
 	text-align: center;
 	font-size: 18px;
-	padding: 10px;
+	padding: var(--button-height-padding);
 	width: 10%;
 	max-width: 100px;
 	min-width: 80px;
@@ -835,7 +838,7 @@ input[type=checkbox]
         color: var(--button-text);
         text-align: center;
         font-size: 18px;
-        padding: 10px;
+        padding: var(--button-height-padding);
         width: 10%;
         max-width: 100px;
         min-width: 80px;
@@ -850,7 +853,7 @@ input[type=checkbox]
 	color: var(--button-text);
 	text-align: center;
 	font-size: 18px;
-	padding: 10px;
+	padding: var(--button-height-padding);
 	width: 10%;
 	max-width: 100px;
 	min-width: 80px;
@@ -865,7 +868,7 @@ input[type=checkbox]
 	color: #FFFFFF;
 	text-align: center;
 	font-size: 18px;
-	padding: 10px;
+	padding: var(--button-height-padding);
 	width: 20%;
 	max-width: 200px;
 	min-width: 80px;
@@ -880,7 +883,7 @@ input[type=checkbox]
 	color: #FFFFFF;
 	text-align: center;
 	font-size: 18px;
-	padding: 10px;
+	padding: var(--button-height-padding);
 	width: 20%;
 	max-width: 200px;
 	min-width: 80px;
@@ -913,7 +916,7 @@ input[type=checkbox]
         background-color: var(--button-background);
         color: var(--button-text);
         float: right;
-        padding: 10px;
+        padding: var(--button-height-padding);
         margin: 15px;
         border: none;
         border-radius: 4px;
@@ -925,7 +928,7 @@ input[type=checkbox]
         background-color: var(--button-background);
         color: var(--button-text);
         float: left;
-        padding: 10px;
+        padding: var(--button-height-padding);
         margin: 15px;
         border: none;
         border-radius: 4px;
@@ -948,7 +951,7 @@ input[type=checkbox]
         background-color: var(--button-background);
         color: var(--button-text);
         float: right;
-        padding: 10px;
+        padding: var(--button-height-padding);
         margin: 15px;
         border: none;
         border-radius: 4px;
@@ -966,7 +969,7 @@ input[type=checkbox]
 	color: var(--button-text);
 	text-align: center;
 	font-size: 18px;
-	padding: 10px;
+	padding: var(--button-height-padding);
 	width: 20%;
 	max-width: 200px;
 	min-width: 100px;
@@ -1030,7 +1033,7 @@ input[type=checkbox]
         color: var(--button-text);
         text-align: center;
         font-size: 32px;
-        padding: 10px;
+        padding: var(--button-height-padding-mobile);
         width: 20%;
         max-width: 400px;
         min-width: 80px;
@@ -1045,7 +1048,7 @@ input[type=checkbox]
 	color: var(--button-text);
 	text-align: center;
 	font-size: 32px;
-	padding: 10px;
+	padding: var(--button-height-padding-mobile);
 	width: 20%;
 	max-width: 400px;
 	min-width: 80px;
@@ -1060,7 +1063,7 @@ input[type=checkbox]
         color: var(--button-text);
         text-align: center;
         font-size: 32px;
-        padding: 10px;
+        padding: var(--button-height-padding-mobile);
         width: 20%;
         max-width: 400px;
         min-width: 80px;
@@ -1075,7 +1078,7 @@ input[type=checkbox]
 	color: var(--button-text);
 	text-align: center;
 	font-size: 32px;
-	padding: 10px;
+	padding: var(--button-height-padding-mobile);
 	width: 20%;
 	max-width: 400px;
 	min-width: 80px;
@@ -1090,7 +1093,7 @@ input[type=checkbox]
 	color: #FFFFFF;
 	text-align: center;
 	font-size: 32px;
-	padding: 10px;
+	padding: var(--button-height-padding-mobile);
 	width: 20%;
 	max-width: 400px;
 	min-width: 80px;
@@ -1105,7 +1108,7 @@ input[type=checkbox]
 	color: #FFFFFF;
 	text-align: center;
 	font-size: 32px;
-	padding: 10px;
+	padding: var(--button-height-padding-mobile);
 	width: 20%;
 	max-width: 400px;
 	min-width: 80px;
@@ -1138,7 +1141,7 @@ input[type=checkbox]
         background-color: var(--button-background);
         color: var(--button-text);
         float: right;
-        padding: 10px;
+        padding: var(--button-height-padding-mobile);
         margin: 15px;
         border: none;
         border-radius: 4px;
@@ -1150,7 +1153,7 @@ input[type=checkbox]
         background-color: var(--button-background);
         color: var(--button-text);
         float: left;
-        padding: 10px;
+        padding: var(--button-height-padding-mobile);
         margin: 15px;
         border: none;
         border-radius: 4px;
@@ -1173,7 +1176,7 @@ input[type=checkbox]
         background-color: var(--button-background);
         color: var(--button-text);
         float: right;
-        padding: 10px;
+        padding: var(--button-height-padding-mobile);
         margin: 15px;
         border: none;
         border-radius: 4px;
@@ -1191,7 +1194,7 @@ input[type=checkbox]
 	color: var(--button-text);
 	text-align: center;
 	font-size: 30px;
-	padding: 10px;
+	padding: var(--button-height-padding-mobile);
 	width: 20%;
 	max-width: 200px;
 	min-width: 100px;