More harmonization and improvements in the CSS, still stable

MelissaOlas · Oct 7, 2021 · f719fa8 · f719fa8
1 parent 4ad5edc
commit f719fa8
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 51 deletions.
diff --git a/surprise.css b/surprise.css
@@ -1,7 +1,13 @@
 @import './fonts.css';
 
-h1 {
-    font-size: 48px !important; 
+.title {
+    height: 10vh;
+    text-align: center;
+    text-transform: uppercase;
+    font-family: var(--main-font-family);
+    color: var(--main-wcs-color);
+    background-color: var(--darker-gray);
+    font-size: 48px;
     font-weight: 900;
 }
 
@@ -11,7 +17,7 @@ h2 {
     background-color: var(--dark-gray);
     color: white;
     font-family: var(--main-font-family);
-    font-size: 22px;
+    font-size: 30px;
 }
 
 form {
@@ -21,20 +27,26 @@ form {
 }
 
 .form-element {
-    margin: 5px;
+    width: 85vw;
+    margin: 15px 0;
+    display: flex;
+    justify-content: space-between;
+    font-family: var(--second-font-family);
 }
 
 label {
     text-transform: uppercase;
     color: white;
     font-weight: 800;
+    font-size: 20px;
 }
 
 select {
     color: var(--main-wcs-color);
     font-weight: 600;
     border-radius: 5px;
-    width: 150px;
+    font-size: 20px;
+    width: 200px;
 }
 
 .form-button{
@@ -45,14 +57,15 @@ select {
     font-family: var(--main-font-family);   
 }
 
+
 .simulateur-buttons {
     background-color: var(--main-wcs-color);
     border: 1px solid var(--dark-gray);
     font-weight: 700;
     color: white;
-    font-size: 20px;
-    padding: 3px 15px;
-    border-radius: 8px;
+    font-size: 30px;
+    padding: 5px 25px;
+    border-radius: 16px;
     font-family: var(--main-font-family);
 }
 
@@ -67,11 +80,9 @@ select {
     margin-bottom: 10px;
 }
 
-.form-element {
-    width: 65vw;
-    display: flex;
-    justify-content: space-between;
-    font-family: var(--second-font-family);
+#other-search-close-button {
+    border-radius: 50%;
+    margin-top: 10px;
 }
 
 .search-results {
@@ -134,16 +145,6 @@ select {
     float: right;
 }
 
-.title {
-    height: 3em;
-    padding-top: 1em;
-    text-align: center;
-    text-transform: uppercase;
-    font-family: var(--main-font-family);
-    color: var(--main-wcs-color);
-    background-color: var(--darker-gray);
-}
-
 .cards {
     display: flex;
     margin-top: 10px;
@@ -264,6 +265,9 @@ select {
     border: none;
     border-radius: 0%;
 }
+.card-body button:hover {
+    cursor:pointer;
+}
 
 .descript-enseigne {
     position: relative;
@@ -301,21 +305,9 @@ select {
     width: 3em;
     border: none;
 }
-
-@media screen and (min-width: 576px) { 
-    .card { 
-        width: 20em;
-        max-height: 40em;
-        margin: 3em;
-    } 
-    .card-header {
-        width: 20em;
-        max-height: 20em;
-    }
-    .image-enseigne {
-        object-fit: contain;
-    }    
-  } 
+.btn-close-card:hover {
+    cursor:pointer;
+}
 
 /* CSS SPECIFIQUE AUX HEADER ET FOOTER */
 
@@ -389,17 +381,6 @@ footer a:hover {
   } 
 
 @media screen and (max-width: 800px) {
-    .simulateur-buttons {
-        background-color: var(--main-wcs-color);
-        border: 1px solid var(--dark-gray);
-        font-weight: 700;
-        color: white;
-        font-size: 40px;
-        padding: 6px 30px;
-        border-radius: 16px;
-        font-family: var(--main-font-family);
-    }
-
     .topnav a:not(:first-child) {display: none;}
     .topnav a.icon {
       float: right;
@@ -418,4 +399,43 @@ footer a:hover {
       text-align: center;
       height: auto;
     }
-}
+}
+
+@media screen and (min-width: 576px) { 
+    .card { 
+        width: 20em;
+        max-height: 40em;
+        margin: 3em;
+    } 
+    .card-header {
+        width: 20em;
+        max-height: 20em;
+    }
+    .image-enseigne {
+        object-fit: contain;
+    }    
+
+    h2 {
+        font-size: 22px;
+    }
+
+    select {
+        width: 150px;
+        font-size: 18px;
+    }
+
+    label {
+        font-size: 18px;
+    }
+
+    .simulateur-buttons {
+        font-size: 20px;
+        padding: 3px 15px;
+        border-radius: 8px;
+    }
+
+    .form-element {
+        width: 65vw;
+        margin: 5px 0;
+    }
+  } 
diff --git a/surprise.html b/surprise.html
@@ -72,6 +72,7 @@ <h2 class="subtitle">Trouve l'établissement qui te correspond le mieux</h2>
 
     <div class="search-results"><h2>Résultats</h2>
         <div class="results-elements">
+        <div class="form-button"><button class="simulateur-buttons" id="other-search-close-button">x</button></div>
 
             <div class="cards"></div>
 

diff --git a/surprise.js b/surprise.js
@@ -7,6 +7,7 @@ import shops  from './shops-infos.js';
 const results = document.querySelector('.search-results')
 const resultsButton = document.querySelector('#search-button')
 const closeButton = document.querySelector('#search-close-button')
+const otherCloseButton = document.querySelector('#other-search-close-button')
 const cardContainer = document.querySelector('.cards')
 
 resultsButton.addEventListener('click', function(){
@@ -47,7 +48,9 @@ resultsButton.addEventListener('click', function(){
 closeButton.addEventListener('click', function(){
     results.style.display = 'none'
 })
-
+otherCloseButton.addEventListener('click', function(){
+    results.style.display = 'none'
+})
 
 // BAD EXCUSES PART
 const characters = getCharacters()