Variables in the CSS file

This commit is contained in:
Halfdan 2023-10-03 19:45:19 +02:00
parent 1ab7fd5c0c
commit 565018ea30

View file

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