Improve a bit

1 files changed, 67 insertions, 72 deletions

diff --git a/public/style/main.css b/public/style/main.css
index 7602c7d..facafac 100644
--- a/public/style/main.css
+++ b/public/style/main.css
@@ -1,52 +1,44 @@
-/**************/
-/* Header bar */
-/**************/
+/******************/
+/* Root font-size */
+/******************/
 
-.headerBar {
-  background-color: #111111;
-  font-size: 70px;
-  box-shadow: 0px 2px 2px grey;
-  min-width: 1020px;
-  margin-bottom: 2px;
+@media screen and (max-width: 500px) {
+    html {
+        font-size: 60%;
+    }
 }
 
-.headerBar > button {
-  background-color: #111111;
-  color: white;
-  height: 150px;
-  line-height: 150px;
-  font-size: 70px;
-  border: none;
-  font-family: "DejaVu Serif";
-  transition: color 0.4s ease;
-}
-
-.headerBar > button:focus {
-  background-color: #222222;
+@media screen and (min-width: 500px) and (max-width: 900px) {
+    html {
+        font-size: 80%;
+    }
 }
 
-.headerBar > button.title {
-  letter-spacing: 12px;
-  padding: 0 50px;
+@media screen and (min-width: 900px) {
+    html {
+        font-size: 100%;
+    }
 }
 
-.headerBar > button.addTimer {
-  float: right;
-  padding: 0 50px;
-}
+/**************/
+/* Header bar */
+/**************/
 
-.headerBar > button:hover,
-.headerBar > button:hover {
-  color: #CCCC88;
-  border-color: #CCCC88;
+.headerBar {
+  display: flex;
+  justify-content: space-between;
+  background-color: #111111;
+  box-shadow: 0 0.1rem 0.1rem grey;
+  margin-bottom: 0.1rem;
 }
 
 .headerBar > button {
+  display: flex;
+  align-items: center;
   background-color: #111111;
   color: white;
-  height: 150px;
-  line-height: 150px;
-  font-size: 70px;
+  height: 6rem;
+  font-size: 3rem;
   border: none;
   font-family: "DejaVu Serif";
   transition: color 0.4s ease;
@@ -56,14 +48,10 @@
   background-color: #222222;
 }
 
-.headerBar > button.title {
-  letter-spacing: 12px;
-  padding: 0 50px;
-}
-
+.headerBar > button.title,
 .headerBar > button.addTimer {
-  float: right;
-  padding: 0 50px;
+  letter-spacing: 0.5rem;
+  padding: 0 2rem;
 }
 
 .headerBar > button:hover,
@@ -77,20 +65,29 @@
 /**********/
 
 .timers {
-  text-align: center;
-  font-size: 30px;
-  display: table;
-  table-layout: auto;
-  margin-left: auto;
-  margin-right: auto;
-  width: 1020px;
+  display: flex;
+  flex-direction: column;
+  font-size: 2rem;
+  align-items: center;
 }
 
 .timer {
-  line-height: 140px;
-  height: 140px;
+  display: flex;
+  align-items: center;
+  height: 10rem;
   position: relative;
-  display: table-row;
+}
+
+@media screen and (min-width: 700px) {
+    .timer {
+        width: 70%;
+    }
+}
+
+@media screen and (max-width: 700px) {
+    .timer {
+        width: 100%;
+    }
 }
 
 .timer:nth-child(even) {
@@ -101,19 +98,13 @@
   background-color: #FED5AE;
 }
 
-.timer .name,
-.timer .time,
-.timer button {
-  display: table-cell;
-}
-
 .timer button {
   background-color: rgba(0, 0, 0, 0);
   border: none;
-  width: 140px;
-  height: 140px;
-  font-size: 35px;
-  padding: 0px;
+  width: 10%;
+  height: 100%;
+  font-size: 2rem;
+  padding: 0;
   position: relative;
 }
 
@@ -126,24 +117,28 @@
 }
 
 .timer .name {
-  width: 400px;
-  letter-spacing: 2px;
+  width: 50%;
+  letter-spacing: 0.1rem;
   cursor: text;
+  margin-left: 1rem;
 }
 
 .timer .time {
-  width: 200px;
-  letter-spacing: 2px;
+  width: 8rem;
+  letter-spacing: 0.1rem;
+  border-radius: 0;
+}
+
+.timer .time .text {
   cursor: text;
-  border-radius: 0px;
 }
 
 .timer .progressBar {
   background-color: darkgrey;
   position: absolute;
   left: 0;
-  top: 133px;
-  height: 10px;
+  bottom: 0;
+  height: 0.8rem;
 }
 
 .timer.isRunning .progressBar {
@@ -155,8 +150,8 @@
 }
 
 .timer:hover.isRinging .progressBar {
-  top: 0px;
-  height: 143px;
+  top: 0;
+  height: 100%;
   z-index: 1;
   opacity: 0;
   cursor: pointer;