Adding pretty pictures

app/assets/stylesheets/darkswarm/branding.css.sass

@@ -1,6 +1,7 @@
-$clr-strong: #8f1d45
-$clr-soft: #f5e1e8
-$clr-bright: #c23e6c
+$clr-strong: #8f301d
+$clr-soft: #f5e4e1
+$clr-bright: #db583d
+$clr-blonde: #f7f4ef
 
 $disabled-dark: #999
 $disabled-bright: #ccc

app/assets/stylesheets/darkswarm/hub_node.css.sass

@@ -1,5 +1,5 @@
-@import 'branding'
-@import 'mixins'
+@import branding
+@import mixins
 
 hub
   display: block

app/assets/stylesheets/darkswarm/hubs.css.sass

@@ -1,3 +1,8 @@
+@import branding
+@import mixins
+
 #hubs
+  background: $clr-blonde url("/assets/home/shopping-bg.jpg")
+  @include fullwidthbg
   padding-top: 60px
   padding-bottom: 100px

app/assets/stylesheets/darkswarm/mixins.sass

@@ -10,3 +10,16 @@
 
 @mixin disabled
   color: $disabled-bright
+
+@mixin fullbg
+  background-position: top center 
+  background-repeat: no-repeat
+  -webkit-background-size: cover
+  -moz-background-size: cover
+  -o-background-size: cover
+  background-size: cover
+
+@mixin fullwidthbg
+  background-position: top center 
+  background-repeat: no-repeat
+  background-size: 100% auto

app/assets/stylesheets/darkswarm/tagline.css.sass

@@ -1,8 +1,16 @@
+@import branding
+@import mixins
+
 #tagline
-  background: grey
+  background: black url("/assets/home/tagline-bg.jpg")
+  @include fullbg
   height: 400px
   padding: 40px 0px
   h1, h2, p
     color: white
+  h1
+    margin-bottom: 1em  
   h2
-    font-size: 1.6875rem  
+    font-size: 1.6875rem
+  a
+    color: $clr-bright