From 94ca8a2798cd214b73929e1a6d0a148bb8315714 Mon Sep 17 00:00:00 2001 From: Capelier-Marla Date: Tue, 24 Jan 2023 15:43:17 +0100 Subject: [PATCH] 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)); }