Maj responsive + fonction taille (reste à voir avec yannis ou l'insérer)

SwichGIT/src/css/tablet.css

@@ -2,7 +2,7 @@
 @media screen and (min-width: 669px) and (max-width: 992px) {
 
     :root{
-        --taille : 14vw;
+        --taille : 14vh;
     }
 
     .containform3 {
@@ -176,6 +176,15 @@
         z-index: 15;
     }
 
+    #choosedimension {
+        height: 7vw;
+        width: 50vw;
+        position: absolute;
+        left: 25vw;
+        top: 60vh;
+        z-index: 15;
+    }
+
     #conteneurmode{
         width: 80%;
         height: 80%;
@@ -214,6 +223,14 @@
         margin: 5% auto 0 auto;
     }
 
+    #textdimension {
+        font-family: Lucida Console, Arial Black, Arial;
+        font-size: 3vw;
+        color: #707070;
+        text-align:center;
+        margin: 5% auto 0 auto;
+    }
+
     .logoboutton{
         font-size: 2vw;    
         color: var(--lightprima);
@@ -252,11 +269,11 @@
         overflow-x: auto;
         display: flex;
         flex-wrap: wrap;
-        padding-top: 5vw;
+        padding-top: 2vw;
         justify-content: center;
-        width: 70vw;
+        width: 70vh;
         margin: 0 auto;
-        grid-row-gap: 2vw;
+        grid-row-gap: 0vw;
         column-gap: 2vw;
     }
 
@@ -278,8 +295,8 @@
     }
 
     .item-form {
-        width: 4vw;
+        width: 4vh;
-        height: 4vw;
+        height: 4vh;
         padding-left: 0.1vw;
         margin-top: 0.25vw;        
         border-radius: 10px;

SwichGIT/src/index.html

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>SwishGame</title>
     <link rel="stylesheet" href="css/base.css">
-    <link rel="stylesheet" href="css/phone.css">
     <link rel="stylesheet" href="css/tablet.css">
     <link rel="stylesheet" href="css/desktops.css">
     <link rel="stylesheet" href="css/PageDaccueil.css">

SwichGIT/src/js/main.js

@@ -17,6 +17,11 @@ var selectionDiemension = 0;
 
 var lesPoints = 0; //Points du Joueur1
 
+function majSizeCard(column){
+	var newTaille = column * 3.2 + 1;
+	document.documentElement.style.setProperty('--taille', newTaille + "vh");
+}
+
 function modePrec() {
 	if (selectionMode == 0) {
 		selectionMode = allMode.length - 1;