From 33627a70044d547d3c0d9bed611e17dcbe1d1746 Mon Sep 17 00:00:00 2001
From: flifloo <flifloo@gmail.com>
Date: Fri, 14 Aug 2020 20:57:19 +0200
Subject: [PATCH] Add some responsive

---
 public/stylesheets/style.css | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 7035008..d1d8fbb 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -6,7 +6,7 @@ html, body {
 body {
   display: flex;
   align-items: center;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  font: large "Lucida Grande", Helvetica, Arial, sans-serif;
   background-color: #db970a;
   background-image: linear-gradient(white 2px, transparent 2px),
   linear-gradient(90deg, white 2px, transparent 2px),
@@ -16,6 +16,12 @@ body {
   background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
 }
 
+@media (hover: none) and (pointer: coarse) {
+  body {
+    font-size: xx-large;
+  }
+}
+
 .card {
   display: flex;
   flex-direction: column;
@@ -28,7 +34,8 @@ body {
  /* overflow-y: scroll; */
 }
 
-h1, h2, p{
+h1, h2, p, label {
+  display: block;
   text-align: center;
 }
 
@@ -43,25 +50,28 @@ a {
 }
 
 .field {
-  margin: auto auto 1em auto;
+  margin: 1em auto auto auto;
+  width: 90%;
 }
 
 .field input {
   box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 255, .2);
+  margin: auto;
+  width: 100%;
+  font-size: 100%;
 }
 
 .field input[type="text"], .field input[type="list"] {
-  margin: auto;
-  width: 10vw;
+  height: 2.5vh;
   border-top: none;
   border-left: none;
   border-right: none;
   border-bottom: 1px gray solid;
 }
 
-.field label {
-  display: block;
-  text-align: center;
+.field input[type="submit"] {
+  height: 4vh;
+  border: none;
 }
 
 #command-action {