From 580b8159302062a8ff62834af361eaf8546d1311 Mon Sep 17 00:00:00 2001
From: Codux <codux@codux.com>
Date: Thu, 10 Oct 2024 13:30:42 +0300
Subject: [PATCH 1/2] Responsive font-size

---
 _codux/boards/hero-center.board.css | 28 ++++++----------------------
 _codux/boards/hero-center.board.tsx |  4 ++--
 2 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/_codux/boards/hero-center.board.css b/_codux/boards/hero-center.board.css
index 7e90ba1..430f71c 100644
--- a/_codux/boards/hero-center.board.css
+++ b/_codux/boards/hero-center.board.css
@@ -6,48 +6,32 @@
     align-items: center;
     justify-content: center;
     background: linear-gradient(292deg, #e1e2ff 0%, #ddebff 49.33%, #e3fbf9 98.67%);
-
-    @media (width < 480px) {
-        padding: 10px;
-    }
 }
 
 .heroTitle {
     max-width: 15em;
-    font-size: 84px;
+    font-size: calc(6.25rem + ((1vw - 10.24px) * 9.9432));
     font-weight: 700;
-    line-height: 88px;
     text-align: center;
-
-    @media (width < 768px) {
-        font-size: 36px;
-        line-height: 48px;
-    }
 }
 
 .heroButtons {
     display: flex;
     margin-top: 30px;
     gap: 30px;
-
-    @media (width < 768px) {
-        margin-top: 15px;
-        gap: 15px;
-    }
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
 }
 
-.heroPrimaryButton, .heroSecondaryButton {
+.heroPrimaryButton,
+.heroSecondaryButton {
     padding: 10px 30px;
     font: 16px/1.3 sans-serif;
     border: 1px solid #000;
     border-radius: 100px;
     cursor: pointer;
     white-space: nowrap;
-
-    @media (width < 768px) {
-        padding: 10px 18px;
-        font-size: 12px;
-    }
 }
 
 .heroPrimaryButton {
diff --git a/_codux/boards/hero-center.board.tsx b/_codux/boards/hero-center.board.tsx
index 3da8cd2..ecdab1a 100644
--- a/_codux/boards/hero-center.board.tsx
+++ b/_codux/boards/hero-center.board.tsx
@@ -21,7 +21,7 @@ export default createBoard({
         </div>
     ),
     environmentProps: {
-        windowHeight: 400,
-        windowWidth: 600,
+        windowHeight: 507,
+        windowWidth: 698,
     },
 });

From a57ac2f423287d3cf8db0bc5fc21b7ff155a2b1d Mon Sep 17 00:00:00 2001
From: Codux <codux@codux.com>
Date: Sun, 13 Oct 2024 12:35:45 +0300
Subject: [PATCH 2/2] Hero title

---
 _codux/boards/hero-center.board.css | 26 +++++++++++++++-----------
 _codux/boards/hero-center.board.tsx | 12 ++++--------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/_codux/boards/hero-center.board.css b/_codux/boards/hero-center.board.css
index 430f71c..5c00a5d 100644
--- a/_codux/boards/hero-center.board.css
+++ b/_codux/boards/hero-center.board.css
@@ -1,37 +1,41 @@
-.hero {
+.root {
+    font-family: Arial, Helvetica, sans-serif;
     min-height: 100vh;
-    padding: 40px;
+    padding: 6vw;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background: linear-gradient(292deg, #e1e2ff 0%, #ddebff 49.33%, #e3fbf9 98.67%);
+    flex-wrap: wrap;
 }
 
 .heroTitle {
     max-width: 15em;
-    font-size: calc(6.25rem + ((1vw - 10.24px) * 9.9432));
+    font-size: calc(6rem + ((1vw - 20px) * 4));
+    min-height: 0vw;
     font-weight: 700;
     text-align: center;
 }
 
 .heroButtons {
     display: flex;
-    margin-top: 30px;
-    gap: 30px;
-    flex-direction: row;
+    margin-top: 6vh;
     flex-wrap: wrap;
     justify-content: center;
+    gap: 30px;
 }
 
 .heroPrimaryButton,
 .heroSecondaryButton {
-    padding: 10px 30px;
-    font: 16px/1.3 sans-serif;
-    border: 1px solid #000;
-    border-radius: 100px;
+    padding: clamp(8px, 1.5vw, 12px) clamp(15px, 3vw, 25px);
+    color: white;
+    border: 1px solid black;
+    border-radius: 30px;
+    font-size: clamp(14px, 2vw, 18px);
     cursor: pointer;
-    white-space: nowrap;
+    transition: background-color 0.3s ease;
+    align-self: flex-start;
 }
 
 .heroPrimaryButton {
diff --git a/_codux/boards/hero-center.board.tsx b/_codux/boards/hero-center.board.tsx
index ecdab1a..858ef6a 100644
--- a/_codux/boards/hero-center.board.tsx
+++ b/_codux/boards/hero-center.board.tsx
@@ -4,12 +4,8 @@ import './hero-center.board.css';
 export default createBoard({
     name: 'HeroCenter',
     Board: () => (
-        <div className="hero">
-            <h1 className="heroTitle">
-                Title Goes Here.
-                <br />
-                Click to Edit and Add Your Own Text.
-            </h1>
+        <div className="root">
+            <h1 className="heroTitle">Title Goes Here. Click to Edit and Add Your Own Text.</h1>
             <div className="heroButtons">
                 <a href="#a" className="heroSecondaryButton">
                     Contact Us
@@ -21,7 +17,7 @@ export default createBoard({
         </div>
     ),
     environmentProps: {
-        windowHeight: 507,
-        windowWidth: 698,
+        windowHeight: 932,
+        windowWidth: 532,
     },
 });