responsived

src/components/icons.scss

@@ -7,8 +7,8 @@ div.icons {
     z-index: 999;
 
     div.icon {
-        width: 64px;
-        height: 64px;
+        width: 5vw;
+        height: 5vw;
 
         background-size: 50%;
         background-repeat: no-repeat;

src/components/measurement.circle.scss

@@ -5,10 +5,10 @@
 @import "./measurement.circle/measurement.circle.warn.scss";
 
 div.measurement-circle {
-    $size: 650px;
+    $size: 40vw;
 
-    position: relative;
-    left: 5%;
+    position: absolute;
+    left: 50vw;
 
     width: $size;
     height: $size;
@@ -20,5 +20,5 @@ div.measurement-circle {
     @include marks();
     @include arrow();
     @include content();
-    @include warn();
+    // @include warn();
 }

src/components/measurement.circle/measurement.circle.content.scss

@@ -18,12 +18,12 @@
         z-index: 2;
 
         span.value {
-            font-size: 60px;
+            font-size: 2.5vw;
             color: $value-color;
         }
 
         span.type {
-            font-size: 20px;
+            font-size: 1.4vw;
             color: $type-color;
         }
     }
@@ -37,7 +37,7 @@
 
         z-index: 2;
 
-        font-size: 35px;
+        font-size: 2vw;
         color: $type-color;
     }
 }

src/components/measurement.circle/measurement.circle.marks.scss

@@ -1,7 +1,7 @@
 @use "sass:math";
 
 @mixin marks {
-    $text-size: 50px;
+    $text-size: 2.5vw;
     $text-color: white;
     $background-color: rgba(white, 0.7);
 

src/components/measurement.line.scss

@@ -4,7 +4,7 @@ div.measurement-line {
     position: absolute;
     left: 0;
 
-    width: 400px;
+    width: 30vw;
 
     @include item();
 }

src/components/measurement.line/measurement.line.item.scss

@@ -1,9 +1,11 @@
 @mixin item {
+    $height: 3vw;
+
     div.item {
         position: relative;
 
         width: 100%;
-        height: 56px;
+        height: $height;
 
         margin: 20px 30px;
 
@@ -11,7 +13,7 @@
 
         background-color: transparent;
 
-        border-radius: 2em;
+        border-radius: 10em;
 
         transition: all 1s;
 
@@ -46,18 +48,18 @@
         div.background {
             position: absolute;
 
-            top: 5px;
-            left: 5px;
-            right: 5px;
+            top: 0.5vw;
+            left: 0.5vw;
+            right: 0.5vw;
 
-            height: 46px;
+            height: calc(#{$height} - 1vw);
 
             background: linear-gradient(90deg, #a0d4ff 0%, #1292ee 50%, #a0d4ff 100%);
             transition: all 1s;
 
             clip-path: inset(0 100% 0 0);
 
-            border-radius: 2em;
+            border-radius: 10em;
         }
 
         div.percent {
@@ -66,13 +68,13 @@
             left: 0;
 
             width: 0%;
-            height: 56px;
+            height: $height;
 
             background-color: transparent;
 
             box-shadow: 0 0 100px rgba($color: #a0d4ff, $alpha: 0.5);
 
-            border-radius: 2em;
+            border-radius: 10em;
         }
 
         span {
@@ -84,13 +86,13 @@
             &.value {
                 right: 10px;
 
-                font-size: 20px;
+                font-size: 1vw;
 
                 transform: translateY(-50%) rotate(-90deg);
             }
 
             &.title {
-                font-size: 22px;
+                font-size: 1.2vw;
 
                 left: calc(100% + 20px);
 

src/style.scss

@@ -57,8 +57,8 @@ footer {
     z-index: 2;
 
     a.back-to {
-        width: 32px;
-        height: 32px;
+        width: 2vw;
+        height: 2vw;
 
         cursor: pointer;