Fix css bugs and finish welcome popup responsive

asterjdm · May 20, 2024 · 3165586 · 3165586
1 parent 08c960d
commit 3165586
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -161,7 +161,7 @@ <h1 class="main-header-title-text2">cl</h1>
   </div>
 
   <div id="welcomePopup" class="standard-popup">
-    <div class="standard-popup-whole-section">
+    <div class="standard-popup-whole-section welcome-popup">
       <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>

diff --git a/styles/header.css b/styles/header.css
@@ -31,7 +31,7 @@
   padding-right: 1.5px;
   width: 100%;
   height: 38px;
-  font-size: var(--main-font-size)
+  font-size: var(--main-font-size);
   text-transform: uppercase;
   background: transparent;
 }

diff --git a/styles/standard-assets/input.css b/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: var(--main-font-size)
+  font-size: var(--main-font-size);
   box-shadow: var(--border-width) var(--border-width) var(--border-color);
   text-transform: uppercase;
   color: var(--main-color);

diff --git a/styles/standard-assets/popup.css b/styles/standard-assets/popup.css
@@ -230,6 +230,8 @@
 
 .welcome-links {
   display: flex;
+  align-items: center;
+  justify-content: center;
   gap: 30px;
   font-size: var(--main-font-size)
 }
@@ -238,6 +240,41 @@
   font-size: 25px;
 }
 
+@media screen and (max-width: 800px){
+  /* Welcome popup */
+  .standard-popup-whole-section.welcome-popup{
+    height: 100%;
+  }
+
+  .standard-popup-whole-section-content.welcome-popup {
+    width: 100%;
+    height: 100%;
+  }
+
+  .welcome-title {
+    margin-top: -80px;
+    font-size: 10vw;
+  }
+
+  .welcome-text {
+    text-align: left;
+    font-size: 4.5vw;
+  }
+
+  .welcome-links {
+    font-size: 3.8vw;
+  }
+
+  .welcome-button {
+    bottom: 50px;
+    position: absolute;
+    width: calc(100% - 100px);
+    height: 60px;
+    font-size: 4.5vw;
+  }
+}
+
+
 @media screen and (max-width: 1000px) {
   .standard-popup-whole-section.comment-popup,
   .standard-popup-whole-section.rating-popup {

diff --git a/styles/standard-assets/select.css b/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: var(--main-font-size)
+    font-size: var(--main-font-size);
     text-align: center;
     text-transform: uppercase;
     color: var(--main-color);