Add background overlay to improve contrast

And use lowercase-hyphenated syntax for variables/mixins.

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);
 }
 

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;

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

app/styles/components/_contributor-list.scss

@@ -22,7 +22,7 @@ table.contributor-list {
       }
 
       a {
-        color: $primaryColor;
+        color: $primary-color;
         &:hover, &:active {
           color: #fff;
         }

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;

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