feat: minor css updates

CLICGameStarProjects · Nov 17, 2023 · 17b4f71 · 17b4f71
1 parent 89ac076
commit 17b4f71
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 24 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -110,6 +110,26 @@ a {
     width: 5rem;
 }
 
+.container {
+    margin: 1.5em; 
+    max-width: 200ch;
+}
+@media (min-width:30rem) {
+    .container {
+        margin: 2.5em;
+    }
+}
+@media (min-width:40rem) {
+    .container {
+        margin: 3em;
+    } 
+}
+@media (min-width:60rem) {
+    .container {
+        margin: 5em; 
+     }
+}
+
 /* buttons
 ************************************/
 
@@ -337,7 +357,9 @@ nav a:focus {
 
 /****************/
 main{
-    display: block;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     margin: 0 auto;
     max-width: 100vw;
     overflow: hidden;
@@ -441,7 +463,7 @@ main{
 
 @media (min-width: 60rem){
     .quick-info {
-        margin: 2.5em 35%;
+        margin: 2.5em 25%;
     }
     .quick-info-item {
         padding: .3em;
@@ -479,6 +501,8 @@ main{
 ********************************************/
 
 .chiffres {
+    width: 100%;
+    max-width: 140ch;
     margin: 4em auto;
     display: flex;
     flex-direction: column;
@@ -584,10 +608,6 @@ main{
 /* infos importantes (page infos)
 ********************************************/
 
-.infos {
-   margin: 1.5em; 
-}
-
 .info-list{
     display: flex;
     gap: 2em;
@@ -613,15 +633,7 @@ main{
 .info-title h3 {
     text-align: left;
 }
-@media (min-width:30rem) {
-    .infos {
-        margin: 2.5em;
-    }
-}
 @media (min-width:40rem) {
-    .infos {
-        margin: 3em;
-    }
     .info-list{
         flex-direction: row;
         flex-wrap: wrap;
@@ -633,9 +645,6 @@ main{
 }
 
 @media (min-width:70rem) {
-    .infos {
-        margin: 5em; 
-     }
     .info-bloc {
         max-width: 30%;
     }
@@ -645,7 +654,6 @@ main{
 ********************************************/
 
 .faq{
-    margin: 1.5em;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -662,7 +670,6 @@ main{
     flex-direction: column;
     gap:.7em;
     break-inside: avoid;
-    margin: 1em;
 }
 
 .faq-q {

diff --git a/index.html b/index.html
@@ -56,7 +56,7 @@ <h1>Bienvenue à ICeLAN!
             </div>
             <img class="hero-img hero-img-2" src="assets/img/borne.svg">
         </section>
-        <section class="about">
+        <section class="container about">
             <h2>Qu'est-ce que c'est ?</h2>
             <p class="description">
                 ICeLAN est un week-end de tournois de jeux vidéo et de jeux de plateau 
@@ -95,7 +95,7 @@ <h3>Repas, Snacks et Boissons</h3>
             </div>
             <a class="button button-green-flip button-medium" href="/infos.html">Plus d'Infos</a>
         </section>
-        <section class="chiffres">
+        <section class="conatiner chiffres">
             <div class="block-compteur">
                 <div class="compteur" id="participant-counter">
                     100

diff --git a/infos.html b/infos.html
@@ -41,7 +41,7 @@
         </header>
 
         <main>
-        <section class="infos">
+        <section class="container infos">
             <h2>Informations Importantes</h2>
             <div class="info-list">
                 <div class="info-bloc">
@@ -125,7 +125,7 @@ <h3>Questions & Remarques</h3>
             </div>
         </section>
 
-        <section class="faq">
+        <section class="container faq">
             <h2>Foire Aux Questions</h2>
             <div class="faq-list">
                 <div class="faq-bloc">

diff --git a/regles.html b/regles.html
@@ -41,7 +41,7 @@
         </header>
 
         <main>
-        <section class="rules">
+        <section class="container rules">
             <h2>Règlement ICeLAN</h2>
             <div class="rule-list">
                 <h3>Résumé</h3>