refactor: convert px to rem

Vitinho163 · Jun 21, 2024 · c6ba50b · c6ba50b
1 parent 624b616
commit c6ba50b
Showing 1 changed file with 41 additions and 41 deletions.
diff --git a/styles.css b/styles.css
@@ -4,9 +4,9 @@
   --color-text: #3A404E;
   --color-text-secondary: #101828;
   --font-family: 'Inter', sans-serif;
-  --font-size-normal: 16px;
-  --font-size-large: 18px;
-  --line-height-normal: 24px;
+  --font-size-normal: 1rem;
+  --font-size-large: 1.125rem;
+  --line-height-normal: 1.5rem;
 }
 
 * {
@@ -21,20 +21,20 @@
 header {
   display: flex;
   justify-content: space-between;
-  padding: 18px 80px;
+  padding: 1.125rem 5rem;
   font-weight: 500;
 }
 
 .logo {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 0.5rem;
 }
 
 .logo span {
   color: var(--color-text);
-  font-size: 18px;
-  line-height: 24px;
+  font-size: var(--font-size-large);
+  line-height: var(--line-height-normal);
 }
 
 .navbar {
@@ -44,7 +44,7 @@ header {
 .navbar ul {
   list-style: none;
   display: flex;
-  gap: 32px;
+  gap: 2rem;
 }
 
 .navbar a {
@@ -55,18 +55,18 @@ header {
 .actions-button {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: .75rem;
 }
 
 .actions-button button {
   background: rgba(255, 255, 255, 1);
   color: var(--color-secondary);
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 500;
-  line-height: 24px;
+  line-height: var(--line-height-normal);
 
-  padding: 10px 18px;
-  border-radius: 8px;
+  padding: 0.625rem 1.125rem;
+  border-radius: 0.5rem;
   border-style: none;
   cursor: pointer;
 }
@@ -80,96 +80,96 @@ header {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 24px;
-  padding: 96px 0px;
+  gap: 1.5rem;
+  padding: 6rem 0px;
 }
 
 #sobre_nos span {
   color: var(--color-primary);
   font-weight: 600;
-  line-height: 24px;
+  line-height: var(--line-height-normal);
 }
 
 #sobre_nos h1 {
   color: var(--color-text-secondary);
-  font-size: 48px;
+  font-size: 3rem;
   font-weight: 600;
-  line-height: 60px;
-  letter-spacing: -0.96px;
+  line-height: 3.75rem;
+  letter-spacing: -0.06rem;
 }
 
 #sobre_nos p {
   width: 791px;
-  padding-top: 12px;
+  padding-top: 0.75rem;
   text-align: center;
-  font-size: 20px;
-  line-height: 30px;
+  font-size: 1.25rem;
+  line-height: 1.875rem;
 }
 
 #metricas {
   display: flex;
-  padding-bottom: 96px;
-  gap: 64px;
-  margin: 0px 80px;
+  padding-bottom: 6rem;
+  gap: 4rem;
+  margin: 0px 5rem;
 }
 
 #metricas .metricas_card {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 1.25rem;
   flex: 1 0 0;
 }
 
 .metricas_card > span {
   color: var(--color-primary);
   font-weight: 600;
-  font-size: 60px;
+  font-size: 3.75rem;
 }
 
 .metricas_card > h2 {
   color: var(--color-text-secondary);
-  font-size: 18px;
+  font-size: var(--font-size-large);
   font-weight: 500;
-  line-height: 28px;
+  line-height: 1.75rem;
 }
 
 .metricas_card > p {
   color: var(--color-secondary);
-  line-height: 24px;
+  line-height: var(--line-height-normal);
 }
 
 #vagas {
   display: flex;
-  padding: 96px 0px;
+  padding: 6rem 0px;
   flex-direction: column;
   align-items: center;
-  gap: 20px;
+  gap: 1.25rem;
 }
 
 #vagas > span {
   color: var(--color-primary);
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
-  line-height: 20px;
+  line-height: 1.25rem;
 
-  padding: 4px 12px;
-  border-radius: 16px;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--font-size-normal);
   background: rgba(142, 36, 36, 0.05);
 }
 
 #vagas > h2 {
   color: var(--color-text-secondary);
-  font-size: 36px;
+  font-size: 2.25rem;
   font-weight: 600;
-  letter-spacing: -0.72px;
+  letter-spacing: -0.045rem;
 }
 
 #vagas > p {
   color: var(--color-secondary);
-  font-size: 20px;
-  line-height: 30px;
+  font-size: 1.25rem;
+  line-height: 1.875rem;
 }
 
 #vagas > img {
-  margin-top: 44px;
+  margin-top: 2.75rem;
 }