From df48306ef783ef465fb4fe685b80b1ed158e8a12 Mon Sep 17 00:00:00 2001
From: Vyacheslav <sheptikhinv@gmail.com>
Date: Sat, 14 Jun 2025 19:52:37 +0500
Subject: [PATCH] god bless relative sizing

---
 src/components/Button/Button.module.css | 12 +++++-----
 src/components/Timer/Timer.module.css   | 30 ++++++++++++-------------
 src/index.css                           |  6 ++++-
 src/pages/Timers/Timers.module.css      |  8 +++----
 4 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index e5c8f14..0fcd879 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -1,15 +1,15 @@
 button.button {
-    min-width: 48px;
-    min-height: 48px;
-    border-radius: 8px;
+    min-width: 4.8rem;
+    min-height: 4.8rem;
+    border-radius: 0.8rem;
     background-color: #AB71ED;
     color: #FFFFFF;
-    font-size: 16px;
-    padding: 10px;
+    font-size: 1.6rem;
+    padding: 1.0rem;
     text-align: center;
     outline: none;
     border: none;
-    line-height: 16px;
+    line-height: 1.6rem;
     font-weight: bold;
     font-family: 'Montserrat';
 }
diff --git a/src/components/Timer/Timer.module.css b/src/components/Timer/Timer.module.css
index c1dca56..a6eaa2b 100644
--- a/src/components/Timer/Timer.module.css
+++ b/src/components/Timer/Timer.module.css
@@ -2,9 +2,9 @@
     display: flex;
     flex-direction: column;
     background-color: #FFFFFF;
-    border-radius: 16px;
-    gap: 10px;
-    padding: 10px;
+    border-radius: 1.6rem;
+    gap: 1.0rem;
+    padding: 1.0rem;
 }
 
 .top_buttons {
@@ -16,27 +16,27 @@
 .minute_buttons {
     display: flex;
     flex-direction: row;
-    gap: 10px;
+    gap: 1.0rem;
 }
 
 .clock {
-    width: 256px;
-    height: 256px;
+    width: 25.6rem;
+    height: 25.6rem;
     display: flex;
     color: #000000;
     align-items: center;
     justify-content: center;
-    padding: 10px;
+    padding: 1.0rem;
     border-radius: 50%;
     border-color: #DCC3F8;
-    border-width: 8px;
+    border-width: 0.8rem;
     border-style: solid;
 }
 
 .clock_text {
     font-family: 'Montserrat';
     font-weight: bold;
-    font-size: 40px;
+    font-size: 4.0rem;
 }
 
 .clock_text:hover {
@@ -51,28 +51,28 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    gap: 16px;
+    gap: 1.6rem;
 }
 
 .dates_item {
     display: flex;
     justify-content: center;
     color: black;
-    border-radius: 16px;
+    border-radius: 1.6rem;
     border-color: #DCC3F8;
-    border-width: 4px;
+    border-width: 0.4rem;
     border-style: solid;
-    padding: 8px;
+    padding: 0.8rem;
     width: 100%;
 
     font-family: 'Montserrat';
     font-weight: bold;
-    font-size: 24px;
+    font-size: 2.4rem;
 }
 
 .presets_buttons {
     display: flex;
     flex-direction: row;
-    gap: 10px;
+    gap: 1.0rem;
     justify-content: center;
 }
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 33c8b00..2ed59b7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
\ No newline at end of file
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
+:root {
+    font-size: 62.5%;
+}
\ No newline at end of file
diff --git a/src/pages/Timers/Timers.module.css b/src/pages/Timers/Timers.module.css
index d65b04a..8fced1c 100644
--- a/src/pages/Timers/Timers.module.css
+++ b/src/pages/Timers/Timers.module.css
@@ -12,10 +12,10 @@ body, html {
 }
 
 .content {
-    padding: 32px;
+    padding: 3.2rem;
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 1.6rem;
 }
 
 .header_text {
@@ -27,7 +27,7 @@ body, html {
 }
 
 .title {
-    font-size: 40px;
+    font-size: 4.0rem;
     font-weight: bold;
 }
 
@@ -35,5 +35,5 @@ body, html {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
-    gap: 16px;
+    gap: 1.6rem;
 }
\ No newline at end of file