renamed css vars

This commit is contained in:
Capelier-Marla 2023-01-24 16:01:39 +01:00
parent 5cac66c864
commit 06aba6e4b4

View File

@ -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);
}