From ef0f3ffbfba523b38a8a290f925bc51c21e7ee8d Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Thu, 12 Jul 2018 11:26:30 +0200
Subject: [PATCH] Add background overlay to improve contrast

And use lowercase-hyphenated syntax for variables/mixins.
---
 app/styles/_colors.scss                      | 14 +++++++++++---
 app/styles/app.scss                          | 14 ++++++--------
 app/styles/components/_add-contributor.scss  |  2 +-
 app/styles/components/_contributor-list.scss |  2 +-
 app/styles/components/_loading-spinner.scss  |  4 ++--
 app/styles/components/_proposal-list.scss    |  2 +-
 6 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/app/styles/_colors.scss b/app/styles/_colors.scss
index d01df0f..84ab6c3 100644
--- a/app/styles/_colors.scss
+++ b/app/styles/_colors.scss
@@ -5,9 +5,17 @@ $green: #97fb68;
 $yellow: #fbe468;
 $red: #fb6868;
 
-$primaryColor: $blue;
+$primary-color: $blue;
 
-#topbar {
-  background-color: rgba(255,0,255,.2);
+$body-text-color: #fff;
+
+@mixin body-background {
+  background-image: linear-gradient(to bottom, rgba(22, 21, 40, .4), rgba(0, 0, 0, .75)), url('/img/bg.jpg');
+  background-repeat: none;
+  background-attachment: fixed;
+}
+
+#topbar {
+  background-color: rgba(255, 0, 255, .2);
 }
 
diff --git a/app/styles/app.scss b/app/styles/app.scss
index c04c1b5..7d5bef5 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -21,12 +21,10 @@
 $font-family-sans: 'Open Sans', sans-serif;
 
 body {
-  background-image: url('/img/bg.jpg');
-  background-repeat: none;
-  background-attachment: fixed;
+  @include body-background;
   font-family: $font-family-sans;
   font-weight: 300;
-  color: #fff;
+  color: $body-text-color;
 }
 
 @media screen and (min-width: 900px) {
@@ -44,7 +42,7 @@ h1, h2, h3, h4, h5, input, button {
 section {
   h2 {
     font-size: 1.4rem;
-    color: $primaryColor;
+    color: $primary-color;
   }
 
   &#people {
@@ -68,14 +66,14 @@ section {
     .actions {
       padding-top: 3rem;
       font-size: 1rem;
-      color: $primaryColor;
+      color: $primary-color;
       text-align: center;
       @include media($mobile) {
         padding-top: 2rem;
       }
 
       a {
-        color: $primaryColor;
+        color: $primary-color;
       }
     }
   }
@@ -85,7 +83,7 @@ button, input[type=submit] {
   display: inline-block;
   border: 1px solid rgba(22, 21, 40, 1);
   background-color: rgba(22, 21, 40, 0.6);
-  color: $primaryColor;
+  color: $primary-color;
   border-radius: 3px;
   font-weight: 500;
   text-transform: uppercase;
diff --git a/app/styles/components/_add-contributor.scss b/app/styles/components/_add-contributor.scss
index 379b91e..dc0decb 100644
--- a/app/styles/components/_add-contributor.scss
+++ b/app/styles/components/_add-contributor.scss
@@ -9,7 +9,7 @@ section#add-contributor, section#add-proposal {
         padding-top: 1rem;
         text-align: center;
         a {
-          color: $primaryColor;
+          color: $primary-color;
           margin-left: 1rem;
         }
       }
diff --git a/app/styles/components/_contributor-list.scss b/app/styles/components/_contributor-list.scss
index d4431c3..5478587 100644
--- a/app/styles/components/_contributor-list.scss
+++ b/app/styles/components/_contributor-list.scss
@@ -22,7 +22,7 @@ table.contributor-list {
       }
 
       a {
-        color: $primaryColor;
+        color: $primary-color;
         &:hover, &:active {
           color: #fff;
         }
diff --git a/app/styles/components/_loading-spinner.scss b/app/styles/components/_loading-spinner.scss
index 6ba4057..a7c5fa1 100644
--- a/app/styles/components/_loading-spinner.scss
+++ b/app/styles/components/_loading-spinner.scss
@@ -11,7 +11,7 @@
   margin-top: 12rem;
   text-align: center;
   font-size: 1.4rem;
-  color: $primaryColor;
+  color: $primary-color;
 
   @include media($mobile) {
     margin-top: 6rem;
@@ -23,7 +23,7 @@
     margin-bottom: 2rem;
 
     #path-comet {
-      fill: $primaryColor;
+      fill: $primary-color;
       opacity: 0.1;
 
       animation-name: pulse;
diff --git a/app/styles/components/_proposal-list.scss b/app/styles/components/_proposal-list.scss
index 9edaa6b..2599a0b 100644
--- a/app/styles/components/_proposal-list.scss
+++ b/app/styles/components/_proposal-list.scss
@@ -70,7 +70,7 @@ ul.proposal-list {
 
     .votes {
       font-size: 1rem;
-      color: $primaryColor;
+      color: $primary-color;
       margin-right: 0.5rem;
     }