From f2b3311ee40bea111e482052b97116bfa544e868 Mon Sep 17 00:00:00 2001
From: yannroberge <yroberge@uwaterloo.ca>
Date: Tue, 9 Jun 2020 20:57:17 -0400
Subject: [PATCH] =?UTF-8?q?Refactorisation:=20beaucoup=20de=20la=20mise-en?=
 =?UTF-8?q?-page=20qui=20=C3=A9tait=20sp=C3=A9cifique=20=C3=A0=20index.htm?=
 =?UTF-8?q?l=20a=20=C3=A9t=C3=A9=20modularis=C3=A9=20de=20sorte=20=C3=A0?=
 =?UTF-8?q?=20pouvoir=20le=20r=C3=A9utiliser=20dans=20d'autres=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/comic.css | 150 ++++++++++++++++++++++++++++++++++++--------------
 index.html    |   8 +--
 2 files changed, 112 insertions(+), 46 deletions(-)

diff --git a/css/comic.css b/css/comic.css
index f907f21..1a35f1c 100644
--- a/css/comic.css
+++ b/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
diff --git a/index.html b/index.html
index d40e7ea..c3b8729 100644
--- a/index.html
+++ b/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>
-- 
GitLab