Benjamin/LesRecettesDePapis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
Lycano
2026-03-20 15:11:41 +01:00
parent b45ef1281a
commit 867134a3e5
2 changed files with 34 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
main.css
View File

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

22
recette.php
View File

@@ -1,15 +1,13 @@
<div class="recettes"> <div class="recettes">
<a href="recette-en-dur.php"> <a class="recette-icone" href="recette-en-dur.php">
<div class="recette-icone"> <img class="recette-preview-image" src="random-recette.jpg">
<img class="recette-preview-image" src="random-recette.jpg">
</div>
</a> </a>
<div class="recette-icone"> 2 </div> <a class="recette-icone" href="recette-en-dur.php"> 2 </a>
<div class="recette-icone"> 3 </div> <a class="recette-icone" href="recette-en-dur.php"> 3 </a>
<div class="recette-icone"> 4 </div> <a class="recette-icone" href="recette-en-dur.php"> 4 </a>
<div class="recette-icone"> 5 </div> <a class="recette-icone" href="recette-en-dur.php"> 5 </a>
<div class="recette-icone"> 6 </div> <a class="recette-icone" href="recette-en-dur.php"> 6 </a>
<div class="recette-icone"> 7 </div> <a class="recette-icone" href="recette-en-dur.php"> 7 </a>
<div class="recette-icone"> 8 </div> <a class="recette-icone" href="recette-en-dur.php"> 8 </a>
<div class="recette-icone"> 9 </div> <a class="recette-icone" href="recette-en-dur.php"> 9 </a>
</div> </div>