Modifs taille écran : OK

CSS/etrange_decouverte.css

@@ -16,15 +16,16 @@ body {
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
-        flex: 1;
+        height:15vh;
         z-index:0;
     }
         h1 {
-            font-size: 4vw;
+            font-size: min(4vw,7vh);
             margin-bottom:0.5vw;
         }
 
         header a {
+            font-size: min(1vw,1.7vh);
             text-decoration: none;
             color: #494949;
         }
@@ -35,7 +36,7 @@ body {
 
     #main {
         display: flex;
-        flex: 4;
+        height:65vh;
     }
 
         #content {
@@ -48,7 +49,7 @@ body {
             #text {
                 margin-top:4vh;
                 font-family: 'Special Elite', cursive;
-                font-size: 1.8vw;
+                font-size: min(1.8vw,3.6vh);
                 text-align: center;
                 color: white;
                 cursor:default;
@@ -90,7 +91,7 @@ body {
                     color:#086CA5;
                     font-weight: bold;
                     text-align: center;
-                    font-size: 1.8vw;
+                    font-size: min(1.8vw,3.6vh);
                     font-family: 'Special Elite', cursive;
                     background:black;
                     border:none;
@@ -99,9 +100,9 @@ body {
                     background: transparent;
                     background-image: url("../Images/Arrow.png");
                     background-repeat: no-repeat;
-                    background-size:1vw;
+                    background-size:min(1vw,1.7vh);
                     background-position-x: 0vw;
-                    background-position-y: 1vh;
+                    background-position-y: min(0.4 vw,1vh);
                     padding-left:1.2vw;
                 }
 
@@ -154,14 +155,16 @@ body {
                 outline: none;
                 border:0.2vw solid #b9b9b9;
                 border-radius: 4vw;
-                min-width: 15vw;
+                width:20vw;
-                width :20vw;
                 padding: 1vw 1.2vw 1vw 1.2vw;
                 color: black;
                 font-family: 'Special Elite', cursive;
                 font-size: 1.5vw;
                 background-image: linear-gradient(to top, black -50%, #BF0909 80%);
                 cursor : pointer;
+                display: flex;
+                justify-content: center;
+                align-items: center;
             }
 
             .button:hover {
@@ -173,8 +176,18 @@ body {
                 background-image: linear-gradient(to top, #BF0909 20%, black 150%);
             }
 
+            #link{
+                text-decoration:none;
+                padding:0;
+                
+            }
+
+            #link:hover{
+                text-decoration:none;
+            }
+
             footer{
-                flex:0.5;
+                height:15vh;
                 display:flex;
                 flex-direction: column;
                 justify-content:flex-end;

HTML/etrange_decouverte.html

@@ -25,7 +25,7 @@
             <article id="text">
                 <p class="phrase" id="p1">Il est 21h30. Nous sommes en décembre.</p>
                 <p class="phrase">La nuit est tombée depuis bien longtemps.</p>
-                <p class="phrase">La Lune éclaire la pelouse du R1 alors que vous sortez tout juste de votre réunion du Pôle Huma.</p>
+                <p class="phrase">La Lune éclaire la pelouse du R1 alors que vous <br/> sortez tout juste de votre réunion du Pôle Huma.</p>
                 <p class="phrase" id="select" >Vous ressentez l'envie d'un petit <br/>
                 <select id="boisson">
                     <option selected>...</option>
@@ -38,16 +38,16 @@
                 pour réviser la Thermo.</p>
                 <p class="phrase">Votre écocup rempli de <span class="mot" id="selectedDrink"></span>,</p> 
                 <p class="phrase">vous apercevez un étudiant qui se dirige tout droit 
-                <p class="phrase">vers le sous sol !</p> 
+                <p class="phrase">vers le sous-sol !</p> 
                 <p class="phrase">Bizarre à cette heure...</p>
                 <div id="arrowBlock">
-                    <p id="space">Press space</p>
+                    <p id="space">Press enter</p>
                     <img id="arrow" src="../Images/Lecture.png" alt="Texte suivant"/>
                 </div>
             </article>
             <div id="buttons">
                 <button id="safeButton" class="button">Aller dormir, ça fait trop peur</button>
-                <button id="riskyButton" class="button">Le suivre</button>
+                <a id="link" class="button" href="./discretion.html">Le suivre</a>
             </div>
         </section>
     </main>