From 5c636f11cdfed82634ee572645d765b704941b68 Mon Sep 17 00:00:00 2001
From: Joris
Date: Tue, 3 Mar 2020 10:44:35 +0100
Subject: Initialize views from JavaScript
---
public/index.html | 80 -------------------------------------------------------
public/main.css | 49 +++++++++++++++++++++++-----------
2 files changed, 33 insertions(+), 96 deletions(-)
(limited to 'public')
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 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
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;
}
--
cgit v1.2.3