Update responsive welcome page

NicolasReitin · Jun 29, 2024 · 956db46 · 956db46
1 parent ce791b5
commit 956db46
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 8 deletions.
diff --git a/src/js/Components/Actualites.jsx b/src/js/Components/Actualites.jsx
@@ -31,7 +31,8 @@ export default function Actualites() {
     <>
         <div className="actualites">
           <h2>LES ACTUALITÉS</h2>
-          <div className="flex justify-center mt-10">
+          <div className="flex flex-col items-center lg:flex-row lg:justify-center mt-10">
+          {/* mt-8 md:mt-12 lg:mt-16 */}
           {firstActu && (
             <div className="first-actu">
               <Link to={`/actualite/${firstActu.id}`}>
@@ -44,15 +45,15 @@ export default function Actualites() {
               </Link>
             </div>
           )}
-            <div className="others-actu flex flex-col gap-2 mt-8 ml-5">
+            <div className="others-actu flex flex-col gap-2 mt-5 lg:mt-8 lg:ml-5">
               {othersActu && (
                 othersActu.map((actu) =>(
                   <div 
                   key={actu.id}
                   className='block-others-actus'>
                     <Link to={`/actualite/${actu.id}`}>
-                        <p className='ml-3'>Le { moment(actu.created_at).locale('fr').format('DD/MM/YYYY') }</p>
-                        <h3 className='ml-3 mt-2'><strong> { actu.titre }</strong></h3>
+                        <p className='lg:ml-3'>Le { moment(actu.created_at).locale('fr').format('DD/MM/YYYY') }</p>
+                        <h3 className='lg:ml-3 lg:mt-2'><strong> { actu.titre }</strong></h3>
                     </Link>                  
                   </div>
                 ))

diff --git a/src/js/Pages/Welcome.jsx b/src/js/Pages/Welcome.jsx
@@ -25,7 +25,7 @@ export default function Welcome() {
 
         <div className="scores">
           <h2>SAVE <span>THE DATE </span>!</h2>
-          <div className='mt-16'>
+          <div className='mt-8 md:mt-12 lg:mt-16'>
             <iframe 
               id="65f4382f11d4460dd0e0c6a0" 
               title="Score'N'Co"

diff --git a/src/sass/style.scss b/src/sass/style.scss
@@ -107,7 +107,7 @@ body{
         top: 25px;
         left: 0;
         width: 100%;
-        background-color: #fff;
+        background-color: #ffffffb7;
         z-index: 1000;
         padding: 10px;
         display: none;
@@ -128,7 +128,7 @@ body{
         display: none;
         flex-direction: column;
         align-items: center;
-        background-color: #ffffff;
+        background-color: #fff;
         padding: 20px;
         position: fixed;
         top: 35px;

diff --git a/src/sass/variables.scss b/src/sass/variables.scss
@@ -8,6 +8,8 @@ $fontTitle : Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
 $marginTitle : 10% 0 10% -10%;
 $sizeTitle : 48px;
 
+$sizeTitleMobile : 30px;
+
 //voir exemple dans actualité de welcome.jsx
 $buttonGold : (
     // bottom: -30px,

diff --git a/src/sass/welcome.scss b/src/sass/welcome.scss
@@ -283,5 +283,99 @@
         height: 4px;
         background: $bleuCVB;
     }
+}
+
+//________________________________________________________________
+// ______________________ Media queries __________________________
+//________________________________________________________________
+
+/* Media queries pour appareils tablettes */
+@media (max-width: 1024px) {
 
-}
+}
+
+/* Media queries pour appareils mobiles */
+@media (max-width: 480px) {
+    // _____________________________ Photo intro ____________________________
+    .main-photo-cover{
+        img{
+            height: 25vh;
+        }
+    }
+    // _____________________________ Scores ____________________________
+    .scores{
+        width: 95%;
+        h2{
+            margin: 3% 0 3% 0%;
+            font-size: $sizeTitleMobile;
+        }    
+    }
+    // _____________________________ Atualités ____________________________
+    .actualites::after {
+        top: 2%; 
+        height: 100%;
+    }
+    .actualites{
+        margin: 0 auto;
+        width: 100%;
+        h2{
+            margin: 10% 0 10% 0%;;
+            font-size: $sizeTitleMobile;
+        }
+        .first-actu{
+            width: 100%;
+            margin: 0 auto;
+            min-width: 300px;
+            max-width: 480px;
+            min-height: 0px;
+            h3{
+                font-size: 18px;
+            }
+            img{
+                height: 300px;
+            }
+        }
+        .others-actu{
+            width: 100%;
+            min-width: 300px;
+            min-height: 0px;
+            margin-bottom: 20px;
+            .block-others-actus{
+                h3{
+                    font-size: 16px;
+                }
+                p{
+                    font-size: 14px;
+                }
+            }
+            .all-actus {
+                bottom: -25px;
+                right: -5px;
+                font-size: 14px; 
+            }
+
+        }
+    }    
+    // _____________________________ Réseaux ____________________________
+
+    .reseaux{
+        margin: 0 auto;
+        width: 80%;
+        margin-top: 15%;    
+        h2{
+            position: relative;
+            margin: $marginTitle;
+            Font-family: $fontTitle;
+            font-size: $sizeTitleMobile;
+            color: $bleuCVB;
+            font-weight: 900;
+        }
+        img{
+            width: 100%;
+        }
+        .button-post{
+            font-size: 16px;
+        }
+    }
+
+}