Add main font size variable, and finish desktop welcome popup

index.html

@@ -162,14 +162,14 @@ <h1 class="main-header-title-text2">cl</h1>
 
   <div id="welcomePopup" class="standard-popup">
     <div class="standard-popup-whole-section">
-      <div class="standard-popup-whole-section-content">
+      <div class="standard-popup-whole-section-content welcome-popup">
         <h1 class="welcome-title">Bienvenue sur CESCOLEAKS !</h1>
         <p class="welcome-text">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>
         <div class="welcome-links">
           <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 welcome-button">j'ai lu et accepté le règlement</button>
+        <button class="standard-button welcome-button" onclick="closeWelcomePopup('welcomePopup')">j'ai lu et accepté le règlement</button>
       </div>
     </div>
   </div>

styles/header.css

@@ -31,7 +31,7 @@
   padding-right: 1.5px;
   width: 100%;
   height: 38px;
-  font-size: 20px;
+  font-size: var(--main-font-size)
   text-transform: uppercase;
   background: transparent;
 }

styles/standard-assets/button.css

@@ -3,7 +3,7 @@
   padding-left: 7.5px;
   padding-right: 7.5px;
   box-shadow: var(--border-width) var(--border-width) var(--border-color);
-  font-size: 20px;
+  font-size: var(--main-font-size)
   text-align: center;
   text-transform: uppercase;
   color: var(--main-color);

styles/standard-assets/input.css

@@ -2,7 +2,7 @@
   border: var(--border-width) var(--border-style) var(--border-color);
   border-radius: none;
   padding-left: 4px;
-  font-size: 20px;
+  font-size: var(--main-font-size)
   box-shadow: var(--border-width) var(--border-width) var(--border-color);
   text-transform: uppercase;
   color: var(--main-color);

styles/standard-assets/popup.css

@@ -162,7 +162,7 @@
 }
 
 .score-title {
-  font-size: 20px;
+  font-size: var(--main-font-size)
 }
 
 .value {
@@ -202,7 +202,7 @@
 }
 
 .score-value p {
-  font-size: 20px;
+  font-size: var(--main-font-size);
   width: 15px;
 }
 
@@ -211,6 +211,33 @@
   font-size: 25px;
 }
 
+/* Welcome popup */
+.standard-popup-whole-section-content.welcome-popup {
+  padding: 50px;
+  width: 700px;
+  height: 500px;
+}
+
+.welcome-title {
+  margin-top: -20px;
+  font-size: 65px;
+}
+
+.welcome-text {
+  text-align: justify;
+  font-size: var(--main-font-size)
+}
+
+.welcome-links {
+  display: flex;
+  gap: 30px;
+  font-size: var(--main-font-size)
+}
+
+.welcome-button {
+  font-size: 25px;
+}
+
 @media screen and (max-width: 1000px) {
   .standard-popup-whole-section.comment-popup,
   .standard-popup-whole-section.rating-popup {
@@ -323,7 +350,7 @@
   .standard-button.send-message,
   .standard-input.send-message {
     height: 60px;
-    font-size: 20px;
+    font-size: var(--main-font-size)
   }
 
   .message {

styles/standard-assets/select.css

@@ -4,7 +4,7 @@
     padding-left: 7.5px;
     padding-right: 7.5px;
     box-shadow: var(--border-width) var(--border-width) var(--border-color);
-    font-size: 20px;
+    font-size: var(--main-font-size)
     text-align: center;
     text-transform: uppercase;
     color: var(--main-color);

styles/styles.css

@@ -9,9 +9,13 @@
 }
 
 :root {
+    /* Colors */
     --main-background: #000000;
     --main-color: #FFFFFF;
 
+    /* Text */
+    --main-font-size: 20px;
+
     /* Fonts */
     --main-font: "SpaceGrotesk";
     --title-font: "Jersey20-Regular";
@@ -59,7 +63,7 @@ main {
 }
 
 .main-footer-text {
-    font-size: 20px;
+    font-size: var(--main-font-size)
 }