From e06f02db2bd7b34eb4ea942ed3f7b9f52bd7d1ac Mon Sep 17 00:00:00 2001
From: Asteroidus <113026499+AsteroidusTv@users.noreply.github.com>
Date: Thu, 17 Oct 2024 22:35:35 +0200
Subject: [PATCH] Optimise & Clean code

---
 styles/about.css | 62 +++++++++++++-----------------------------------
 1 file changed, 17 insertions(+), 45 deletions(-)

diff --git a/styles/about.css b/styles/about.css
index fb4d473..8bc74eb 100644
--- a/styles/about.css
+++ b/styles/about.css
@@ -1,39 +1,25 @@
 .about {
     display: flex;
-    position: relative;
     align-items: center;
     justify-content: space-between;
     height: 100vh;
-    padding: 3.125rem;
     background-color: var(--secondary-color);
 }
 
 .about-text-content {
-    flex: 1;
     max-width: 50%;
-    padding-right: 1.25rem;
-    text-align: left;
 }
 
 .about-title {
     color: var(--primary-color);
-    font-size: 2.5rem;
-    margin-bottom: 1.25rem;
+    font-size: 40px;
+    margin-bottom: 10px;
 }
 
 .about-text {
     color: var(--primary-color);
-    font-size: clamp(0.75rem, 1.125rem + 1vw, 1.125rem);
-    line-height: 1.6;
-    margin-bottom: 1.25rem;
-}
-
-.about-image-content {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    max-width: 50%;
+    font-size: clamp(13.5px, 2vw, 18px);
+    line-height: 1.5;
 }
 
 .about-image {
@@ -41,14 +27,18 @@
     box-shadow: 10px 10px 0 0 var(--primary-color);
     height: auto;
     max-width: 50%;
-    max-height: 50vh;
 }
 
-@media screen and (max-width: 990px) {
-    .about-image-content {
-        display: none;
+@media screen and (max-height: 1200px) {
+    .about-image {
+        max-height: 45vh;
     }
+}
 
+@media screen and (max-width: 1100px) {
+    .about-image {
+        display: none;
+    }
     .about-text-content {
         max-width: 100%;
     }
@@ -56,39 +46,21 @@
 
 @media screen and (max-width: 500px) {
     .about {
-        padding: 1.875rem;
+        padding: var(--main-section-padding-mobile);
         align-items: center;
         justify-content: center;
     }
 
     .about-title {
-        margin-bottom: -0.3125rem;
+        margin-bottom: -5px;
     }
 
     .about-text-content {
-        margin-top: 5rem;
-        padding: 0.9375rem;
-        border: 0.3125rem solid var(--primary-color);
+        padding: 15px;
+        border: 5px solid var(--primary-color);
         border-radius: var(--border-radius);
         display: flex;
         flex-direction: column;
-        gap: 0.625rem;
-    }
-    
-    .about-text {
-        margin-bottom: 0;
-    }
-}
-
-@media screen and (max-height: 950px) {
-    .about-text {
-        line-height: 1.5;
-    }
-}
-
-@media screen and (max-height: 900px) {
-    .about-text {
-        line-height: 1.3;
-        font-size: 1.9vh;
+        gap: 10px;
     }
 }