1 files changed, 79 insertions, 35 deletions

diff --git a/public/main.css b/public/main.css
index f1efc26..5df74af 100644
--- a/public/main.css
+++ b/public/main.css
@@ -10,15 +10,17 @@ html {
 /* Constants */
 
 :root {
+  --color-active: #F3E87F;
   --color-header: #333333;
-  --color-action: #993333;
-  --color-action-darker: #773333;
-  --color-timer-arc-total: #EEEEEE;
-  --color-timer-arc-progress: #71b571;
+  --color-action: #333333;
+  --color-action-darker: #222222;
+  --color-prepare: #3B6EDC;
+  --color-pause: #888888;
+  --color-work: #71b571;
+  --color-rest: #B15B5B;
+  --color-timer-arc-total: #222222;
   --color-timer-hover: #DDEEDD;
 
-  --dial-width: 20rem;
-
   --base-font-size: 18px;
 }
 
@@ -38,6 +40,11 @@ body {
   margin: 0;
 }
 
+.g-Layout__Page {
+  height: 100vh;
+  overflow-y: auto;
+}
+
 .g-Layout__Header {
   background-color: var(--color-header);
   color: white;
@@ -113,26 +120,42 @@ body {
 /* Timer */
 
 .g-Timer {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: var(--color-header);
+  display: grid;
+  grid-template-columns: 10% auto 10%;
+  grid-template-rows: 10% auto 10% 10% 10%;
   color: white;
 }
 
+.g-Timer--Work {
+  background-color: var(--color-work);
+}
+
+.g-Timer--Rest {
+  background-color: var(--color-rest);
+}
+
+.g-Timer--Prepare {
+  background-color: var(--color-prepare);
+}
+
+.g-Timer__Pause {
+  background-color: var(--color-pause);
+}
+
 .g-Timer__Dial {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  width: var(--dial-width);
-  height: var(--dial-width);
-  cursor: pointer;
+
+  width: 100%;
+  height: 100%;
+  grid-row: 2;
+  grid-column: 2;
+
   background-color: transparent;
   color: inherit;
   font-size: 3rem;
-  margin: 2rem 0;
   position: relative;
   border: none;
 }
@@ -148,45 +171,66 @@ body {
 .g-Timer__ArcTotal {
   stroke: var(--color-timer-arc-total);
   fill: none;
-  stroke-width: 10;
+  stroke-width: 20;
 }
 
-.g-Timer__ArcProgress {
-  stroke: var(--color-timer-arc-progress);
+.g-Timer__ArcPrepare {
+  stroke: var(--color-prepare);
   fill: none;
-  stroke-width: 10;
+  stroke-width: 18;
 }
 
-.g-Timer__Step {
-  margin-bottom: 0.5rem;
+.g-Timer__ArcWork {
+  stroke: var(--color-work);
+  fill: none;
+  stroke-width: 18;
 }
 
-.g-Timer__Duration:hover {
-  background-color: var(--color-timer-hover);
-  color: initial;
+.g-Timer__ArcRest {
+  stroke: var(--color-rest);
+  fill: none;
+  stroke-width: 18;
 }
 
-.g-Timer__TabataAndCycle {
-  display: flex;
-  justify-content: space-around;
-  font-size: 1.5rem;
-  width: var(--dial-width);
+.g-Timer__ArcProgress {
+  stroke: var(--color-active);
+  fill: none;
+  stroke-width: 18;
 }
 
-.g-Timer__Tabata,
-.g-Timer__Cycle {
-  text-align: center;
-  margin-bottom: 1rem;
+.g-Timer__Step {
+  margin-bottom: 2rem;
 }
 
-.g-Timer__Stop {
+.g-Timer__Buttons {
+  display: flex;
+  justify-content: space-around;
+  grid-row: 4;
+  grid-column: 2;
+  width: 100%;
+  height: 100%;
+}
+
+.g-Timer__Button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 1.5rem;
   background-color: var(--color-action);
   border: 3px solid var(--color-action-darker);
   color: white;
   padding: 0.5rem 0.8rem;
   width: 10rem;
-  margin-top: 2rem;
   cursor: pointer;
   text-align: center;
+  text-decoration: none;
+}
+
+.g-Timer__Button:not(:last-child) {
+  margin-right: 2rem;
+}
+
+.g-Timer__Button--Active {
+  background-color: var(--color-active);
+  color: black;
 }