restructure styles to use Sass, add color variables

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
 _site/
+.sass-cache
 .c9
 .bundle

_config.yml

@@ -10,6 +10,10 @@ description: A Code for America Brigade in San Mateo County
 owner:
   twitter: opensmc
 
+sass:
+    sass_dir: _sass
+    style: :compressed
+
 prose:
   media: 'images/uploads'
   rooturl: '_posts'

_sass/_0variables.scss

@@ -0,0 +1,20 @@
+
+/* COLORS */
+
+// Colors based on San Mateo County style guide:
+// https://opensanmateodocumentation.files.wordpress.com/2014/12/smc_style-guide-graphics-and-identity.pdf
+
+// Primary Colors
+$bay-blue: #056cb6;
+$ocean-turquoise: #39839b;
+$urban-gray: #7e8083;
+
+// Secondary Colors
+$dark-blue: #0076c0; //PMS 2935
+$purple: #7e83bf; //PMS 272
+$green: #8cd63f; //PMS 376
+$warm-gray: #bbb0a6; //PMS Warm Gray 6
+$orange: #faa634; //PMS 1375
+$red: #b5121b; //PMS 1807
+$dark-gray: #455560; //PMS 142
+$white: #fff;

_includes/css/opensmc.css → _sass/_1styles.scss

@@ -60,7 +60,7 @@ table h3 {
 }
 
 .featured-nav-link {
-  background: #00887a;
+  background: $ocean-turquoise;
 }
 
 .navbar-default .navbar-nav>li.featured-nav-link>a {
@@ -90,7 +90,7 @@ table h3 {
 /* Carousel base class */
 .carousel {
   height: 425px;
-  background-image: url({{site.baseurl}}/images/bay-discovery-site-1280.jpg);
+  background-image: url('/images/bay-discovery-site-1280.jpg');
   background-size: cover;
   background-position: center bottom;
   margin-bottom: 60px;
@@ -307,7 +307,7 @@ table h3 {
 @media screen and (min-width: 768px) {
   /* Remove the padding we set earlier */
   .header,
-  .marketing,
+  .marketing {
     padding-left: 0;
     padding-right: 0;
   }
@@ -472,7 +472,7 @@ transition: background 0.2s,border 0.2s;
 }
 
 .btn-hack {
-  background-color: #00887a;
+  background-color: $ocean-turquoise;
   color: #fff;
 }
 
@@ -792,7 +792,7 @@ left: -999em;
 
 .banner_ndoch {
   height: 400px;
-  background-image: url({{site.baseurl}}/images/bay-discovery-site-1280.jpg);
+  background-image: url('/images/bay-discovery-site-1280.jpg');
   background-size: cover;
   background-position: center bottom;
   margin-bottom: 20px;

style.scss

@@ -0,0 +1,8 @@
+---
+# Jekyll uses this file to generate style.css
+# To change styles, edit the scss files in _sass, not in this file
+# More info here: https://jekyllrb.com/docs/assets/
+---
+
+@import "0variables";
+@import "1styles";