halfd/membersystem
1
0
Fork 0
forked from data.coop/membersystem
Code Pull requests Activity

Variables in the CSS file

Browse source
This commit is contained in:
Halfdan 2023-10-03 19:45:19 +02:00
parent 1ab7fd5c0c
commit 565018ea30
1 changed files with 39 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/project/static/css/style.css
View file

@ -21,20 +21,39 @@ p, h1, h2, h3, h4, h5, h6 {
#root, #__next { #root, #__next {
isolation: isolate; 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 { body {
margin : 0; margin : 0;
padding : 0; padding : 0;
background : #f0dcac; background : var(--custard);
font-family : sans-serif; font-family : sans-serif;
color : #232323; color : var(--dark);
} }
header { header {
display : flex; display : flex;
padding : 12px 24px; padding : 12px 24px;
background : #fff; background : var(--light);
justify-content : space-between; justify-content : space-between;
align-items : center; align-items : center;
} }
@ -53,11 +72,11 @@ header > div.logout a {
aside { aside {
padding : 24px 24px; padding : 24px 24px;
background : #fff; background : var(--light);
} }
aside > div { aside > div {
background : #efefef; background : var(--dust);
padding : 24px; padding : 24px;
border-radius : 6px; border-radius : 6px;
overflow : hidden; overflow : hidden;
@ -71,7 +90,7 @@ aside > div > h2 {
aside > div > figure { aside > div > figure {
width : 100px; width : 100px;
height : 100px; height : 100px;
border : 1px solid rgba(0,0,0,0.4); border : 1px solid var(--dark-dust);
float : left; float : left;
margin-right : 24px; margin-right : 24px;
} }
@ -90,8 +109,8 @@ aside > div > dl > dt {
nav { nav {
display : block; display : block;
border-bottom : 1px solid rgba(0,0,0,0.2); border-bottom : 1px solid var(--dark-dust);
background : #fff; background : var(--light);
padding : 0 12px; padding : 0 12px;
} }
@ -115,7 +134,7 @@ nav > ol > li > a {
cursor : pointer; cursor : pointer;
border-bottom : 4px solid transparent; border-bottom : 4px solid transparent;
text-decoration : none; text-decoration : none;
color : #121212; color : var(--dark);
} }
nav ol li a:hover { nav ol li a:hover {
@ -124,8 +143,8 @@ nav ol li a:hover {
nav ol li a.current { nav ol li a.current {
font-weight : bold; font-weight : bold;
border-color : #4b3aba; border-color : var(--splash);
color : #4b3aba; color : var(--splash);
} }
article { article {
@ -133,7 +152,7 @@ article {
} }
article > div { article > div {
background : #efefef; background : var(--dust);
padding : 24px; padding : 24px;
margin-bottom : 24px; margin-bottom : 24px;
} }
@ -150,7 +169,7 @@ div.services {
} }
div.services > div { div.services > div {
background : #fff; background : var(--light);
padding : 24px; padding : 24px;
border-radius : 6px; border-radius : 6px;
flex : 240px; flex : 240px;
@ -173,8 +192,8 @@ div.services > div > div.description {
div.services > div > a, div.services > div > a,
button { button {
color : #fff; color : var(--light);
background : #4b3aba; background : var(--splash);
padding : 6px 12px; padding : 6px 12px;
border-radius : 3px; border-radius : 3px;
opacity : 0.8; opacity : 0.8;
@ -199,21 +218,20 @@ form > div >label {
} }
form > div > input[type="text"] { form > div > input[type="text"] {
border : 1px solid #343434; border : 1px solid var(--twilight);
border-radius : 3px; border-radius : 3px;
padding : 6px 12px; padding : 6px 12px;
background : #fefefe; background : var(--dust);
width : 100%; width : 100%;
} }
footer { footer {
position : fixed; position : fixed;
bottom : 0; bottom : 0;
left : 0; left : 0;
right : 0; right : 0;
background : #232323; background : var(--dark);
color : #efefef; color : var(--dust);
padding : 12px; padding : 12px;
font-size : 0.78em; font-size : 0.78em;
opacity : 0.8; opacity : 0.8;