1 files changed, 33 insertions, 16 deletions

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;
 }