From 18fd18fec07f4816bf3b249c728ab1db678beed4 Mon Sep 17 00:00:00 2001
From: Divlo <contact@divlo.fr>
Date: Mon, 19 Aug 2019 01:21:00 +0200
Subject: [PATCH] Center Content each page

---
 404.php                 |  8 +++--
 css/style.css           | 10 +++---
 incl/footer.php         |  3 +-
 incl/menu.php           |  4 ++-
 index.php               | 28 +++++++++--------
 views/error404.php      | 27 ++++++++--------
 views/function-list.php | 68 +++++++++++++++++++++--------------------
 7 files changed, 80 insertions(+), 68 deletions(-)

diff --git a/404.php b/404.php
index a53a6bf..b5d15a3 100644
--- a/404.php
+++ b/404.php
@@ -8,9 +8,11 @@
 <?php include("./incl/menu.php");?>
 
 <!-- Page Content -->
-<div class="container">
-  <h1>Erreur <span class="important">404</span></h1>
-  <p class="pt-3 text-center">Cette page n'existe pas! <a href="/index.php" class="important">Revenir à la page d'accueil ?</a></p>
+<div class="jumbotron d-flex align-items-center">
+  <div class="container">
+    <h1>Erreur <span class="important">404</span></h1>
+    <p class="pt-3 text-center">Cette page n'existe pas! <a href="/index.php" class="important">Revenir à la page d'accueil ?</a></p>
+  </div>
 </div>
 
 <!-- Footer -->
diff --git a/css/style.css b/css/style.css
index c05db02..b9e5586 100644
--- a/css/style.css
+++ b/css/style.css
@@ -38,9 +38,6 @@ p {
 }
 
 /* HEADER */
-header {
-    margin-bottom: 4%;
-}
 #header-container {
     padding-bottom: 0;
 }
@@ -52,8 +49,11 @@ header {
 }
 
 /* CONTENT */
-.container {
-    padding-bottom: 25px;
+@media (min-width: 576px) {
+    .jumbotron {padding: 6.17rem 2rem;}
+}
+.jumbotron {
+    background-color: var(--background-color) !important;
 }
 .table {
     color: white;
diff --git a/incl/footer.php b/incl/footer.php
index 6c0a37d..95ec281 100644
--- a/incl/footer.php
+++ b/incl/footer.php
@@ -1,4 +1,5 @@
-        <footer class="text-center">
+</div>
+      <footer class="text-center">
             <a href="#" class="important"><i class="fas fa-arrow-up"></i></a>
             <div class="realDateTime">Affichage de l'heure en temps réel : <span class="important" id="realDateTime"></span></div>
             <div class="footer-text"><a href="https://divlo.fr/" target="_blank">Divlo</a> | Tous droits réservés</div>
diff --git a/incl/menu.php b/incl/menu.php
index 646de5b..ab76d8a 100644
--- a/incl/menu.php
+++ b/incl/menu.php
@@ -15,4 +15,6 @@
             </div>
         </div>
     </nav>
-</header>
\ No newline at end of file
+</header>
+
+<div class="jumbotron d-flex align-items-center">
\ No newline at end of file
diff --git a/index.php b/index.php
index 2886fee..4ad963f 100644
--- a/index.php
+++ b/index.php
@@ -25,19 +25,21 @@
 </header> 
 
 <!-- Page Content -->
-<div class="container">
-  <h1>Bienvenue sur <span class="important">FunctionProject</span>! 🎉</h1>
-  <p class="mt-5">FunctionProject est un projet créé par <a href="https://divlo.fr/" target="_blank">Divlo</a> qui a pour but de rassembler plein de mini-programme (fonctions JavaScript) permettant de faire plusieurs choses comme <b>savoir la météo</b>, générer un <b>nombre aléatoire</b>, etc. 
-  <br> <br>
-  <div><p class="text-center">
-  <a href="./views/function-list.php">Cliquez ici pour accéder à la liste des fonctions.</a>
-  <br> <br>
-  L'intégralité du <a target="_blank" href="https://github.com/Divlo/FunctionProject">code source</a> de ce site est disponible sur <a href="https://github.com/Divlo">mon profil GitHub</a> <i class="fab fa-github"></i>.
-  <br>
-  Je suis débutant en programmation donc si je commets une erreur dans le code, n'hésitez pas à me le faire savoir <i class="fas fa-code"></i>.
-  <br> <br>
-  Vous pouvez m'envoyer vos avis, suggestion d'ajouts, éventuel bug/problème grâce à ce <a href="https://docs.google.com/forms/d/1NliUWi3lntHDM42Td0C47J0cZKgnYilxT_0UcdmVaog/" target="_blank">Feedback Formulaire</a> 📝.
-  </p></div>
+<div class="jumbotron d-flex align-items-center">
+    <div class="container">
+        <h1>Bienvenue sur <span class="important">FunctionProject</span>! 🎉</h1>
+        <p class="mt-5">FunctionProject est un projet créé par <a href="https://divlo.fr/" target="_blank">Divlo</a> qui a pour but de rassembler plein de mini-programme (fonctions JavaScript) permettant de faire plusieurs choses comme <b>savoir la météo</b>, générer un <b>nombre aléatoire</b>, etc. 
+        <br> <br>
+        <div><p class="text-center">
+        <a href="./views/function-list.php">Cliquez ici pour accéder à la liste des fonctions.</a>
+        <br> <br>
+        L'intégralité du <a target="_blank" href="https://github.com/Divlo/FunctionProject">code source</a> de ce site est disponible sur <a href="https://github.com/Divlo">mon profil GitHub</a> <i class="fab fa-github"></i>.
+        <br>
+        Je suis débutant en programmation donc si je commets une erreur dans le code, n'hésitez pas à me le faire savoir <i class="fas fa-code"></i>.
+        <br> <br>
+        Vous pouvez m'envoyer vos avis, suggestion d'ajouts, éventuel bug/problème grâce à ce <a href="https://docs.google.com/forms/d/1NliUWi3lntHDM42Td0C47J0cZKgnYilxT_0UcdmVaog/" target="_blank">Feedback Formulaire</a> 📝.
+        </p></div>
+    </div>
 </div>
 
 <!-- Footer -->
diff --git a/views/error404.php b/views/error404.php
index 96f958c..caecd8d 100644
--- a/views/error404.php
+++ b/views/error404.php
@@ -8,22 +8,25 @@
 <?php include("../incl/menu.php");?>
 
 <!-- Page Content -->
-<div class="container">
-  <h1><span class="important">La météo</span> :</h1>
-  <p class="pt-3 text-center">Affiche la météo et l'heure local selon la ville.</p>
-  <div class="form-group">
-		<label for="cityName">Entrez le nom d'une ville :</label>
-        <input name="cityName" type="text" id="cityName" placeholder="(e.g : Paris)" class="form-control">
-        <br>
-        <div class="form-row text-center">
-            <div class="col-12">
-                <button type="submit" id="submitWeatherRequest" class="btn btn-dark text-center">Envoyer</button>
+<div class="jumbotron d-flex align-items-center">
+    <div class="container">
+    <h1><span class="important">La météo</span> :</h1>
+    <p class="pt-3 text-center">Affiche la météo et l'heure local selon la ville.</p>
+    <div class="form-group">
+            <label for="cityName">Entrez le nom d'une ville :</label>
+            <input name="cityName" type="text" id="cityName" placeholder="(e.g : Paris)" class="form-control">
+            <br>
+            <div class="form-row text-center">
+                <div class="col-12">
+                    <button type="submit" id="submitWeatherRequest" class="btn btn-dark text-center">Envoyer</button>
+                </div>
             </div>
+            <br> <br>
+            <p class="results text-center">La ville que vous avez rentré n'existe pas (dans l'API).</p>
         </div>
-        <br> <br>
-		<p class="results text-center">La ville que vous avez rentré n'existe pas (dans l'API).</p>
     </div>
 </div>
+
 <script>
     $(function () {
         $("#cityName").click(function() {
diff --git a/views/function-list.php b/views/function-list.php
index 37661fa..bc00a99 100644
--- a/views/function-list.php
+++ b/views/function-list.php
@@ -25,39 +25,41 @@
 </header>
 
 <!-- Page Content -->
-<div class="container">
-    <div class="row">
-        <h1>La liste des <span class="important">Fonctions</span> :</h1>
-            <table class="table table-bordered mt-5">
-                <thead>
-                    <tr>
-                        <th scope="col">Nom</th>
-                        <th scope="col">Description</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td><a href="./function-views/weatherRequest.php">Météo</a></td>
-                        <td>Affiche la météo et l'heure local selon la ville.</td>     
-                    </tr>
-                    <tr>
-                        <td><a href="./function-views/randomNumber.php">Nombre aléatoire</a></td>
-                        <td>Génère un nombre aléatoire entre un minimum inclus et un maximum inclus.</td>  
-                    </tr>
-                    <tr>
-                        <td><a href="./function-views/calculateAge.php">Quelle âge avez-vous ?</a></td>
-                        <td>Calcule l'âge de quelqu'un selon la date de naissance.</td> 
-                    </tr>
-                    <tr>
-                        <td><a href="./function-views/convertTemperature.php">Conversion de Température</a></td>
-                        <td>Convertit des Degré Celsius en Degré Fahrenheit et l'inverse aussi.</td>    
-                    </tr>
-                    <tr>
-                        <td><a href="./function-views/convertDistance.php">Conversion de Distance</a></td>
-                        <td>Convertit la longueur (distance) avec les unités allant de picomètre au Téramètre.</td> 
-                    </tr>
-                </tbody>
-            </table>
+<div class="jumbotron d-flex align-items-center">
+    <div class="container">
+        <div class="row">
+            <h1>La liste des <span class="important">Fonctions</span> :</h1>
+                <table class="table table-bordered mt-5">
+                    <thead>
+                        <tr>
+                            <th scope="col">Nom</th>
+                            <th scope="col">Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><a href="./function-views/weatherRequest.php">Météo</a></td>
+                            <td>Affiche la météo et l'heure local selon la ville.</td>     
+                        </tr>
+                        <tr>
+                            <td><a href="./function-views/randomNumber.php">Nombre aléatoire</a></td>
+                            <td>Génère un nombre aléatoire entre un minimum inclus et un maximum inclus.</td>  
+                        </tr>
+                        <tr>
+                            <td><a href="./function-views/calculateAge.php">Quelle âge avez-vous ?</a></td>
+                            <td>Calcule l'âge de quelqu'un selon la date de naissance.</td> 
+                        </tr>
+                        <tr>
+                            <td><a href="./function-views/convertTemperature.php">Conversion de Température</a></td>
+                            <td>Convertit des Degré Celsius en Degré Fahrenheit et l'inverse aussi.</td>    
+                        </tr>
+                        <tr>
+                            <td><a href="./function-views/convertDistance.php">Conversion de Distance</a></td>
+                            <td>Convertit la longueur (distance) avec les unités allant de picomètre au Téramètre.</td> 
+                        </tr>
+                    </tbody>
+                </table>
+        </div>
     </div>
 </div>