Written Legal mentions. Legal popup is now responsive

components/footer.html

@@ -1,7 +1,71 @@
 <div id="footer">
     <div class="black-bg">
         <div class="legal">
-            <a class="btn" href='javascript:closePopUp("black-bg")'>x</a>
+            <div class="legal-close-container">
+                <a class="btn legal-close" href='javascript:closePopUp("black-bg")'>
+                    <span class="iconify" data-icon="mdi-close"></span>
+                </a>
+            </div>
+            <h1>Mentions légales</h1>
+            <div class="legal-text">
+                <p>
+                    En collaboration avec Lemiament.
+                    <br><br>
+                    Nom du site : <a href="http://saoulbonmonsieur.etheryo.fr">saoulbonmonsieur.etheryo.fr</a><br>
+                    Propriétaire du site : M. Saoul Bonmonsieur<br>
+                    Email : <a href="mailto:yo.boujon@gmail.com">saoulbonmonsieur@skyblog.fr</a><br>
+                    <br><br>
+                    Adresse : 19 Rue du Fourbastard<br>
+                    31000 Toulouse<br>
+                    Tél : 01 02 03 04 05<br>
+                    Forme juridique : Entreprise Individuelle<br>
+                    Raison sociale : <br>
+                    SIRET : 812 920 932 00017 <br>
+                    TVA Intracommunautaire : FR60812920932<br>
+                    <br><br>
+                    Hébergement : Mon Raspberry Pi situé dans le fin fond de la Sibérie
+                    <br><br>
+                    L'utilisateur du site reconnaît ne pas être un imbécile et possède la compétence d'utiliser
+                    sa souris et son clavier pour accéder et utiliser ce site. Il reconnaît également la possibilité à
+                    Yohan Boujon se récupérer votre adresse IP, votre géolocalisation, le numéro de votre Tante, votre
+                    marque de pâtes préféré.
+                    <br><br>
+                    J'aime beaucoup trop les cookies, c'est pour cela que je décide d'en manger un peu plus que ce qui
+                    est autorisé. Que ce soit au chocolat blanc, à la vanille, au caramel ou à la pistache : je déguste
+                    tout.
+                    <br><br>
+                    Selon l'article 34 de la loi "Informatique et Libertés", l'utilisateur dispose d'un droit d'accès,
+                    de modification, de rectification et de suppression des
+                    données qui le concernent. Cependant, Saoul Bonmonsieur possède un droit de Veto dans votre
+                    dimension ainsi que 5 autres et ne vous autorise donc ni à accèder, ni à supprimer ces derniers
+                    <br><br>
+                    Il en est de même des éventuelles bases de données figurant sur le site Internet qui sont protégées
+                    par
+                    les dispositions de la loi du 11 juillet 1998 portant transposition dans le Code de la propriété
+                    intellectuelle (CPI) de la directive européenne du 11 mars 1996 relative à la protection juridique
+                    des
+                    bases de données.
+                    <br><br>
+                    Le logo de Saoul Bonmonsieur n'est ni reproductible ni utilisable dans d'autres domaines. Nous
+                    savons qu'il est beau, voire magnifique. S'il vous arrive de l'utiliser Saul Bonmonsieur sera dans
+                    l'obligation de vous poursuivre en justice, et vous ne gagnerez pas, ni ne pouvez être défendu par
+                    ce dernier.
+                    <br><br>
+                    Le présent site est la propriété de LeMiament, réalisé par Yohan Boujon - <a href="mailto:yo.boujon@gmail.com">yo.boujon@gmail.com</a>
+                    <br><br>
+                    <br><br>
+                    Ce site web est une parodie basée sur avocat-fonvieille</a>
+                    <br>
+                    Cette parodie ne vise en aucun cas à discréditer ou discriminer la profession de Mme Fonvieille
+                    Joelle. Nous avons pris conscience du délit de contrefaçon qui est nommé dans les mentions légales
+                    et ne faisons pas parti de cette catégorie. Toutes les images, les fichiers et les textes sont
+                    originaux. .Toutes les informations d'une entreprise sous forme juridique individuelle sont fausses
+                    et
+                    ne doivent pas être pris en compte hors de l'humour. Il n'y a pas de réelles mentions légales dans
+                    le cas d'un site d'un particulier. Toutes les mentions suivantes sont également à visée parodique et
+                    ne reflète en aucun cas la réalité. Aucune donnée n'est récupérée sur ce site.
+                </p>
+            </div>
         </div>
     </div>
     <div class="footer-container">
@@ -10,7 +74,9 @@
         </div>
         <div class="footer-container_grid">
             <h1>Informations</h1>
-            <p>Color Palette based on <a href="https://colorhunt.co/palette/4b4a5aa55540e79a58e1d5d2">this one</a> and <a href="https://colorhunt.co/palette/2d24245c3d2eb85c38e0c097">this one</a></p>
+            <p>Color Palette based on <a href="https://colorhunt.co/palette/4b4a5aa55540e79a58e1d5d2">this one</a> and
+                <a href="https://colorhunt.co/palette/2d24245c3d2eb85c38e0c097">this one</a>
+            </p>
         </div>
         <div class="footer-container_grid">
             <h1>Newsletter</h1>

css/base.css

@@ -68,15 +68,3 @@ p {
     z-index: 99;
     display: none;
 }
-
-.legal{
-    border-radius: .5rem;
-    height: 80%;
-    width: 50%;
-    position: relative;
-    top: 10%;
-    left: 25%;
-    background-color: var(--color-white);
-    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
-    z-index: 100;
-}

css/footer.css

@@ -24,6 +24,11 @@
         box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
         z-index: 100;
     }
+
+    .legal h1{
+        font-size: xx-large;
+        margin-left: 2rem;
+    }
 }
 
 @media screen and (max-width: 700px) {
@@ -62,6 +67,11 @@
         box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
         z-index: 100;
     }
+
+    .legal h1{
+        font-size: large;
+        margin-left: 2rem;
+    }
 }
 
 .footer-container_grid {
@@ -99,3 +109,33 @@
     transform: translateY(-2px);
     transition: all .3s ease 0s;
 }
+
+.legal-text {
+    overflow-y: scroll;
+    margin: 2rem;
+    height: inherit;
+    font-size: small;
+}
+
+.legal-close-container
+{
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+}
+
+.legal-close{
+    border-radius: 100rem;
+    background-color: rgba(0, 0, 0, 0.0);
+}
+
+.legal-close:hover{
+    background-color: var(--color-main-light);
+    border-radius: 100rem;
+    transform: translate(2px, -2px);
+}
+
+.legal-close svg{
+    font-size: 25px;
+}

js/base.js

@@ -125,5 +125,5 @@ window.addEventListener('load', function () {
     setTimeout(() => {
         //Will change
         popUpPlacement("black-bg");
-    }, 200);
+    }, 500);
 })