2 files changed, 33 insertions, 96 deletions
diff --git a/public/index.html b/public/index.html
index 5668682..6cf6562 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,87 +11,7 @@
 
   <body>
 
-    <header class="g-Layout__Header">Tabata timer</header>
-
     <main id="g-Layout__Main">
-
-      <form id="g-Form">
-
-        <label class="g-Form__Label">
-          prepare
-          <input id="g-Form__Prepare" class="g-Form__Input" type="number" min="0" />
-        </label>
-
-        <label class="g-Form__Label">
-          tabatas
-          <input id="g-Form__Tabatas" class="g-Form__Input" type="number" min="1" />
-        </label>
-
-        <label class="g-Form__Label">
-          cycles
-          <input id="g-Form__Cycles" class="g-Form__Input" type="number" min="1" />
-        </label>
-
-        <label class="g-Form__Label">
-          work
-          <input id="g-Form__Work" class="g-Form__Input" type="number" min="5" />
-        </label>
-
-        <label class="g-Form__Label">
-          rest
-          <input id="g-Form__Rest" class="g-Form__Input" type="number" min="5" />
-        </label>
-
-        <div class="g-Form__Duration">
-          duration
-          <div id="g-Form__DurationValue">8</div>
-        </div>
-
-        <button class="g-Form__Start">
-          start
-        </button>
-
-      </form>
-
-      <section id="g-Timer">
-
-        <button id="g-Timer__Dial">
-
-          <svg class="g-Timer__Arc" viewbox="-100 -100 200 200">
-            <path class="g-Timer__ArcTotal" d="M -1.745121688784978e-14 -95 A 95 95 0 1 0 5.8170722959499274e-15 -95"></path>
-            <path id="g-Timer__ArcProgress"></path>
-          </svg>
-
-          <div id="g-Timer__Step"></div>
-
-          <div id="g-Timer__Duration"></div>
-
-        </button>
-
-        <div class="g-Timer__TabataAndCycle">
-
-          <div class="g-Timer__Tabata">
-            <div>Tabata</div>
-            <span id="g-Timer__TabataCurrent"></span>
-            /
-            <span id="g-Timer__TabataTotal"></span>
-          </div>
-
-          <div class="g-Timer__Cycle">
-            <div>Cycle</div>
-            <span id="g-Timer__CycleCurrent"></span>
-            /
-            <span id="g-Timer__CycleTotal"></span>
-          </div>
-
-        </div>
-
-        <button id="g-Timer__Stop">
-          stop
-        </button>
-
-      </section>
-
     </main>
 
     <script src="main.js"></script>
diff --git a/public/main.css b/public/main.css
index 9421a3c..f1efc26 100644
--- a/public/main.css
+++ b/public/main.css
@@ -45,22 +45,35 @@ body {
   font-size: 2rem;
 }
 
-#g-Layout__Main {
-  transition: all 0.2s ease-in-out;
+/* Animation */
+
+.g-Animation {
+  position: relative;
+  overflow: hidden;
+}
+
+.g-Animation > * + * {
+  width: 100vw;
+  min-height: 100vh;
+  position: absolute;
+  left: 100vh;
+  top: 0;
+  animation: g-Animation__Keyframe 400ms;
 }
 
-.g-Layout__HideMain {
-  opacity: 0;
-  padding-left: 2rem;
+@keyframes g-Animation__Keyframe {
+  from { left: 100vh; }
+  to { left: 0; }
 }
 
 /* Config */
 
-#g-Form {
+.g-Form {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 5rem;
+  padding-top: 5rem;
+  background-color: white;
 }
 
 .g-Form__Label {
@@ -99,14 +112,16 @@ body {
 
 /* Timer */
 
-#g-Timer {
+.g-Timer {
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
-  display: none;
+  background-color: var(--color-header);
+  color: white;
 }
 
-#g-Timer__Dial {
+.g-Timer__Dial {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -114,9 +129,10 @@ body {
   width: var(--dial-width);
   height: var(--dial-width);
   cursor: pointer;
-  background-color: white;
+  background-color: transparent;
+  color: inherit;
   font-size: 3rem;
-  margin: 5rem 0;
+  margin: 2rem 0;
   position: relative;
   border: none;
 }
@@ -135,17 +151,17 @@ body {
   stroke-width: 10;
 }
 
-#g-Timer__ArcProgress {
+.g-Timer__ArcProgress {
   stroke: var(--color-timer-arc-progress);
   fill: none;
   stroke-width: 10;
 }
 
-#g-Timer__Step {
+.g-Timer__Step {
   margin-bottom: 0.5rem;
 }
 
-#g-Timer__Duration:hover {
+.g-Timer__Duration:hover {
   background-color: var(--color-timer-hover);
   color: initial;
 }
@@ -163,7 +179,7 @@ body {
   margin-bottom: 1rem;
 }
 
-#g-Timer__Stop {
+.g-Timer__Stop {
   font-size: 1.5rem;
   background-color: var(--color-action);
   border: 3px solid var(--color-action-darker);
@@ -172,4 +188,5 @@ body {
   width: 10rem;
   margin-top: 2rem;
   cursor: pointer;
+  text-align: center;
 }