diff --git a/src/index.html b/src/index.html index ad52915c0..8f994f555 100644 --- a/src/index.html +++ b/src/index.html @@ -9,12 +9,10 @@ -
-
-
-
-
-
+
+
+
+
diff --git a/src/styles/main.scss b/src/styles/main.scss index 59064f132..2c6ca89e4 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,82 +1,83 @@ -$hour: #00F; -$second: #008001; -$center: #FFA500; - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} +$watch-size: 80vmin; +$watch-color: #000; + +// minutes======================================================================================================================================================== + +$minutes-color: #0700ff; + +// seconds======================================================================================================================================================== + +$seconds-color: #2c8000; + +// center======================================================================================================================================================== + +$center-diameter: 5vmin; +$center-color: #f6a603; + body { - height: 100%; + margin: 0; + height: 100vh; + + display: flex; + justify-content: center; + align-items: center; } -.container { +.stopwatch { + position: relative; + height: $watch-size; + width: $watch-size; + border-radius: 50%; + border: 1vmin dotted $watch-color; - &__watch { - width: 80vmin; - height: 80vmin; - position: absolute; - border: 10px dotted black; - inset: 0; - margin: auto; - border-radius: 50%; - } + &__minutes { + margin: auto; + height: 20vmin; + width: 3vmin; + position: absolute; + inset: 0 0 20vmin; - &__hour { - position: absolute; - left: 0; - right: 0; - margin: 0 auto; - width: 30px; - height: 100%; - z-index: 1; - animation: time 5s infinite; - } + background-color: $minutes-color; + transform-origin: bottom center; + animation: rotate 3600s steps(60) infinite; + } - &__hour::before { - content: ""; - height: 25vmin; - width: 30px; - background-color: $hour; - position: absolute; - top: 130; + &__seconds { + margin: auto; + height: 38vmin; + width: 1.5vmin; + position: absolute; + inset: 0 0 38vmin; - } + background-color: $seconds-color; + animation: rotate 60s linear infinite; + transform-origin: bottom center; + } - &__second { - width: 20px; - height: 100%; - left: 0; - right: 0; - bottom: 0; - margin: 0 auto; - z-index: 0; - animation: time 60s infinite; - } + &__center { + margin: auto; + height: $center-diameter; + width: $center-diameter; + position: absolute; + inset: 0; - &__second::before { - position: absolute; - content: ""; - height: 350px; - width: 20px; - background-color: $second; - } - - &__center { - position: absolute; - width: 5vmin; - height: 5vmin; - inset: 0; - margin: auto; - border-radius: 50%; - background-color: $center; - z-index: 2; - } + background-color: $center-color; + border-radius: 50%; + } +} + +.stopwatch--speed-up { + .stopwatch__minutes { + animation: rotate 600s steps(60) infinite; + } + + .stopwatch__seconds { + animation: rotate 10s linear infinite; + } } -@keyframes time { +@keyframes rotate { from { transform: rotate(0deg); }