Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

recipes: two-column card grid on mobile, compact card sizing

Browse Source
This commit is contained in:
Alexander Bocken
2026-02-17 16:11:48 +01:00
parent 5d2933be98
commit d8f8aec282
2 changed files with 35 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+11 -4
View File
@@ -361,15 +361,22 @@ a:focus-visible {
.recipe-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5em;
padding: 0 1.5em;
grid-template-columns: repeat(2, 1fr);
gap: 0.8em;
padding: 0 0.8em;
max-width: 1400px;
margin: 0 auto 2em;
}
@media (max-width: 250px) {
.recipe-grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 600px) {
.recipe-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5em;
padding: 0 1.5em;
}
}
@media (min-width: 1024px) {