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

renamed css vars

Browse Source
This commit is contained in:
Capelier-Marla 2023-01-24 16:01:39 +01:00
parent 5cac66c864
commit 06aba6e4b4
1 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
static/style.css
View File

@ -3,24 +3,23 @@
:root { :root {
font-family: 'Nunito', 'Arial'; font-family: 'Nunito', 'Arial';
/* vars */ /* vars */
--color-1-1: hsl(341, 100%, 95%); /*--principal-pastel: hsl(341, 100%, 95%);*/
--color-1-2: hsl(341, 85%, 89%); /*--principal-brightest: hsl(341, 85%, 89%);*/
--color-1-3: hsl(342, 95%, 79%); /*--principal-light: hsl(342, 95%, 79%);*/
--color-1-4: hsl(341, 94%, 65%); --principal-neurtal: hsl(341, 94%, 65%);
--color-1-5: hsl(342, 72%, 49%); /*--principal-dark: hsl(342, 72%, 49%);*/
--color-1-6: hsl(342, 62%, 37%); /*--principal-darker: hsl(342, 62%, 37%);*/
--color-1-7: hsl(342, 66%, 31%); /*--principal-darkest: hsl(342, 78%, 19%);*/
--color-1-8: hsl(342, 78%, 19%);
--color-2-1: hsl(30, 33%, 98%); --secondary-pastel: hsl(30, 33%, 98%);
--color-2-2: hsl(29, 56%, 91%); /*--secondary-brightest: hsl(29, 56%, 91%);*/
--color-2-3: hsl(30, 59%, 83%); /*--secondary-light: hsl(30, 59%, 83%);*/
--color-2-4: hsl(31, 54%, 69%); /*--secondary-neurtal: hsl(31, 54%, 69%);*/
--color-2-5: hsl(30, 66%, 63%); /*--secondary-dark: hsl(30, 66%, 63%);*/
--color-2-6: hsl(30, 46%, 46%); /*--secondary-darker: hsl(30, 46%, 46%);*/
--color-2-7: hsl(30, 64%, 29%); /*--secondary-darkest: hsl(30, 64%, 29%);*/
--color-g-1: hsl(340, 2%, 63%); --grey-dark: hsl(340, 2%, 63%);
--size-1: 2px; --size-1: 2px;
--size-2: 4px; --size-2: 4px;
@ -41,7 +40,7 @@
} }
body { body {
background: var(--color-2-1); background: var(--secondary-pastel);
} }
body > header { body > header {
@ -49,7 +48,7 @@ body > header {
box-shadow: var(--shadow); box-shadow: var(--shadow);
padding: var(--size-3); padding: var(--size-3);
font-size: var(--size-5); font-size: var(--size-5);
background: var(--color-2-1); background: var(--secondary-pastel);
} }
body > header > nav { body > header > nav {
@ -69,7 +68,7 @@ body > header > nav > ul > li::marker {
content: none; content: none;
} }
body > header > nav > ul > li { body > header > nav > ul > li {
background: var(--color-1-4); background: var(--principal-neurtal);
border-radius: var(--border-radius); border-radius: var(--border-radius);
height: 100%; height: 100%;
padding-left: var(--size-4); padding-left: var(--size-4);
@ -88,7 +87,7 @@ body > header > nav > ul > li {
} }
body > header > nav > ul > li > a { body > header > nav > ul > li > a {
color: var(--color-2-1); color: var(--secondary-pastel);
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
} }
@ -97,7 +96,7 @@ body > header > nav > ul > li:first-child > a > img {
height: var(--size-6); height: var(--size-6);
} }
body > header > nav > ul > li:last-child { body > header > nav > ul > li:last-child {
border: var(--border) var(--color-1-4); border: var(--border) var(--principal-neurtal);
background: none; background: none;
} }
body > header > nav > ul > li:last-child > a > img { body > header > nav > ul > li:last-child > a > img {
@ -113,7 +112,7 @@ footer {
align-items: center; align-items: center;
height: 200px; height: 200px;
width: 100vw; width: 100vw;
background: var(--color-g-1); background: var(--grey-dark);
color: var(--color-2-1); color: var(--secondary-pastel);
font-size: var(--size-5); font-size: var(--size-5);
} }