diff --git a/readme.md b/readme.md index b55608052f..fa2694b68c 100644 --- a/readme.md +++ b/readme.md @@ -32,7 +32,7 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs ## Checklist ❗️ Replace `` with your GitHub username and copy the links to the `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_stop-watch/) +- [DEMO LINK](https://Denis-Melnikov-dev.github.io/layout_stop-watch/) ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. diff --git a/src/index.html b/src/index.html index 272a196488..5767fd5500 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,11 @@ -

Stop watch

+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..f0610a920d 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,69 @@ +@import './utils/variables'; + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + body { margin: 0; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +.stopwatch { + width: $stopwatch-size; + height: $stopwatch-size; + border: 1vmin dotted #000; + border-radius: 50%; + position: relative; + + &__minutes { + height: 20vmin; + width: $minutes-width; + background-color: #0700ff; + box-sizing: border-box; + position: absolute; + bottom: 50%; + left: calc(50% - ($minutes-width / 2)); + transform-origin: center bottom; + animation: rotation #{$seconds-in-hour}s steps(60) infinite; + } + + &__seconds { + height: 38vmin; + width: $seconds-width; + background-color: #2c8000; + box-sizing: border-box; + position: absolute; + bottom: 50%; + left: calc(50% - ($seconds-width / 2)); + transform-origin: center bottom; + animation: rotation #{$seconds-in-min}s linear infinite; + } + + &__center { + height: $center-size; + width: $center-size; + background-color: #f6a603; + border-radius: 50%; + box-sizing: border-box; + position: absolute; + bottom: calc(50% - ($center-size / 2)); + left: calc(50% - ($center-size / 2)); + } + + &--speed-up &__minutes { + animation: rotation #{$seconds-in-min * 10}s steps(60) infinite; + } + + &--speed-up &__seconds { + animation: rotation 10s linear infinite; + } } diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..84ae4c3f6a --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,6 @@ +$stopwatch-size: 80vmin; +$minutes-width: 3vmin; +$seconds-width: 1.5vmin; +$center-size: 5vmin; +$seconds-in-min: 60; +$seconds-in-hour: $seconds-in-min * 60;