diff --git a/SwichGIT/src/css/base.css b/SwichGIT/src/css/base.css index b9c88f5..3b38ad5 100644 --- a/SwichGIT/src/css/base.css +++ b/SwichGIT/src/css/base.css @@ -20,7 +20,6 @@ --colorsix : #E6792F;/*HOCTO*/ /*Tailles cartes*/ - --tailleTablette : 12vw; --taille: 10vw; /*Les formes*/ --u: calc(var(--x) / 2.75); diff --git a/SwichGIT/src/css/phone.css b/SwichGIT/src/css/phone.css index 2418cd2..7d9a47b 100644 --- a/SwichGIT/src/css/phone.css +++ b/SwichGIT/src/css/phone.css @@ -1,6 +1,109 @@ -/*Demi Ecran*/ -@media screen and (max-width: 768px) { - body{ - background-color: green; +@media screen and (max-width: 880px) { + .flex-item { + flex-grow: 1; + background: var(--lightsedonca); + width: 14vw; + border-radius: 0.75vw; + padding-right: 0.15vw; + padding-left: 0.15vw; + padding-bottom: 0.25vw; + list-style: none; + display: flex; + margin-right: 0.4vw; + margin-left: 0.4vw; + margin-bottom: 1vw; + -webkit-flex-flow: row wrap; + justify-content: space-around; + } + + +} + +@media screen and (max-width: 855px) { + .flex-item { + flex-grow: 1; + background: var(--lightsedonca); + width: 15vw; + border-radius: 0.75vw; + padding-right: 0.15vw; + padding-left: 0.15vw; + padding-bottom: 0.25vw; + list-style: none; + display: flex; + margin-right: 0.4vw; + margin-left: 0.4vw; + margin-bottom: 1vw; + -webkit-flex-flow: row wrap; + justify-content: space-around; + } +} + +@media screen and (max-width: 680px) { + .flex-item { + flex-grow: 1; + background: var(--lightsedonca); + width: 19vw; + border-radius: 0.75vw; + padding-right: 0.15vw; + padding-left: 0.15vw; + padding-bottom: 0.25vw; + list-style: none; + display: flex; + margin-right: 0.4vw; + margin-left: 0.4vw; + margin-bottom: 1vw; + -webkit-flex-flow: row wrap; + justify-content: space-around; + } +} + + +@media screen and (max-width: 545px) { + .flex-item { + flex-grow: 1; + background: var(--lightsedonca); + width: 23vw; + border-radius: 0.75vw; + padding-right: 0.15vw; + padding-left: 0.15vw; + padding-bottom: 0.25vw; + list-style: none; + display: flex; + margin-right: 0.4vw; + margin-left: 0.4vw; + margin-bottom: 1vw; + -webkit-flex-flow: row wrap; + justify-content: space-around; + } +} + +@media screen and (max-width: 510px) { + .item-form { + width: 3vh; + padding-left: 0.1vw; + margin-top: 0.25vw; + height: 3vh; + border-radius: 10px; + display: table-cell; + position: relative; + vertical-align: middle; + background-color: var(--lighttercia); + } + + .flex-item { + flex-grow: 1; + background: var(--lightsedonca); + width: 17vw; + border-radius: 0.75vw; + padding-right: 0.15vw; + padding-left: 0.15vw; + padding-bottom: 0.25vw; + list-style: none; + display: flex; + margin-right: 0.4vw; + margin-left: 0.4vw; + margin-bottom: 1vw; + -webkit-flex-flow: row wrap; + justify-content: space-around; } } diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html index 002917b..c84e142 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -12,6 +12,7 @@ + diff --git a/SwichGIT/src/js/main.js b/SwichGIT/src/js/main.js index 9fc3122..04df59b 100644 --- a/SwichGIT/src/js/main.js +++ b/SwichGIT/src/js/main.js @@ -25,8 +25,8 @@ var offreSWISH = false; var lesPoints = 0; //Points du Joueur1 function majSizeCard(column) { - var newTailleOrdi = column * 3.2 + 1; - var newTailleTablette = newTailleOrdi + 2; + var newTailleOrdi = column * 3.3 + 1; + var newTailleTablette = newTailleOrdi * 1.2; document.documentElement.style.setProperty('--taille', newTailleOrdi + "vw"); document.documentElement.style.setProperty('--tailleTablette', newTailleTablette + "vw"); }