From afb591248ff8598e2f67a9ad0a2b8b4e6db84385 Mon Sep 17 00:00:00 2001 From: AsteroidusTv Date: Wed, 16 Oct 2024 21:56:03 +0200 Subject: [PATCH] Optimise code --- styles/about.css | 64 +++++++------------------- styles/contact.css | 2 +- styles/header.css | 34 +++++++------- styles/home.css | 109 ++++++++++++--------------------------------- styles/styles.css | 1 - 5 files changed, 65 insertions(+), 145 deletions(-) diff --git a/styles/about.css b/styles/about.css index 1ab6167..fb4d473 100644 --- 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 index 2bddae1..c8b61dd 100644 --- 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 index 1f82b37..5c88546 100644 --- 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; } } diff --git a/styles/home.css b/styles/home.css index 03dafb9..659ff24 100644 --- a/styles/home.css +++ b/styles/home.css @@ -16,7 +16,7 @@ .slogan { color: var(--secondary-color); - font-size: 55px; + font-size: clamp(23px, 5vw, 55px); } .container-buy { @@ -52,7 +52,7 @@ .buy-text { color: var(--text-color); - text-shadow: 1px 1px 0px #0000004f; + text-shadow: 1px 1px #0000004f; font-size: 1.3em; width: 82.5%; position: absolute; @@ -62,7 +62,7 @@ .buy-button { background-color: var(--text-color); - font-size: 30px; + font-size: clamp(25px, 3vw, 30px); border-radius: 40px; color: var(--secondary-color); cursor: pointer; @@ -72,7 +72,6 @@ height: 80px; transition: 1.2s; user-select: none; - -webkit-user-select: none; } .buy-button:hover { @@ -107,7 +106,6 @@ transform: translateX(0); } - @keyframes changeImage { 0%, 12.5% { transform: translateX(0%); } 25%, 37.5% { transform: translateX(-100%); } @@ -116,47 +114,42 @@ 100% { transform: translateX(0%); } } -@media screen and (max-width: 1200px) { - .slogan { - font-size: 46.5px; - } -} - -@media screen and (max-width: 1100px) { - .slogan { - font-size: 40px; - } -} - -@media screen and (max-width: 1050px) { - .slogan { - font-size: 36px; - } -} - +/* Styles réactifs */ @media screen and (max-width: 990px) { - .home { - display: flex; - } - .home-container { - flex-direction: column; gap: 2vh; position: relative; } - .slogan { - font-size: 30px; - } - .container-buy { width: 415px; height: 525px; } .about-text, .about-title { - font-size:5px; + font-size: 5px; + } +} + +@media screen and (max-width: 425px) { + .main-section { + padding-left: 0; + padding-right: 0; + } + + .home-container { + gap: 0; + } + + .slogan { + margin-bottom: -18px; + width: calc(100% - 70px); + } + + .container-buy { + width: 100%; + background-color: transparent; } } @@ -169,11 +162,12 @@ margin-top: -0.5vh; } - .buy-image-wrapper, .buy-images-container { + .buy-image-wrapper, + .buy-images-container { height: 40vh; } - .buy-image{ + .buy-image { object-fit: cover; height: 40vh; } @@ -191,51 +185,6 @@ } } -@media screen and (max-height: 630px) { - .slogan { - font-size: 22px; - } -} - -@media screen and (max-width: 425px) { - .main-section { - padding-left: 0; - padding-right: 0; - } - - .home-container { - gap: 0px; - } - - .slogan { - margin-bottom: -18px; - font-size: 28px; - width: calc(100% - 70px); - } - - .container-buy { - width: 100%; - background-color: transparent; - } - -} - -@media screen and (max-width: 370px) { - .slogan { - font-size: 25px; - } - - .buy-button { - font-size: 25px; - } -} - -@media screen and (max-width: 345px) { - .slogan { - font-size: 23px; - } -} - @media (pointer: coarse) { .buy-button:hover { transform: scale(1); diff --git a/styles/styles.css b/styles/styles.css index 817ddcd..12b70af 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -13,7 +13,6 @@ } :root { - --border-color: #FFFFFF; --border-radius: 25px;