Optimise code

RecyLife · Oct 16, 2024 · afb5912 · afb5912
1 parent 9641747
commit afb5912
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 145 deletions.
diff --git a/styles/about.css b/styles/about.css
@@ -4,28 +4,28 @@
     align-items: center;
     justify-content: space-between;
     height: 100vh;
-    padding: 50px;
+    padding: 3.125rem;
     background-color: var(--secondary-color);
 }
 
 .about-text-content {
     flex: 1;
     max-width: 50%;
-    padding-right: 20px;
+    padding-right: 1.25rem;
     text-align: left;
 }
 
 .about-title {
     color: var(--primary-color);
-    font-size: 40px;
-    margin-bottom: 20px;
+    font-size: 2.5rem;
+    margin-bottom: 1.25rem;
 }
 
 .about-text {
     color: var(--primary-color);
-    font-size: 18px;
+    font-size: clamp(0.75rem, 1.125rem + 1vw, 1.125rem);
     line-height: 1.6;
-    margin-bottom: 20px;
+    margin-bottom: 1.25rem;
 }
 
 .about-image-content {
@@ -38,15 +38,10 @@
 
 .about-image {
     border-radius: var(--border-radius);
-    box-shadow: 10px 10px 0px 0px var(--primary-color);
+    box-shadow: 10px 10px 0 0 var(--primary-color);
     height: auto;
     max-width: 50%;
-}
-
-@media screen and (max-height: 1200px) {
-    .about-image {
-        max-height: 50vh;
-    }
+    max-height: 50vh;
 }
 
 @media screen and (max-width: 990px) {
@@ -59,60 +54,35 @@
     }
 }
 
-@media screen and (max-height: 950px) {
-    .about-text {
-        line-height: 1.5;
-    }
-}
-
 @media screen and (max-width: 500px) {
     .about {
-        padding: 30px;
+        padding: 1.875rem;
         align-items: center;
         justify-content: center;
     }
 
     .about-title {
-        margin-bottom: -5px;
+        margin-bottom: -0.3125rem;
     }
 
     .about-text-content {
-        margin-top: 80px;
-        padding: 15px;
-        border: 5px solid var(--primary-color);
+        margin-top: 5rem;
+        padding: 0.9375rem;
+        border: 0.3125rem solid var(--primary-color);
         border-radius: var(--border-radius);
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: 0.625rem;
     }
-
+    
     .about-text {
-        font-size: 17px;
         margin-bottom: 0;
     }
 }
 
-@media screen and (max-width: 450px) {
-    .about-text {
-        font-size: 16px;
-    }
-}
-
-@media screen and (max-width: 400px) {
-    .about-text {
-        font-size: 15px;
-    }
-}
-
-@media screen and (max-width: 350px) {
-    .about-text {
-        font-size: 13px;
-    }
-}
-
-@media screen and (max-width: 325px) {
+@media screen and (max-height: 950px) {
     .about-text {
-        font-size: 12px;
+        line-height: 1.5;
     }
 }
 

diff --git a/styles/contact.css b/styles/contact.css
@@ -29,7 +29,7 @@
     padding: 15px;
     border-radius: var(--border-radius);
     font-size: 16px;
-    border: 1px solid var(--border-color); /* Ajout de la bordure pour la transition */
+    border: 1px solid var(--border-color);
     transition: border 0.3s ease;
 }
 

diff --git a/styles/header.css b/styles/header.css
@@ -26,7 +26,7 @@
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     background: rgba(255, 255, 255, 0.1);
-    transition: height 0.25s ease-out;
+    transition: height 250ms ease-out;
 }
 
 .header-background.is-hamburger-active {
@@ -89,8 +89,9 @@
     font-size: 28px;
 }
 
-.header-link:hover, .header-link:focus {
-    color: #ffffffb4;
+.header-link:hover,
+.header-link:focus {
+    color: rgba(255, 255, 255, 0.7);
     outline: none;
 }
 
@@ -113,10 +114,16 @@
     width: 100%;
     height: 3px;
     background-color: var(--border-color);
-    transition: 0.4s;
+    transition: all 400ms;
     transform-origin: center;
 }
 
+.hamburger-menu.active {
+    top: 35px;
+    display: flex;
+    transform: translateY(-4px) scale(1.3);
+}
+
 .hamburger-menu.active .bar:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
 }
@@ -129,12 +136,6 @@
     transform: translateY(-10px) rotate(-45deg);
 }
 
-.hamburger-menu.active {
-    top: 35px;
-    display: flex;
-    transform: translateY(-4px) scale(1.3);
-}
-
 @media screen and (max-width: 800px) {
     .header-separator {
         display: none;
@@ -161,30 +162,31 @@
 
     .header-link {
         opacity: 0;
-        transition: opacity 0.5s ease-in-out;
+        transition: opacity 500ms ease-in-out;
     }
 
     .header-link.is-hamburger-active {
         opacity: 1;
     }
 
+    /* Transition delays for staggered animation */
     .header-links.is-hamburger-active .header-link:nth-child(1) {
-        transition-delay: 0s;
+        transition-delay: 0ms;
     }
 
     .header-links.is-hamburger-active .header-link:nth-child(2) {
-        transition-delay: 0.05s;
+        transition-delay: 50ms;
     }
 
     .header-links.is-hamburger-active .header-link:nth-child(3) {
-        transition-delay: 0.1s;
+        transition-delay: 100ms;
     }
 
     .header-links.is-hamburger-active .header-link:nth-child(4) {
-        transition-delay: 0.15s;
+        transition-delay: 150ms;
     }
 
     .header-links.is-hamburger-active .header-link:nth-child(5) {
-        transition-delay: 0.2s;
+        transition-delay: 200ms;
     }
 }