4 files changed, 183 insertions, 0 deletions
diff --git a/website/app/static/styles/default.css b/website/app/static/styles/default.css
new file mode 100644
index 0000000..47ba29d
--- /dev/null
+++ b/website/app/static/styles/default.css
@@ -0,0 +1,25 @@
+:root {
+    --primary-color: #003B5C;
+    --secondary-color: #C3D7EE;
+    --home: rgba(200, 200, 200, 0.7);
+    --yes: rgba(0, 255, 0, 0.7);
+    --no: rgba(255, 0, 0, 0.7);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Liberation Sans', sans-serif;
+    line-height: 1.2;
+}
+
+h1 {
+
+}
+
+h2 {
+
+}
diff --git a/website/app/static/styles/home.css b/website/app/static/styles/home.css
new file mode 100644
index 0000000..262b40c
--- /dev/null
+++ b/website/app/static/styles/home.css
@@ -0,0 +1,50 @@
+.main {
+    height: 100%;
+    position: absolute;
+    left: 3%;
+    right: 3%;
+    background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed;
+}
+
+.tab-yes {
+    height: 100%;
+    width: 10%;
+    float: left;
+    position: fixed;
+    z-index: -1;
+    background: var(--yes);
+}
+.tab-no {
+    height: 100%;
+    width: 10%;
+    float: right;
+    position: fixed;
+    z-index: -1;
+    right: 0;
+    background: var(--no);
+}
+
+.tab-yes:hover ~ .main {
+    left: 5%;
+    transition: 0.2s;
+}
+
+.tab-no:hover ~ .main {
+    right: 5%;
+    transition: 0.2s;
+}
+
+.post {
+    background: white;
+    border-radius: 14px;
+    padding: 1rem;
+    margin: 1rem;
+    width: 20%;
+}
+
+.post:hover {
+    background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%);
+    cursor: pointer;
+    transition: 0.8s;
+    color: white;
+}
diff --git a/website/app/static/styles/no.css b/website/app/static/styles/no.css
new file mode 100644
index 0000000..09171a6
--- /dev/null
+++ b/website/app/static/styles/no.css
@@ -0,0 +1,54 @@
+.main {
+    height: 100%;
+    right: 0;
+    left: 6%;
+    position: absolute;
+    z-index: 1;
+    background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed;
+}
+
+.tab-home {
+    height: 100%;
+    width: 3%;
+    float: left;
+    position: relative;
+    z-index: 0;
+    background: var(--home);
+}
+
+.tab-yes {
+    height: 100%;
+    width: 3%;
+    float: left;
+    position: relative;
+    z-index: -1;
+    background: var(--yes);
+}
+
+.tab-home:hover ~ .main {
+    left: 9%;
+    transition: 0.2s;
+}
+
+.tab-home:hover {
+    width: 6%;
+    transition: 0.2s;
+}
+
+.tab-yes:hover ~ .main {
+    left: 9%;
+    transition: 0.2s;
+}
+
+.tab-yes:hover {
+    width: 6%;
+    transition: 0.2s;
+}
+
+.post {
+    background: white;
+    border-radius: 14px;
+    padding: 1rem;
+    margin: 1rem;
+    width: 20%;
+}
diff --git a/website/app/static/styles/yes.css b/website/app/static/styles/yes.css
new file mode 100644
index 0000000..96443e1
--- /dev/null
+++ b/website/app/static/styles/yes.css
@@ -0,0 +1,54 @@
+.main {
+    height: 100%;
+    right: 6%;
+    left: 0;
+    position: absolute;
+    z-index: 1;
+    background: linear-gradient(to top, var(--secondary-color), var(--primary-color)) fixed;
+}
+
+.tab-home {
+    height: 100%;
+    width: 3%;
+    float: right;
+    position: relative;
+    z-index: 0;
+    background: var(--home);
+}
+
+.tab-no {
+    height: 100%;
+    width: 3%;
+    float: right;
+    position: relative;
+    z-index: -1;
+    background: var(--no);
+}
+
+.tab-home:hover ~ .main {
+    right: 9%;
+    transition: 0.2s;
+}
+
+.tab-home:hover {
+    width: 6%;
+    transition: 0.2s;
+}
+
+.tab-no:hover ~ .main {
+    right: 9%;
+    transition: 0.2s;
+}
+
+.tab-no:hover {
+    width: 6%;
+    transition: 0.2s;
+}
+
+.post {
+    background: white;
+    border-radius: 14px;
+    padding: 1rem;
+    margin: 1rem;
+    width: 20%;
+}