aktualizace stylu - web interface

resolve #7

data/style.css

@@ -10,13 +10,13 @@ html {
   margin: 0;
 
   font-family: bebas;
-  font-size: 7vw;
+  font-size: min(4vh, 6vw);
   color: #404040;
 }
 
-main {
-  height: 100vh;
-  width: 100vw;
+body {
+  display: flex;
+  flex-direction: column;
 }
 
 header {
@@ -39,6 +39,7 @@ header {
   grid-template-rows: auto;
   align-items: center;
 }
+
 .logo h1 {
   display: inline-block;
   font-weight: 200;
@@ -46,6 +47,7 @@ header {
   margin-left: -0.3rem;
   font-size: 1.7rem;
 }
+
 .logo img {
   height: 1.4rem;
   margin-top: -0.3rem;
@@ -56,15 +58,24 @@ header {
   text-align: right;
   align-self: center;
 }
+
 #actual-state.topi {
   color: #31B907;
 }
+
 #actual-state {
   color: #e10000;
 }
+
 .state img {
   vertical-align: middle;
   margin-left: 0.2rem;
+  width: .8rem;
+}
+
+section {
+  flex-grow: 4;
+  overflow: scroll;
 }
 
 section h2 {
@@ -76,16 +87,16 @@ section h2 {
 
 .inputs {
   display: grid;
-  grid-template-columns: 10vw auto auto 8vw;
+  grid-template-columns: auto auto;
   grid-template-rows: auto auto auto auto;
   justify-items: center;
   align-items: center;
   text-align: center;
   grid-template-areas:
-    ". . offsetText ."
-    ". tempUp offsetUp ."
-    ". reqTemp offset ."
-    ". tempDown offsetDown .";
+    ". offsetText"
+    "tempUp offsetUp"
+    "reqTemp offset"
+    "tempDown offsetDown";
 }
 
 .inputs #tempUp {
@@ -96,6 +107,7 @@ section h2 {
 .inputs #tempDown {
   grid-area: tempDown;
   height: 3.2rem;
+  transform: rotate(180deg);
 }
 
 .inputs #reqTemp {
@@ -115,6 +127,7 @@ section h2 {
   grid-area: offsetUp;
   height: 2.5rem;
   margin-bottom: -1.5rem;
+  filter: invert(61%) sepia(81%) saturate(13%) hue-rotate(26deg) brightness(88%) contrast(86%);
 }
 
 .inputs #offset {
@@ -127,12 +140,12 @@ section h2 {
   grid-area: offsetDown;
   height: 2.5rem;
   margin-top: -1.5rem;
+  transform: rotate(180deg);
+  filter: invert(61%) sepia(81%) saturate(13%) hue-rotate(26deg) brightness(88%) contrast(86%);
 }
 
 footer {
   background-color: #404040;
-  position: absolute;
-  bottom: 0;
   width: 100vw;
   color: white;
 }
@@ -162,4 +175,15 @@ a {
 
 a:visited {
   color: #c1c1c1;
+}
+
+@media only screen and (min-width: 768px) {
+  .inputs {
+    grid-template-columns: 35vw auto auto 30vw;
+    grid-template-areas:
+      ". . offsetText ."
+      ". tempUp offsetUp ."
+      ". reqTemp offset ."
+      ". tempDown offsetDown .";
+  }
 }