fix issues

mate-academy · Feb 21, 2024 · 290a664 · 290a664
1 parent 222b3ed
commit 290a664
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 73 deletions.
diff --git a/src/index.html b/src/index.html
@@ -9,12 +9,10 @@
     <link rel="stylesheet" href="./styles/main.scss">
   </head>
   <body>
-    <div class="container">
-      <div class="container__watch">
-        <div class="container__center"></div>
-        <div class="container__hour"></div>
-        <div class="container__second"></div>
-      </div>
+    <div class="stopwatch stopwatch--speed-up">
+      <div class="stopwatch__minutes"></div>
+      <div class="stopwatch__seconds"></div>
+      <div class="stopwatch__center"></div>
     </div>
   </body>
 </html>
diff --git 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);
     }