DjalimSimaila/MVC_Recettes
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

defined header css style, renamed some css vars (wi

Browse Source 
ll redefine some latr), edited default profil svg to use a file instead of hard code
This commit is contained in:
Capelier-Marla 2023-01-24 15:43:17 +01:00
parent 30e11af260
commit 94ca8a2798
4 changed files with 84 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Views/common/header.php
View File

@ -4,7 +4,7 @@ $array_header = array(
"Recette" => "/Recipe/view/36",
"+" => "/recipe/edit",
"Rechercher" => "rechercher",
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 30.933594 32.527344 C 30.785156 30.914063 30.84375 29.789063 30.84375 28.316406 C 31.574219 27.933594 32.882813 25.492188 33.101563 23.429688 C 33.675781 23.382813 34.582031 22.824219 34.847656 20.613281 C 34.988281 19.425781 34.421875 18.757813 34.074219 18.546875 C 35.007813 15.738281 36.949219 7.046875 30.488281 6.148438 C 29.820313 4.980469 28.117188 4.390625 25.90625 4.390625 C 17.050781 4.554688 15.984375 11.078125 17.925781 18.546875 C 17.578125 18.757813 17.011719 19.425781 17.152344 20.613281 C 17.421875 22.824219 18.324219 23.382813 18.898438 23.429688 C 19.117188 25.492188 20.476563 27.933594 21.210938 28.316406 C 21.210938 29.789063 21.265625 30.914063 21.117188 32.527344 C 19.367188 37.238281 7.546875 35.914063 7 45 L 45 45 C 44.453125 35.914063 32.683594 37.238281 30.933594 32.527344 Z"/></svg>' => "/user/view"
'<img src="/static/img/defaultProfil.svg" type="image/svg+xml">' => "/user/view"
);
?>
<header>

2
Views/home/view.php
View File

@ -12,5 +12,3 @@
?>
</section>
</main>

4
static/img/defaultProfil.svg
View File

@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 30.933594 32.527344 C 30.785156 30.914063 30.84375 29.789063 30.84375 28.316406 C 31.574219 27.933594 32.882813 25.492188 33.101563 23.429688 C 33.675781 23.382813 34.582031 22.824219 34.847656 20.613281 C 34.988281 19.425781 34.421875 18.757813 34.074219 18.546875 C 35.007813 15.738281 36.949219 7.046875 30.488281 6.148438 C 29.820313 4.980469 28.117188 4.390625 25.90625 4.390625 C 17.050781 4.554688 15.984375 11.078125 17.925781 18.546875 C 17.578125 18.757813 17.011719 19.425781 17.152344 20.613281 C 17.421875 22.824219 18.324219 23.382813 18.898438 23.429688 C 19.117188 25.492188 20.476563 27.933594 21.210938 28.316406 C 21.210938 29.789063 21.265625 30.914063 21.117188 32.527344 C 19.367188 37.238281 7.546875 35.914063 7 45 L 45 45 C 44.453125 35.914063 32.683594 37.238281 30.933594 32.527344 Z"/></svg>
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 41" width="38" height="41">
<path d="m38 41h-38c0.5-9.1 12.4-7.8 14.1-12.5 0.2-1.6 0.1-2.7 0.1-4.2-0.7-0.4-2.1-2.8-2.3-4.9-0.6 0-1.5-0.6-1.7-2.8-0.2-1.2 0.4-1.8 0.7-2.1-1.9-7.4-0.8-13.9 8-14.1 2.2 0 3.9 0.6 4.6 1.7 6.4 0.9 4.5 9.6 3.6 12.4 0.3 0.3 0.9 0.9 0.7 2.1-0.2 2.2-1.1 2.8-1.7 2.8-0.2 2.1-1.5 4.5-2.3 4.9 0 1.5 0 2.6 0.1 4.2 1.8 4.7 13.6 3.4 14.1 12.5z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 919 B

After

Width:  |  Height:  |  Size: 441 B

95
static/style.css
View File

@ -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 <a> element vertically */
height: 100%; /* sets the height of the <a> element to 100% of the parent <li> 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));
}