Refactorisation: beaucoup de la mise-en-page qui était spécifique à index.html...

Refactorisation: beaucoup de la mise-en-page qui était spécifique à index.html a été modularisé de sorte à pouvoir le réutiliser dans d'autres pages

css/comic.css

@@ -33,19 +33,32 @@
     width: 18px;
 }
 
-/* Corps */
-body section {
-    font-family: "Arial";
+/* En-tête de page */
+#en-tête-page {
+    background-color: #F3F3F3;
+}
+
+#en-tête-page img {
+    height: 50px;
 }
 
+/* Sections */
 section {
-    /* Purement cosmétique, désactiver au besoin */
-    padding-top: 2rem;
+    font-family: "Arial";
+    padding-top:    2rem; /* Peut rétrécir cet espace si ça plus le
+                             padding du section-heading crée trop d'espace
+                             vide au haut des section */
     padding-bottom: 2rem;
+    padding-left:   30px;
+    padding-right:  30px;
 }
 
-#logo {
-    width: 250px;
+.section-paire {
+    background-color: #eeeeee;
+}
+
+.section-impaire {
+    background-color: white;
 }
 
 .section-heading {
@@ -59,32 +72,21 @@ section {
     padding-bottom: 2rem;
 }
 
-#a-propos {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-}
-
-#vidéo {
-    background-color: lightgray;
-}
-
-#vidéo .container-fluid {
+/* Sections vidéos */
+.section-vidéo .container-fluid {
     padding: 0;
 }
 
-#vidéo .row {
+.section-vidéo .row {
     padding-top:    2rem;
     padding-bottom: 2rem;
     padding-left:   2rem;
     padding-right:  2rem;
-}
 
-#lecteur-vidéo {
-    max-width: 800px;
-    margin: auto;
+    margin:     auto;
 }
 
-#vidéo video {
+.section-vidéo video {
     width: 100%;
     /* Sans cette ligne, ça plante sur Safari 13.1.1
     source: https://stackoverflow.com/questions/16079275/
@@ -93,10 +95,83 @@ section {
     height: 100%;
 }
 
-#services .row {
-    padding-left:   30px;
-    padding-right:  30px;
-    padding-bottom: 30px;
+.légende {
+    font-style: italic;
+    margin: 5px;
+}
+
+/* Grilles de portraits */
+.section-portraits {
+    padding-left:  -20px;
+    padding-right: -20px;
+}
+
+.portrait {
+    width:  150px;
+    /* TODO: arrondir les coins */
+}
+
+.card {
+    margin: 10px;
+    max-width: 700px;
+    /* Ça devrait être assez large pour faire rentrer
+    n'importe quel couple "Pseudo | MonRôle" */
+    width: 450px; */
+}
+
+.card .portrait {
+    margin: 10px;
+}
+
+.card .portrait img {
+    width:  150px;
+    height: 150px;
+    border-radius: 50%; /* photos dans un cercle */
+}
+
+.card .card-body {
+    padding-top:    10px;
+    padding-bottom: 10px;
+    padding-left:   10px;
+    padding-right:  10px;
+}
+
+.card-title .pseudo {
+    font-weight: bold;
+}
+
+.card-title .rôle {
+    color: grey;
+}
+
+/* Bas-de-page */
+footer {
+    background-color: #202020;
+}
+footer p {
+    color: white;
+}
+
+#courriel {
+    text-decoration: none;
+}
+
+.réseau-social {
+    font-size:      30px;
+    padding-left:   3px;
+    padding-right:  3px;
+}
+
+/* Insérer ci-dessous le CSS spécifique à une page */
+
+/* Spécifique à index.html (Accueil) */
+#grand-logo {
+    width: 250px;
+}
+
+#a-propos {
+    padding-top:    2rem;
+    padding-bottom: 2rem;
 }
 
 #services .section-heading {
@@ -142,20 +217,11 @@ section {
     padding-bottom: 1rem;
 }
 
-/* Bas-de-page */
-footer {
-    background-color: #202020;
-}
-footer p {
-    color: white;
-}
-
-#courriel {
-    text-decoration: none;
+/* Spécifique à gabarit.html */
+#fish {
+    max-width: 600px;
 }
 
-.réseau-social {
-    font-size: 30px;
-    padding-left: 3px;
-    padding-right: 3px;
+#fish img {
+    width: 100%;
+}
\ No newline at end of file
-}

index.html

@@ -78,7 +78,7 @@ implicite. -->
     <!-- TODO: Rajouter une image en fond -->
     <!-- TODO: Rendre le logo plus beau   -->
     <h1 class="section-heading text-center">
-      <img src="ressources/logo-comic-2-lignes.jpeg" alt="Logo Comic Inside" id="logo">
+      <img src="ressources/logo_comic.png" alt="Logo Comic" id="grand-logo">
     </h1>
   </header>
 
@@ -94,9 +94,9 @@ implicite. -->
     </div>
   </section>
 
-  <section id="vidéo">
+  <section class="section-vidéo section-paire">
     <div class="container-fluid text-center">
-      <div class="row justify-content-center" id="lecteur-vidéo">
+      <div class="row justify-content-center" style="max-width: 800px;">
         <video controls>
           <source src="ressources/présentation-pinep-2018-2019.mp4" type="video/mp4">
         </video>
@@ -144,7 +144,7 @@ implicite. -->
     <!-- /.row -->
   </section>
 
-  <!-- Footer -->
+  <!-- Bas-de-page -->
   <footer class="py-5">
     <div class="container text-center">
       <h5><b><p>COMIC</p></b></h5>