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;
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;
}

22
recette.php
View File

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