forked from data.coop/membersystem
Variables in the CSS file
This commit is contained in:
parent
1ab7fd5c0c
commit
565018ea30
|
@ -21,20 +21,39 @@ p, h1, h2, h3, h4, h5, h6 {
|
|||
#root, #__next {
|
||||
isolation: isolate;
|
||||
}
|
||||
/* End reset */
|
||||
|
||||
/* Variables */
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--light : #fff;
|
||||
--light-dust : #fefefe;
|
||||
--dust : #f1f1f1;
|
||||
--dark-dust : #bfbfbf;
|
||||
--twilight : #404040;
|
||||
--dark : #323232;
|
||||
--custard : #f0dcac;
|
||||
--splash : #4b3aba;
|
||||
|
||||
/* Sizes */
|
||||
--space : 12px;
|
||||
--double-space : calc(--space * 2);
|
||||
--half-space : calc(--space / 2);
|
||||
--quarter-space : calc(--space / 4);
|
||||
}
|
||||
|
||||
body {
|
||||
margin : 0;
|
||||
padding : 0;
|
||||
background : #f0dcac;
|
||||
background : var(--custard);
|
||||
font-family : sans-serif;
|
||||
color : #232323;
|
||||
color : var(--dark);
|
||||
}
|
||||
|
||||
header {
|
||||
display : flex;
|
||||
padding : 12px 24px;
|
||||
background : #fff;
|
||||
background : var(--light);
|
||||
justify-content : space-between;
|
||||
align-items : center;
|
||||
}
|
||||
|
@ -53,11 +72,11 @@ header > div.logout a {
|
|||
|
||||
aside {
|
||||
padding : 24px 24px;
|
||||
background : #fff;
|
||||
background : var(--light);
|
||||
}
|
||||
|
||||
aside > div {
|
||||
background : #efefef;
|
||||
background : var(--dust);
|
||||
padding : 24px;
|
||||
border-radius : 6px;
|
||||
overflow : hidden;
|
||||
|
@ -71,7 +90,7 @@ aside > div > h2 {
|
|||
aside > div > figure {
|
||||
width : 100px;
|
||||
height : 100px;
|
||||
border : 1px solid rgba(0,0,0,0.4);
|
||||
border : 1px solid var(--dark-dust);
|
||||
float : left;
|
||||
margin-right : 24px;
|
||||
}
|
||||
|
@ -90,8 +109,8 @@ aside > div > dl > dt {
|
|||
|
||||
nav {
|
||||
display : block;
|
||||
border-bottom : 1px solid rgba(0,0,0,0.2);
|
||||
background : #fff;
|
||||
border-bottom : 1px solid var(--dark-dust);
|
||||
background : var(--light);
|
||||
padding : 0 12px;
|
||||
}
|
||||
|
||||
|
@ -115,7 +134,7 @@ nav > ol > li > a {
|
|||
cursor : pointer;
|
||||
border-bottom : 4px solid transparent;
|
||||
text-decoration : none;
|
||||
color : #121212;
|
||||
color : var(--dark);
|
||||
}
|
||||
|
||||
nav ol li a:hover {
|
||||
|
@ -124,8 +143,8 @@ nav ol li a:hover {
|
|||
|
||||
nav ol li a.current {
|
||||
font-weight : bold;
|
||||
border-color : #4b3aba;
|
||||
color : #4b3aba;
|
||||
border-color : var(--splash);
|
||||
color : var(--splash);
|
||||
}
|
||||
|
||||
article {
|
||||
|
@ -133,7 +152,7 @@ article {
|
|||
}
|
||||
|
||||
article > div {
|
||||
background : #efefef;
|
||||
background : var(--dust);
|
||||
padding : 24px;
|
||||
margin-bottom : 24px;
|
||||
}
|
||||
|
@ -150,7 +169,7 @@ div.services {
|
|||
}
|
||||
|
||||
div.services > div {
|
||||
background : #fff;
|
||||
background : var(--light);
|
||||
padding : 24px;
|
||||
border-radius : 6px;
|
||||
flex : 240px;
|
||||
|
@ -173,8 +192,8 @@ div.services > div > div.description {
|
|||
|
||||
div.services > div > a,
|
||||
button {
|
||||
color : #fff;
|
||||
background : #4b3aba;
|
||||
color : var(--light);
|
||||
background : var(--splash);
|
||||
padding : 6px 12px;
|
||||
border-radius : 3px;
|
||||
opacity : 0.8;
|
||||
|
@ -199,21 +218,20 @@ form > div >label {
|
|||
}
|
||||
|
||||
form > div > input[type="text"] {
|
||||
border : 1px solid #343434;
|
||||
border : 1px solid var(--twilight);
|
||||
border-radius : 3px;
|
||||
padding : 6px 12px;
|
||||
background : #fefefe;
|
||||
background : var(--dust);
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
position : fixed;
|
||||
bottom : 0;
|
||||
left : 0;
|
||||
right : 0;
|
||||
background : #232323;
|
||||
color : #efefef;
|
||||
background : var(--dark);
|
||||
color : var(--dust);
|
||||
padding : 12px;
|
||||
font-size : 0.78em;
|
||||
opacity : 0.8;
|
||||
|
|
Loading…
Reference in a new issue