From 5e14835069714832a1da10f556f2aea081669a84 Mon Sep 17 00:00:00 2001
From: samuel <samuel.campos@netoik.io>
Date: Mon, 6 Jun 2022 16:12:53 +0200
Subject: [PATCH] improve alignment of masthead using margin instead of
 position

---
 front/assets/css/styles.css | 43 ++++++++++++++++++++-----------------
 front/index.html            | 16 ++++++++------
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/front/assets/css/styles.css b/front/assets/css/styles.css
index 37a4d97..f843931 100644
--- a/front/assets/css/styles.css
+++ b/front/assets/css/styles.css
@@ -11492,59 +11492,62 @@ html {
 
 .masthead {
   height: 100vh;
+  min-height: 700px;
+  padding-top: 12vw;
+  padding-bottom: 50px;
+}
+.masthead .container {
+  height: 100%;
 }
 .masthead .masthead-avatar {
-  position: absolute;
-  top: calc(50vh - 18rem);
-  left: 100vw;
-  width: 15rem;
+  margin-left: 100%;
   transition: all 0.5s ease-in-out;
 }
+.masthead .masthead-avatar img {
+  width: 15rem;
+}
 .masthead .masthead-avatar.fallen {
-  left: calc(50vw - 7.5rem);
+  margin-left: 0;
 }
 
 .masthead .masthead-heading {
-  position: absolute;
-  top: 50vh;
-  left: -100vw;
-  width: 100%;
   font-size: 2.75rem;
   line-height: 2.75rem;
+  margin-left: -100%;
   transition: all 0.5s ease-in-out;
 }
 .masthead .masthead-heading img {
   height: 4rem;
 }
 .masthead .masthead-heading.fallen {
-  left: 0;
+  margin-left: 0;
 }
 
 .masthead .masthead-subheading {
-  position: absolute;
-  top: calc(50vh + 5rem);
-  left: 100vw;
-  width: 100%;
+  margin-left: 100%;
   font-size: 1.25rem;
   transition: all 0.5s ease-in-out;
 }
 .masthead .masthead-subheading.fallen {
-  left: 0;
+  margin-left: 0;
 }
 
 @media (max-width: 575px) {
-  .masthead .masthead-avatar {
+  .masthead {
+    min-height: 600px;
+  }
+  .masthead .masthead-avatar img {
     width: 11rem;
-    top: calc(50vh - 13rem);
+    /*top: calc(50vh - 13rem);*/
   }
   .masthead .masthead-avatar.fallen {
-    left: calc(50vw - 5.5rem);
+    /*left: calc(50vw - 5.5rem);*/
   }
   .masthead .masthead-heading {
-    top: 50vh;
+    /*top: 50vh;*/
   }
   .masthead .masthead-subheading {
-    top: calc(50vh + 4rem);
+    /*top: calc(50vh + 4rem);*/
   }
 }
 
diff --git a/front/index.html b/front/index.html
index c821b44..de23727 100644
--- a/front/index.html
+++ b/front/index.html
@@ -66,14 +66,16 @@
 		<!--            Masthead            -->
 		<!-- ============================== -->
 		<header class="masthead text-primary text-center">
-			<div class="container d-flex align-items-center flex-column">
+			<div class="container d-flex flex-column justify-content-center">
 				<!-- Masthead Avatar Image-->
-				<img class="masthead-avatar" src="/assets/img/profil.png" alt="..." />
+				<div class="masthead-avatar my-4 w-100">
+					<img src="/assets/img/profil.png" alt="..." />
+				</div>
 				<!-- Masthead Heading-->
-				<h1 class="masthead-heading">
+				<h1 class="masthead-heading my-4 w-100">
 					<img src="/assets/img/netoik-title.svg" alt="Netoïk">
 				</h1>
-				<div class="masthead-subheading font-weight-light mb-0">
+				<div class="masthead-subheading font-weight-light mb-4 w-100">
 					<!-- Icon Divider-->
 					<div class="divider-custom">
 						<div class="divider-custom-line bg-primary border-primary"></div>
@@ -116,7 +118,7 @@
 								<span>
 									La <strong>cybersécurité</strong> est primordiale dans un projet <strong>devOps</strong>,
 									elle passe par le respect des principes de développement <strong>secure-by-design</strong>:
-									<ul>
+									<ul class="mb-0">
 										<li>
 											Identifier les menaces
 										</li>
@@ -152,7 +154,7 @@
 								<span>
 									Selon les contraintes du projet, différents outils et langages de
 									<strong>programmation</strong> peuvent être utilisés:
-									<ul>
+									<ul class="mb-0">
 										<li>
 											Un <strong>langage haut-niveau</strong> POO (Python, PHP) pour un développement rapide
 										</li>
@@ -179,7 +181,7 @@
 								<span>
 									Chaque <strong>système de gestion de bases de données</strong> (SGBD)
 									possède ses avantages et ses inconvénients:
-									<ul>
+									<ul class="mb-0">
 										<li>
 											Les <strong>BDD relationnelles</strong> (PostgreSQL, MariaDB/MySQL, SQLite)
 											sont souvent suffisantes pour couvrir la plupart des besoins.