jjsalinas/licores-son-amores
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive styles update
Some checks failed
Deploy to GitHub Pages / build (push) Has been cancelled
Details
Deploy to GitHub Pages / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Jose Jimenez
2026-02-02 22:05:56 +01:00
parent 9ab8f18b3a
commit ce7f490cbb
10 changed files with 237 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/styles.css
View File

@@ -255,22 +255,70 @@ h2 {
.recipes-container {
min-height: 200px;
}
@media (max-width: 900px) {
.recipe-card {
display: flex;
flex-direction: column;
width: 100%;
background: linear-gradient(135deg, #fff 0%, #fff8f0 100%);
border-left: 5px solid var(--deep-red);
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
animation: recipeAppear 0.5s ease-out backwards;
}
.recipe-card {
display: flex;
flex-direction: row;
width: 100%;
background: linear-gradient(135deg, #fff 0%, #fff8f0 100%);
border-left: 5px solid var(--deep-red);
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
animation: recipeAppear 0.5s ease-out backwards;
.recipe-content {
width: 100%;
}
.recipe-img {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
min-width: 30%;
margin-top: 0.5rem;
}
.recipe-img img {
width: 50%;
height: 100%;
object-fit: contain;
display: block;
}
}
.recipe-content {
width: 70%;
@media (min-width: 901px) {
.recipe-card {
display: flex;
flex-direction: row;
width: 100%;
background: linear-gradient(135deg, #fff 0%, #fff8f0 100%);
border-left: 5px solid var(--deep-red);
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
animation: recipeAppear 0.5s ease-out backwards;
}
.recipe-content {
width: 70%;
}
.recipe-img {
width: 30%;
min-width: 30%;
max-width: 30%;
margin-left: 0.5rem;
}
.recipe-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
}
.recipe-card:nth-child(1) {
@@ -371,20 +419,6 @@ h2 {
font-style: italic;
}
.recipe-img {
width: 30%;
min-width: 30%;
max-width: 30%;
margin-left: 0.5rem;
}
.recipe-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.loading {
text-align: center;
padding: 2rem;