responsive docs divers + boutique 💯

NicolasReitin · Jun 30, 2024 · 577746b · 577746b
1 parent 76dc1a9
commit 577746b
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 4 deletions.
diff --git a/src/js/Components/footer/InfosPratiques.jsx b/src/js/Components/footer/InfosPratiques.jsx
@@ -4,7 +4,7 @@ export default function InfosPratiques() {
   return (
     <>
         <div className='infos-pratiques'>
-            <h2>INFOS PRATIQUES</h2>
+            <h2 className='ml-4 lg:ml-0'>INFOS PRATIQUES</h2>
             <p className='mt-4'>Caen Volley Ball</p>
             <p>Centre Sportif La Haie Vigné, 135 Rue de Bayeux</p>
             <p>14000 Caen</p>

diff --git a/src/js/Pages/Boutique/Boutique.jsx b/src/js/Pages/Boutique/Boutique.jsx
@@ -37,12 +37,12 @@ export default function Boutique( {auth}) {
                 " />
                 <div className="bloc-tailles">
                   <div className="veste">
-                    <img src="/assets/images/boutique/dimension_maillot_short.png" alt="dimensions veste zippée" />
                     <h3>Dimensions Veste zippée</h3>
+                    <img src="/assets/images/boutique/tailles_veste_zippee.png" alt="dimensions maillot et short" />
                   </div>
                   <div className="maillot">
-                    <img src="/assets/images/boutique/tailles_veste_zippee.png" alt="dimensions maillot et short" />
                     <h3>Dimensions Maillot + Short</h3>
+                    <img src="/assets/images/boutique/dimension_maillot_short.png" alt="dimensions veste zippée" />
                   </div>
                 </div>
               </div>

diff --git a/src/sass/divers.scss b/src/sass/divers.scss
@@ -267,5 +267,126 @@ section{
 
 /* Media queries pour appareils mobiles */
 @media (max-width: 480px) {
-
+    section{
+        img{
+            width: 100%;
+            min-width: 320px;
+            max-width: 480px;
+        }
+        h1{
+            white-space: pre-wrap !important;
+            margin: 3%;
+            font-size: $sizeTitleMobile !important;
+        }
+        .planning, .organigramme, .historique, .reglement, .statuts, .tarifs, .mode-emploi-icence, .devenez-partenaire{
+            margin: 10% 0%;
+            display: flex;
+            justify-content: center;
+        }
+        .reglement, .statuts, .tarifs, .mode-emploi-icence, .devenez-partenaire{
+            border-bottom: solid 1px rgb(153, 153, 153);
+        }
+        .projet{
+            margin: 0 auto;
+            width: 100%;
+            .intro{
+                padding: 3% 5%;
+                p{
+                    text-align: justify;
+                    line-height: 1.5;
+                    font-size: 16px;
+                }
+            }
+            .projet-content{
+                margin-top: 5%;
+                h3{
+                    text-align: left;
+                    margin: 2% 5%;
+                }
+                h4{
+                    text-align: justify;
+                    margin: 2% 5%;
+                }
+                p{
+                    padding: 0 5%;
+                    line-height: 1.5;
+                    text-align: justify;
+                }
+            }
+        }
+        .docs-divers{
+            margin-bottom: 3%;
+            ul{
+                flex-direction: column;
+                flex-wrap: nowrap;
+                gap: 0;
+                li{
+                    margin-top: 3%;
+                    text-align: center;
+                    iframe{
+                        margin: 0 auto;
+                        width: 95%;
+                        height: 350px;
+                    }
+                }
+                p{
+                    width: 60%;
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+    // _____________________________ Boutique ________________________
+
+    .boutique{
+        width: 95%;
+        .intro{
+            h3{
+                font-size: 22px;
+            }
+            p{
+                text-align: justify;
+                line-height: 1.5;
+                font-size: 16px;
+            }
+        }
+        .riva-floc{
+            margin-top: 5%;
+            h2{
+                font-size: 22px;
+            }
+            p{
+                font-size: 16px;
+            }
+            img{
+                max-width: 480px;
+            }
+        }
+        .ak-seven{
+            h2{
+                font-size: 22px;
+            }
+            p{
+                font-size: 16px;
+            }
+            img{
+                margin: 0 auto;
+                max-width: 480px;
+                width: 95%;
+            }
+            .bon-commande{
+                margin-top: 10%;
+                max-width: 480px;
+            }
+            .bloc-tailles{
+                margin-top: 10%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                h3{
+                    font-size: 20px;
+                }
+            }
+        }
+    }   
 }