fix(LandingPage): responsive fixes

Magic-Fishes · Oct 26, 2024 · a39b8f6 · a39b8f6
1 parent c1f6921
commit a39b8f6
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/src/components/LandingPage/LandingPage.css b/src/components/LandingPage/LandingPage.css
@@ -683,6 +683,7 @@ html:has(.landing-page) {
 }
 
 .floating-section p {
+    min-width: 250px;
     flex: 1;
     font-size: var(--font-size-20);
     color: rgb(var(--text-color-alt));
@@ -809,14 +810,47 @@ html:has(.landing-page) {
     .landing-page .footer-logo {
         flex: auto;
     }
+
+    .landing-page .floating-section p {
+        text-align: center !important;
+    }
+
+    .landing-page .last-call-to-action {
+        width: 90%;
+    }
+
+    .landing-page ul.sitemap {
+        text-align: center;
+        justify-content: center;
+    }
 }
 
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: 470px) {
+    .landing-page .change-theme {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 415px) {
     .landing-page .nav-logo svg {
         display: none;
     }
 }
 
+@media only screen and (max-width: 365px) {
+    .landing-page .nav-logo {
+        display: none;
+    }
+
+    .nav-buttons {
+        width: 100%;
+    }
+    .nav-login {
+        width: 100%;
+    }
+}
+
+
 @media only screen and (max-width: 737px) {
     #bento .bento-grid {
         width: 100%;

diff --git a/src/components/LandingPage/LandingPage.jsx b/src/components/LandingPage/LandingPage.jsx
@@ -113,7 +113,7 @@ export default function LandingPage({ token, accountsList }) {
     }, [])
 
     return (<div className="landing-page">
-        {!isMobileLayout && <header id="nav-bar" className="top-section">
+        {<header id="nav-bar" className="top-section">
             <span className="nav-logo">
                 <EDPLogo className="landing-logo" id="outside-container" alt="Logo Ecole Directe Plus" />Ecole Directe Plus
             </span>
@@ -222,7 +222,7 @@ export default function LandingPage({ token, accountsList }) {
             </div>
         </section>
         <section id="community" className="floating-section" ref={communitySectionRef}>
-            <h2 className="section-title">Un communauté <strong className="heading-emphasis">passionnée</strong> et <strong className="heading-emphasis">bienveillante</strong></h2>
+            <h2 className="section-title">Une communauté <strong className="heading-emphasis">passionnée</strong> et <strong className="heading-emphasis">bienveillante</strong></h2>
             <div>
                 <a href="https://discord.gg/AKAqXfTgvE" target="_blank"><DiscordFullLogo /></a>
                 <p>Rejoignez notre <a href="https://discord.gg/AKAqXfTgvE" target="_blank"><strong>serveur Discord</strong></a> !<br />Vous pourrez y rencontrer les développeurs et discuter avec les membres les plus investis d'Ecole Directe Plus !</p>