From cd467370b92ec7cb085bdbe70224b0225a9974c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= <andre.wahlberg@outlook.com>
Date: Fri, 20 Nov 2020 16:20:54 +0100
Subject: [PATCH] Add CSS color variables

---
 src/App.js                      | 1 +
 src/components/css/PageArea.css | 9 ++++++++-
 src/variables.css               | 5 +++++
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 src/variables.css

diff --git a/src/App.js b/src/App.js
index 4d2f271..75bc102 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,3 +1,4 @@
+import './variables.css';
 import './App.css';
 import React, { Component } from 'react';
 import NavigationDrawer from './components/NavigationDrawer.js'
diff --git a/src/components/css/PageArea.css b/src/components/css/PageArea.css
index 9d54cb6..32504ee 100644
--- a/src/components/css/PageArea.css
+++ b/src/components/css/PageArea.css
@@ -1,4 +1,11 @@
-#pageArea {
+main {
     width: 100vw;
     flex: 1 1 auto;
+    background: var(--colorBg);
+}
+
+#topSection {
+    width: 100%;
+    height: 15vh;
+    background: linear-gradient(90deg, var(--colorVT1), var(--colorVT2));
 }
\ No newline at end of file
diff --git a/src/variables.css b/src/variables.css
new file mode 100644
index 0000000..20427b5
--- /dev/null
+++ b/src/variables.css
@@ -0,0 +1,5 @@
+:root {
+    --colorVT1: rgb(1, 170, 235);
+    --colorVT2: rgb(25, 212, 245);
+    --colorBg: rgb(240, 248, 250);
+}
\ No newline at end of file