renamed css vars
This commit is contained in:
parent
5cac66c864
commit
06aba6e4b4
@ -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);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user