Finish welcome popup

index.html

@@ -162,37 +162,18 @@ <h1 class="main-header-title-text2">cl</h1>
     </div>
   </div>
 
-  <div style="display: flex;" class="standard-popup" id="welcomePopup">
+  <div class="standard-popup" id="welcomePopup">
     <div class="standard-popup-content about">
+      <h1>Bienvenue sur CESCOLEAKS !</h1>
+      <p>Nous vous invitons à prendre connaissance, avant d'utiliser le site, du règlement. Si vous voulez comprendre d'un point de vue plus fondamental les objectifs de CESCOLEAKS, vous pouvez consulter notre page "À propos".</p>
 
-      <h2>Bienvenue sur CESCOLEAKS !</h2>
-      <p>Si tu es tout comme nous un élève ou un ancien élève de Cescole, tu as sûrement été témoin du même problème que
-        nous. Ce problème est très simple, une grande partie des professeurs de ce collège <span>de merde</span> sont
-        parfois totalement incompétents.</p>
-      <p>Cela peut s'expliquer facilement par le fait que les profs ne sont quasiment pas supervisés, certains
-        continuent de se baigner tranquillement dans leur incompétence sans qu'aucune mesure ne soit prise.</p>
-      <p>Si votre coiffeur est très mauvais et qu'il ne sait pas comment faire son travail, la solution est simple :
-        <span>vous tuez le coiffeur</span> vous changez de coiffeur. Et au fil du temps, si plus personne ne veut
-        revenir chez ce coiffeur, il finira par faire faillite et se trouvera un job plus adapté à ses qualités. Mais
-        lorsque c'est un élève qui se retrouve avec un prof incompétent, que faire ?
-      </p>
-      <p>C'est pour cela que nous avons décidé <span>de brûler l'école</span> de créer CESCOLEAKS. CESCOLEAKS est un
-        site web ayant pour but de redonner la parole aux élèves. CESCOLEAKS donne la possibilité aux élèves de donner
-        leur avis <span>sur les coiffeurs</span> sur les profs de manière anonyme (et respectueuse).</p>
-      <p>Bien sûr, nous sommes très négatifs mais tous les profs ne sont pas incompétents, il existe même de très très
-        bons profs. Et c'est aussi pour pouvoir les féliciter de leur travail que nous avons créé CESCOLEAKS.</p>
-      <p>Nos intentions sont selon nous louables et nous espérons que CESCOLEAKS permettra d'améliorer la situation.
-        <br /><i>> Au moins nous aurons essayé...</i>
-      </p>
-      <h3>Qui sommes-nous ?</h3>
-      <p>Notre identité compte peu. Ce sont nos actions qui définissent qui nous sommes. En sachant ce que l'on a
-        accompli, vous savez qui nous sommes.<br />Si aujourd'hui nous avons décidé de promouvoir la liberté
-        d'expression et la qualité de l'enseignement, cela fait de nous des défenseurs de ces causes.</p>
-
-      <a target="_blank" rel="noopener noreferrer" href="about.html">Le "About" de CESCOLEAKS</a>
-
-      <a target="_blank" rel="noopener noreferrer" href="rules.html">Les règles de CESCOLEAKS</a>
+      <div class="about-link">
+        <a target="_blank" rel="noopener noreferrer" href="about.html">À-propos de CESCOLEAKS</a>
+        <a target="_blank" rel="noopener noreferrer" href="rules.html">Règlement de CESCOLEAKS</a>
+      </div>
+
       <button class="standard-button about" onclick="closeWelcomePopup('welcomePopup')">J'ai lu et accepté les règles</button>
+
     </div>
   </div>
 

scripts/page.js

@@ -26,6 +26,7 @@ ratingValues.forEach((value, index) => {
 
 document.addEventListener("DOMContentLoaded", function () {
   if (localStorage.getItem("welcomePopup") != "true") {
+    document.body.style.overflow = "hidden";
     openPopup("welcomePopup");
   }
 });

styles/standard-assets/popup.css

@@ -84,15 +84,33 @@
 }
 
 .standard-popup-content.about {
-  padding: 20px;
+  padding: 50px;
   width: 800px;
   height: 600px;
-  overflow-y: auto;
 }
 
-.standard-popup-content.about span {
-  text-decoration: line-through;
-  font-style: italic;
+.standard-popup-content.about h1 {
+  font-size: 65px;
+  transform: translateY(-60px);
+}
+
+.standard-popup-content.about p {
+  text-align: justify;
+  font-size: 22px;
+  transform: translateY(-50px);
+}
+
+.standard-popup-content.about button {
+  font-size: 30px;
+  position: absolute;
+  bottom: 50px;
+}
+.about-link {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-size: 22px;
+  transform: translateY(-30px);
 }
 
 .select-image {
@@ -236,6 +254,27 @@
   }
 }
 
+@media screen and (max-width: 830px) {
+  .standard-popup-content.about {
+    width: 100%;
+    height: 100%;
+  }
+
+  .standard-popup-content.about h1 {
+    font-size: 10vw;
+  }
+
+  .standard-popup-content.about p {
+    text-align: left;
+    font-size: 5vw;
+  }
+
+  .standard-popup-content.about button {
+    font-size: 5vw;
+  }
+
+}
+
 @media screen and (max-width: 675px) {
   .whole-section.comment-popup,
   .whole-section.rating-popup {