style first part of recipe view

This commit is contained in:
Capelier-Marla 2023-01-26 17:47:00 +01:00
parent 5f739ecf77
commit 38eb7edf9b

View File

@ -353,6 +353,9 @@ main.search > article > section {
main.recipeView > article {
max-width: 600px;
display: flex;
flex-direction: column;
gap: var(--size-xl);
}
main.recipeView > article > img {
min-width: 100%;
@ -363,6 +366,37 @@ main.recipeView > article > img {
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
main.recipeView > article > section.infosRecette > header {
display: flex;
flex-direction: row;
border: none;
border-bottom: var(--border) var(--principal-neutral);
justify-content: space-between;
margin-bottom: var(--size-l);
align-items: baseline;
}
main.recipeView > article > section.infosRecette > header > h1 {
font-size: var(--size-max);
}
main.recipeView > article > section.infosRecette > header > p {
font-size: var(--size-l);
}
main.recipeView > article > section > h2 {
font-size: var(--size-xl);
border-bottom: var(--border) var(--principal-neutral);
margin-bottom: var(--size-l);
}
main.recipeView > article > section > :is(ul, ol) {
display: flex;
flex-direction: column;
gap: var(--size-s);
}
main.recipeView > article > section > :is(ul, ol) > li {
margin-left: var(--size-l);
}
main.recipeView > article > section > ul > li::marker {
content: "- ";
}
main.editRecipe {
min-width: 300px;