commit

main.css

@@ -90,8 +90,8 @@ body {
     overflow: auto;
     flex: 1;
     background-clip: border-box;
-    padding-right: 5%;
-    padding-left: 5%;
+    padding-right: 2%;
+    padding-left: 2%;
 }
 
 /* content : le cadre de base du centre de notre site
@@ -110,12 +110,27 @@ body {
     représente le contenue centrale de la page.
 */
 .recettes {
-    --UneVariable: calc( 100vw / 500 );
     display: grid;
-    grid-template-columns: repeat(var(--UneVariable), 1fr);
+    grid-template-columns: repeat(3, 1fr);
     grid-gap: 10px;
-    grid-auto-rows: minmax(300px, auto);
-    grid-auto-columns: auto;
+    /* grid-auto-rows: minmax(300px, auto);
+    grid-auto-columns: auto;*/
+}
+
+@media screen and (max-width : 1200px) {
+    .recettes {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media screen and (max-width : 600px) {
+    .recettes {
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    .sidebar {
+        display: none;
+    }
 }
 
 /* Classe recette icone :
@@ -128,12 +143,12 @@ body {
     padding: 15px;
     vertical-align: middle;
     box-shadow: 3px 5px 5px black;
-    width: 500px;
+    max-width: 400px;
 }
 
 .recette-preview-image{
-    max-width: calc( 10vh + 10vw );
-    max-height: calc( 10vh + 10vw );
+    max-width: calc( 5vh + 5vw );
+    max-height: calc( 5vh + 5vw );
     border: 1px solid rgb(252, 223, 57);
     border-radius: 25px;
 }