diff --git a/src/pages/recipe/Recipe.tsx b/src/pages/recipe/Recipe.tsx index df0b147..c3c38f6 100644 --- a/src/pages/recipe/Recipe.tsx +++ b/src/pages/recipe/Recipe.tsx @@ -13,15 +13,17 @@ const Recipe = ({ recipe, imgUrl }: RecipeProps) => { return (
+
+
+

{recipe.title}

+ +
+
+ + +
+
-
-

{recipe.title}

- -
-
- - -
diff --git a/src/pages/recipe/recipe.module.css b/src/pages/recipe/recipe.module.css index d41c4aa..52c4eb3 100644 --- a/src/pages/recipe/recipe.module.css +++ b/src/pages/recipe/recipe.module.css @@ -1,19 +1,30 @@ .full-recipe-container { display: flex; flex-direction: column; - align-items: center; - max-width: 100%; } .full-recipe { - max-width: 600px; + max-width: 80ch; + display: flex; + flex-direction: column; + gap: 15px; } -.full-recipe .main-image { - width: 100%; +.info { + display: flex; + flex-direction: column; + gap: 5px; } -.full-recipe .info-row { +.info-row { display: flex; justify-content: space-between; } + +.recipe-title { + margin-block: 0.5em; +} + +.main-image { + width: 100%; +}