From 6b590330b5dc54cd6dfa60721d90c8decb87f0c3 Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Wed, 25 Jan 2023 15:55:34 +0100 Subject: [PATCH 1/7] setted style for aside part (categories) --- static/style.css | 58 +++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 53 insertions(+), 5 deletions(-) diff --git a/static/style.css b/static/style.css index 88370c3..d0b08cd 100644 --- a/static/style.css +++ b/static/style.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800&display=swap'); :root { font-family: 'Nunito', 'Arial'; @@ -6,7 +6,7 @@ /*--principal-pastel: hsl(341, 100%, 95%);*/ /*--principal-brightest: hsl(341, 85%, 89%);*/ /*--principal-light: hsl(342, 95%, 79%);*/ - --principal-neurtal: hsl(341, 94%, 65%); + --principal-neutral: hsl(341, 94%, 65%); /*--principal-dark: hsl(342, 72%, 49%);*/ /*--principal-darker: hsl(342, 62%, 37%);*/ /*--principal-darkest: hsl(342, 78%, 19%);*/ @@ -14,7 +14,7 @@ --secondary-pastel: hsl(30, 33%, 98%); /*--secondary-brightest: hsl(29, 56%, 91%);*/ /*--secondary-light: hsl(30, 59%, 83%);*/ - /*--secondary-neurtal: hsl(31, 54%, 69%);*/ + /*--secondary-neutral: hsl(31, 54%, 69%);*/ /*--secondary-dark: hsl(30, 66%, 63%);*/ /*--secondary-darker: hsl(30, 46%, 46%);*/ /*--secondary-darkest: hsl(30, 64%, 29%);*/ @@ -42,6 +42,9 @@ body { background: var(--secondary-pastel); + display: flex; + flex-direction: column; + overflow-x: hidden; } body > header { @@ -75,7 +78,7 @@ body > header > nav > ul > li::marker { content: none; } body > header > nav > ul > li { - background: var(--principal-neurtal); + background: var(--principal-neutral); border-radius: var(--border-radius); height: 100%; padding-left: var(--size-l); @@ -103,13 +106,58 @@ body > header > nav > ul > li:first-child > a > img { height: var(--size-max); } body > header > nav > ul > li:last-child { - border: var(--border) var(--principal-neurtal); + border: var(--border) var(--principal-neutral); background: none; } body > header > nav > ul > li:last-child > a > img { height: calc(var(--size-max) - var(--size-xl)); } +main:has(aside) { + display: flex; + flex-direction: row; + justify-content: center; + gap: var(--size-max); + margin-top: var(--size-xl); + width: 100vw; +} + +aside { + background: var(--secondary-pastel); + border-radius: var(--border-radius); + padding: var(--size-xl); + padding-left: calc(var(--size-xl) * 1.5); + box-shadow: var(--shadow); + height: fit-content; +} +aside ul { + display: flex; + flex-direction: column; + gap: var(--size-s); +} +aside li:has(h3)::marker{ + content: none; +} +aside li h3 { + font-size: var(--size-xl); + font-weight: 700; + color: var(--principal-neutral); + margin-bottom: var(--size-m); +} +aside a { + color: black; + text-decoration: none; +} +aside a:hover { + text-decoration: underline; +} + +body > main > article > section > h1 { + font-size: var(--size-xl); + width: 100%; + border-bottom: var(--border) var(--principal-neutral); + margin-bottom: var(--size-xl); +} footer { display: flex; From ca47bf6c6226b4dff5d725f13ab27cd3ee57b57a Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Wed, 25 Jan 2023 16:18:05 +0100 Subject: [PATCH 2/7] moved category list in main and main content in article --- Views/category/view.php | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/Views/category/view.php b/Views/category/view.php index d9623e5..7ab8720 100644 --- a/Views/category/view.php +++ b/Views/category/view.php @@ -8,23 +8,22 @@ $allCategory = array( "Sans lactose" => "sans_lactose"); ?> - -
- $recipes) { - echo '
-

'.$categoryName.'

-
    '; - foreach ($recipes as $recipe) { - echo '
  • '; - View::show("common/recipe", $recipe); - echo '
    • '; - } - echo '
-
'; - } - ?> + +
+ $recipes) { + echo '
+

'.$categoryName.'

+
    '; + foreach ($recipes as $recipe) { + echo '
  • '; + View::show("common/recipe", $recipe); + echo '
    • '; + } + echo '
+
'; + } + ?> +
From 9e067464c888453ec0793b28a6baa539e3448754 Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Wed, 25 Jan 2023 16:20:58 +0100 Subject: [PATCH 3/7] putted each recipe in ul-li --- Views/home/view.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Views/home/view.php b/Views/home/view.php index 7e2f6ab..79982bc 100644 --- a/Views/home/view.php +++ b/Views/home/view.php @@ -8,7 +8,9 @@

Nos idées recettes:

'; View::show("common/recipe", array("RECIPE" => $O_recipe)); + echo ''; } ?> From ad4352fae5a1be4b336508bd1bfa09fc48af7956 Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Wed, 25 Jan 2023 17:04:14 +0100 Subject: [PATCH 4/7] added class to recipe --- Views/common/recipe.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Views/common/recipe.php b/Views/common/recipe.php index b90cb9b..21b7575 100644 --- a/Views/common/recipe.php +++ b/Views/common/recipe.php @@ -1,7 +1,7 @@ - + <?= $O_recipe->S_NAME ?>

S_NAME ?>

From b96c3c6a4ee7d1a8bd1f14335b8ec095f4893b4f Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Wed, 25 Jan 2023 17:07:15 +0100 Subject: [PATCH 5/7] putted li into ul --- Views/home/view.php | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/Views/home/view.php b/Views/home/view.php index 79982bc..5f4d55e 100644 --- a/Views/home/view.php +++ b/Views/home/view.php @@ -6,13 +6,15 @@

Nos idées recettes:

- '; - View::show("common/recipe", array("RECIPE" => $O_recipe)); - echo ''; - } - ?> +
    + '; + View::show("common/recipe", array("RECIPE" => $O_recipe)); + echo ''; + } + ?> +
From aaac7f2f84b5adf1cf25a22afb63b5e705ddf898 Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Wed, 25 Jan 2023 19:17:02 +0100 Subject: [PATCH 6/7] added recipe style (maybe not finished) --- static/style.css | 37 ++++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/static/style.css b/static/style.css index d0b08cd..adc17d2 100644 --- a/static/style.css +++ b/static/style.css @@ -120,6 +120,7 @@ main:has(aside) { gap: var(--size-max); margin-top: var(--size-xl); width: 100vw; + margin-left: var(--size-xl); } aside { @@ -129,6 +130,7 @@ aside { padding-left: calc(var(--size-xl) * 1.5); box-shadow: var(--shadow); height: fit-content; + min-width: fit-content; } aside ul { display: flex; @@ -154,11 +156,44 @@ aside a:hover { body > main > article > section > h1 { font-size: var(--size-xl); - width: 100%; border-bottom: var(--border) var(--principal-neutral); margin-bottom: var(--size-xl); } +body > main > article > section > ul { + display: flex; + flex-direction: row; + gap: var(--size-l); + flex-wrap: wrap; +} + +body > main > article > section > ul > li { + width: fit-content; + max-width: 250px; +} + +body > main > article > section > ul > li::marker { + content: none; +} + +.recipe { + background: var(--secondary-pastel); + border-radius: var(--border-radius); + box-shadow: var(--shadow); + display: flex; + flex-direction: column; + color: black; + text-decoration: none; +} +.recipe > section { + display: flex; + flex-direction: row; + align-items: baseline; + justify-content: space-between; + gap: var(--size-l); + padding: var(--size-m); +} + footer { display: flex; flex-direction: column; From cf074988cc39535fd201162991b8fb4a5661ad33 Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Wed, 25 Jan 2023 19:20:59 +0100 Subject: [PATCH 7/7] sticky ctagory section --- static/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/static/style.css b/static/style.css index adc17d2..40360c4 100644 --- a/static/style.css +++ b/static/style.css @@ -131,6 +131,8 @@ aside { box-shadow: var(--shadow); height: fit-content; min-width: fit-content; + position: sticky; + top: calc(var(--size-xl) * 4); } aside ul { display: flex;