changed sass to be more 'dark" but still /comfy/

server/static/sass/about.scss

@@ -1,3 +1,4 @@
+@import 'general.scss';
 * {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -11,7 +12,7 @@
 body {
     line-height: 1.7em;
     color: #7f8c8d;
-    background: whitesmoke;
+    background: $back-grey;
     font-size: 13px;
 }
 
@@ -22,12 +23,11 @@ h4,
 h5,
 h6,
 label {
-    color: #34495e;
+    color: $text-bold;
 }
 
-.pure-img-responsive {
+.bg-dark {
-    max-width: 100%;
+    background-color: $bar-grey;
-    height: auto;
 }
 
 .l-box {
@@ -46,7 +46,8 @@ label {
 .card {
     display: inline-block;
     box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
-    background: white;
+    background: $top-grey;
+    color: $text-norm;
     margin: 20px;
     margin-left: 25%;
     margin-right: 25%;
@@ -55,7 +56,7 @@ label {
 .head-card {
     display: inline-block;
     box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
-    background: whitesmoke;
+    background: $top-grey;
     margin: 20px;
 }
 
@@ -78,72 +79,6 @@ label {
     margin-bottom: 1em;
 }
 
-/*
- * -- PURE BUTTON STYLES --
- * I want my pure-button elements to look a little different
- */
-.pure-button {
-    background-color: #1f8dd6;
-    color: white;
-    padding: 0.5em 2em;
-    border-radius: 5px;
-}
-
-a.pure-button-primary {
-    background: white;
-    color: #1f8dd6;
-    border-radius: 5px;
-    font-size: 120%;
-}
-
-
-.home-menu {
-    padding: 0.5em;
-    text-align: center;
-}
-.home-menu {
-    background: rgb(0, 14, 15);
-}
-.pure-menu.pure-menu-fixed {
-    border-bottom: none;
-    /* I need a higher z-index here because of the scroll-over effect. */
-    z-index: 4;
-    padding-left: 25%;
-    padding-right: 25%;
-}
-
-.home-menu .pure-menu-heading {
-    font-weight: 400;
-    font-size: 120%;
-}
-
-.home-menu .pure-menu-selected a {
-    color: white;
-}
-
-.home-menu a {
-    color: whitesmoke;
-}
-.home-menu li a:hover,
-.home-menu li a:focus {
-    background: none;
-    border: none;
-    color: #AECFE5;
-}
-
-/*
- * -- CONTENT STYLES --
- */
-.content-wrapper {
-    /* These styles are required for the "scroll-over" effect */
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    min-height: 12%;
-    z-index: 2;
-    background: white;
-    background: rgba(0,0,0,0);
-}
 
 /* We want to give the content area some more padding */
 .content {
@@ -163,10 +98,12 @@ a.pure-button-primary {
     color: white;
 }
 
+.pure-g {
+    background-color: $back-grey;
+}
 /* This is the class used for the content sub-headers (<h3>) */
 .content-subhead {
-    color: #1f8dd6;
+    color: $heading-pink;
-    color: #DA2860;
     text-align: center;
 }
     .content-subhead i {

server/static/sass/index.scss

@@ -1,3 +1,4 @@
+@import 'general.scss';
 $button_color_bg: #1f8dd6;
 $button_color_txt: white;
 * {
@@ -17,6 +18,10 @@ body {
     line-height: 1.7em;
     font-size: 13px;
 }
+
+p {
+    color: $text-norm;
+}
 .navbar {
     z-index: 2;
 }
@@ -41,31 +46,11 @@ a {
 }
 
 
-.pure-form input[type] {
+.pure-g {
-    border: 2px solid #ddd;
+    background-color: $back-grey;
-    box-shadow: none;
-    font-size: 100%;
-    width: 100%;
-    margin-bottom: 1em;
 }
 
-/*
- * -- PURE BUTTON STYLES --
- * I want my pure-button elements to look a little different
- */
-.pure-button {
-    background-color: $button_color_bg;
-    color: $button_color_txt;
-    padding: 0.5em 2em;
-    border-radius: 5px;
-}
 
-a.pure-button-primary {
-    background: $button_color_bg;
-    color: $button_color_txt;
-    border-radius: 5px;
-    font-size: 120%;
-}
 
 /*
  * -- SPLASH STYLES --
@@ -136,12 +121,14 @@ a.pure-button-primary {
 /* We want to give the content area some more padding */
 .content {
     padding: 1em 1em 3em;
+    background-color: $back-grey;
 }
 
 /* This is the class used for the main content headers (<h2>) */
 .content-head {
     font-weight: 400;
     text-transform: uppercase;
+    color: $text-bold;
     letter-spacing: 0.1em;
     margin: 2em 0 1em;
 }