Variables in the CSS file

src/project/static/css/style.css

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