From a193a1652dc1ec5977e6d478e527aca673a23cde Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Mon, 23 Jan 2023 15:38:11 +0100 Subject: [PATCH 1/7] added style in head of html and setted global font --- Views/html.php | 3 ++- static/style.css | 5 +++++ 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 static/style.css diff --git a/Views/html.php b/Views/html.php index 6f8891d..e69d460 100644 --- a/Views/html.php +++ b/Views/html.php @@ -3,10 +3,11 @@ My sweet MVC + - \ No newline at end of file + diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..26e49ec --- /dev/null +++ b/static/style.css @@ -0,0 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400&display=swap'); + +* { + font-family: 'Nunito', 'Arial'; +} From 30e11af260c39841f81978347594ee8c299478d1 Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Tue, 24 Jan 2023 00:15:23 +0100 Subject: [PATCH 2/7] created css vars (maybe forgot a few ones) --- static/style.css | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/static/style.css b/static/style.css index 26e49ec..a11013e 100644 --- a/static/style.css +++ b/static/style.css @@ -1,5 +1,34 @@ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400&display=swap'); -* { +:root { font-family: 'Nunito', 'Arial'; + /* vars */ + --color-1-1: hsl(341, 100%, 95%); + --color-1-2: hsl(341, 75%, 89%); + --color-1-3: hsl(342, 82%, 79%); + --color-1-4: hsl(342, 74%, 64%); + --color-1-5: hsl(342, 62%, 49%); + --color-1-6: hsl(342, 72%, 37%); + --color-1-7: hsl(342, 66%, 31%); + --color-1-8: hsl(342, 78%, 19%); + + --color-2-1: hsl(30, 33%, 98%); + --color-2-2: hsl(29, 56%, 91%); + --color-2-3: hsl(30, 59%, 83%); + --color-2-4: hsl(31, 54%, 69%); + --color-2-5: hsl(30, 66%, 63%); + --color-2-6: hsl(30, 46%, 46%); + --color-2-7: hsl(30, 64%, 29%); + + --size-xs: 2px; + --size-s: 4px; + --size-m: 12px; + --size-l: 24px; + --size-xl: 48px; + + --border-radius: var(--size-m); + --border: solid var(--size-xs); /* don't forget to choose a color after */ + + --shadow-1: 2px 2px 12px -2px rgba(0,0,0,0.5); + --shadow-2: 2px 2px 4px 2px rgba(0,0,0,0.6); } From 94ca8a2798cd214b73929e1a6d0a148bb8315714 Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Tue, 24 Jan 2023 15:43:17 +0100 Subject: [PATCH 3/7] defined header css style, renamed some css vars (wi ll redefine some latr), edited default profil svg to use a file instead of hard code --- Views/common/header.php | 2 +- Views/home/view.php | 2 - static/img/defaultProfil.svg | 4 +- static/style.css | 95 ++++++++++++++++++++++++++++++------ 4 files changed, 84 insertions(+), 19 deletions(-) diff --git a/Views/common/header.php b/Views/common/header.php index a1381c3..cf0b9d9 100644 --- a/Views/common/header.php +++ b/Views/common/header.php @@ -4,7 +4,7 @@ $array_header = array( "Recette" => "/Recipe/view/36", "+" => "/recipe/edit", "Rechercher" => "rechercher", - '' => "/user/view" + '' => "/user/view" ); ?>
diff --git a/Views/home/view.php b/Views/home/view.php index ce83fb7..de142bb 100644 --- a/Views/home/view.php +++ b/Views/home/view.php @@ -12,5 +12,3 @@ ?> - - diff --git a/static/img/defaultProfil.svg b/static/img/defaultProfil.svg index 738a36e..2aae757 100644 --- a/static/img/defaultProfil.svg +++ b/static/img/defaultProfil.svg @@ -1 +1,3 @@ - + + + diff --git a/static/style.css b/static/style.css index a11013e..53cbfa6 100644 --- a/static/style.css +++ b/static/style.css @@ -1,14 +1,14 @@ -@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600&display=swap'); :root { font-family: 'Nunito', 'Arial'; /* vars */ --color-1-1: hsl(341, 100%, 95%); - --color-1-2: hsl(341, 75%, 89%); - --color-1-3: hsl(342, 82%, 79%); - --color-1-4: hsl(342, 74%, 64%); - --color-1-5: hsl(342, 62%, 49%); - --color-1-6: hsl(342, 72%, 37%); + --color-1-2: hsl(341, 85%, 89%); + --color-1-3: hsl(342, 95%, 79%); + --color-1-4: hsl(341, 94%, 65%); + --color-1-5: hsl(342, 72%, 49%); + --color-1-6: hsl(342, 62%, 37%); --color-1-7: hsl(342, 66%, 31%); --color-1-8: hsl(342, 78%, 19%); @@ -20,15 +20,80 @@ --color-2-6: hsl(30, 46%, 46%); --color-2-7: hsl(30, 64%, 29%); - --size-xs: 2px; - --size-s: 4px; - --size-m: 12px; - --size-l: 24px; - --size-xl: 48px; + --size-1: 2px; + --size-2: 4px; + --size-3: 8px; + --size-4: 12px; + --size-5: 24px; + --size-6: 48px; - --border-radius: var(--size-m); - --border: solid var(--size-xs); /* don't forget to choose a color after */ + --border-radius: var(--size-4); + --border: solid var(--size-1); /* don't forget to choose a color after */ - --shadow-1: 2px 2px 12px -2px rgba(0,0,0,0.5); - --shadow-2: 2px 2px 4px 2px rgba(0,0,0,0.6); + --shadow: 2px 2px 18px -2px rgba(0,0,0,0.4), 2px 2px 4px 2px rgba(0,0,0,0.3); +} + +* { + margin: 0; + padding: 0; +} + +body > header { + height: var(--size-6); + box-shadow: var(--shadow); + padding: var(--size-3); + font-size: var(--size-5); + background: var(--color-2-1); +} + +body > header > nav { + height: 100%; +} + +body > header > nav > ul { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + gap: var(--size-3); + height: 100%; +} + +body > header > nav > ul > li::marker { + content: none; +} +body > header > nav > ul > li { + background: var(--color-1-4); + border-radius: var(--border-radius); + height: 100%; + padding-left: var(--size-4); + padding-right: var(--size-4); +} +body > header > nav > ul > li:first-child { + background: none; + border-radius: none; + flex: 1; +} + +body > header > nav > ul > li { + display: flex; + align-items: center; /* aligns the contents of the element vertically */ + height: 100%; /* sets the height of the element to 100% of the parent
  • element */ +} + +body > header > nav > ul > li > a { + color: var(--color-2-1); + font-weight: 600; + text-decoration: none; +} + +body > header > nav > ul > li:first-child > a > img { + height: var(--size-6); +} +body > header > nav > ul > li:last-child { + border: var(--border) var(--color-1-4); + background: none; +} +body > header > nav > ul > li:last-child > a > img { + height: calc(var(--size-6) - var(--size-5)); } From 5cac66c8644339db514bd268d4d541dbf4edbfec Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Tue, 24 Jan 2023 15:51:02 +0100 Subject: [PATCH 4/7] added footer style with it's grey color, + body background color --- static/style.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/static/style.css b/static/style.css index 53cbfa6..72a44a5 100644 --- a/static/style.css +++ b/static/style.css @@ -20,6 +20,8 @@ --color-2-6: hsl(30, 46%, 46%); --color-2-7: hsl(30, 64%, 29%); + --color-g-1: hsl(340, 2%, 63%); + --size-1: 2px; --size-2: 4px; --size-3: 8px; @@ -38,6 +40,10 @@ padding: 0; } +body { + background: var(--color-2-1); +} + body > header { height: var(--size-6); box-shadow: var(--shadow); @@ -97,3 +103,17 @@ body > header > nav > ul > li:last-child { body > header > nav > ul > li:last-child > a > img { height: calc(var(--size-6) - var(--size-5)); } + + +footer { + display: flex; + flex-direction: column; + gap: var(--size-6); + justify-content: center; + align-items: center; + height: 200px; + width: 100vw; + background: var(--color-g-1); + color: var(--color-2-1); + font-size: var(--size-5); +} From 06aba6e4b4bba63d57442ae62ca32ea90269856f Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Tue, 24 Jan 2023 16:01:39 +0100 Subject: [PATCH 5/7] renamed css vars --- static/style.css | 45 ++++++++++++++++++++++----------------------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/static/style.css b/static/style.css index 72a44a5..55ab37a 100644 --- a/static/style.css +++ b/static/style.css @@ -3,24 +3,23 @@ :root { font-family: 'Nunito', 'Arial'; /* vars */ - --color-1-1: hsl(341, 100%, 95%); - --color-1-2: hsl(341, 85%, 89%); - --color-1-3: hsl(342, 95%, 79%); - --color-1-4: hsl(341, 94%, 65%); - --color-1-5: hsl(342, 72%, 49%); - --color-1-6: hsl(342, 62%, 37%); - --color-1-7: hsl(342, 66%, 31%); - --color-1-8: hsl(342, 78%, 19%); + /*--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-dark: hsl(342, 72%, 49%);*/ + /*--principal-darker: hsl(342, 62%, 37%);*/ + /*--principal-darkest: hsl(342, 78%, 19%);*/ - --color-2-1: hsl(30, 33%, 98%); - --color-2-2: hsl(29, 56%, 91%); - --color-2-3: hsl(30, 59%, 83%); - --color-2-4: hsl(31, 54%, 69%); - --color-2-5: hsl(30, 66%, 63%); - --color-2-6: hsl(30, 46%, 46%); - --color-2-7: hsl(30, 64%, 29%); + --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-dark: hsl(30, 66%, 63%);*/ + /*--secondary-darker: hsl(30, 46%, 46%);*/ + /*--secondary-darkest: hsl(30, 64%, 29%);*/ - --color-g-1: hsl(340, 2%, 63%); + --grey-dark: hsl(340, 2%, 63%); --size-1: 2px; --size-2: 4px; @@ -41,7 +40,7 @@ } body { - background: var(--color-2-1); + background: var(--secondary-pastel); } body > header { @@ -49,7 +48,7 @@ body > header { box-shadow: var(--shadow); padding: var(--size-3); font-size: var(--size-5); - background: var(--color-2-1); + background: var(--secondary-pastel); } body > header > nav { @@ -69,7 +68,7 @@ body > header > nav > ul > li::marker { content: none; } body > header > nav > ul > li { - background: var(--color-1-4); + background: var(--principal-neurtal); border-radius: var(--border-radius); height: 100%; padding-left: var(--size-4); @@ -88,7 +87,7 @@ body > header > nav > ul > li { } body > header > nav > ul > li > a { - color: var(--color-2-1); + color: var(--secondary-pastel); font-weight: 600; text-decoration: none; } @@ -97,7 +96,7 @@ body > header > nav > ul > li:first-child > a > img { height: var(--size-6); } body > header > nav > ul > li:last-child { - border: var(--border) var(--color-1-4); + border: var(--border) var(--principal-neurtal); background: none; } body > header > nav > ul > li:last-child > a > img { @@ -113,7 +112,7 @@ footer { align-items: center; height: 200px; width: 100vw; - background: var(--color-g-1); - color: var(--color-2-1); + background: var(--grey-dark); + color: var(--secondary-pastel); font-size: var(--size-5); } From 1449a37d7a321e29d3fb3895209e49bd853c7711 Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Tue, 24 Jan 2023 16:06:44 +0100 Subject: [PATCH 6/7] changed size values and names --- static/style.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/static/style.css b/static/style.css index 55ab37a..a74d3a8 100644 --- a/static/style.css +++ b/static/style.css @@ -21,12 +21,13 @@ --grey-dark: hsl(340, 2%, 63%); - --size-1: 2px; - --size-2: 4px; - --size-3: 8px; - --size-4: 12px; - --size-5: 24px; - --size-6: 48px; + --size-0: 1px; + --size-1: 3px; + --size-2: 5px; + --size-3: 10px; + --size-4: 16px; + --size-5: 26px; + --size-6: 52px; --border-radius: var(--size-4); --border: solid var(--size-1); /* don't forget to choose a color after */ From b5015ecc86e98ae7f9938f19a798cbdc96c741d7 Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Tue, 24 Jan 2023 16:23:08 +0100 Subject: [PATCH 7/7] made footer stick to the bottom --- Views/errors/404.php | 8 +++++--- static/style.css | 44 +++++++++++++++++++++++++------------------- 2 files changed, 30 insertions(+), 22 deletions(-) diff --git a/Views/errors/404.php b/Views/errors/404.php index 6498186..40781bc 100644 --- a/Views/errors/404.php +++ b/Views/errors/404.php @@ -1,3 +1,5 @@ -

    Error 404

    -

    La page n'a pas été trouvée 😥

    -    Retourner à l'accueil +
    +

    Error 404

    +

    La page n'a pas été trouvée 😥

    +     Retourner à l'accueil +
    diff --git a/static/style.css b/static/style.css index a74d3a8..88370c3 100644 --- a/static/style.css +++ b/static/style.css @@ -21,16 +21,16 @@ --grey-dark: hsl(340, 2%, 63%); - --size-0: 1px; - --size-1: 3px; - --size-2: 5px; - --size-3: 10px; - --size-4: 16px; - --size-5: 26px; - --size-6: 52px; + --size-1: 1px; + --size-xs: 3px; + --size-s: 5px; + --size-m: 10px; + --size-l: 16px; + --size-xl: 26px; + --size-max: 52px; - --border-radius: var(--size-4); - --border: solid var(--size-1); /* don't forget to choose a color after */ + --border-radius: var(--size-l); + --border: solid var(--size-xs); /* don't forget to choose a color after */ --shadow: 2px 2px 18px -2px rgba(0,0,0,0.4), 2px 2px 4px 2px rgba(0,0,0,0.3); } @@ -45,11 +45,17 @@ body { } body > header { - height: var(--size-6); + height: var(--size-max); box-shadow: var(--shadow); - padding: var(--size-3); - font-size: var(--size-5); + padding: var(--size-m); + font-size: var(--size-xl); background: var(--secondary-pastel); + position: sticky; + top: 0; +} + +body > main { + min-height: calc(100vh - 200px - var(--size-max) - 2*var(--size-m)); } body > header > nav { @@ -61,7 +67,7 @@ body > header > nav > ul { flex-direction: row; justify-content: space-between; align-items: center; - gap: var(--size-3); + gap: var(--size-m); height: 100%; } @@ -72,8 +78,8 @@ body > header > nav > ul > li { background: var(--principal-neurtal); border-radius: var(--border-radius); height: 100%; - padding-left: var(--size-4); - padding-right: var(--size-4); + padding-left: var(--size-l); + padding-right: var(--size-l); } body > header > nav > ul > li:first-child { background: none; @@ -94,26 +100,26 @@ body > header > nav > ul > li > a { } body > header > nav > ul > li:first-child > a > img { - height: var(--size-6); + height: var(--size-max); } body > header > nav > ul > li:last-child { border: var(--border) var(--principal-neurtal); background: none; } body > header > nav > ul > li:last-child > a > img { - height: calc(var(--size-6) - var(--size-5)); + height: calc(var(--size-max) - var(--size-xl)); } footer { display: flex; flex-direction: column; - gap: var(--size-6); + gap: var(--size-max); justify-content: center; align-items: center; height: 200px; width: 100vw; background: var(--grey-dark); color: var(--secondary-pastel); - font-size: var(--size-5); + font-size: var(--size-xl); }