Adding (hard-coded) color palette section plus a few minor style changes

1 files changed, 35 insertions, 8 deletions

diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss
index f6b957df..77efdfa8 100644
--- a/web-ui/app/scss/style-guide.scss
+++ b/web-ui/app/scss/style-guide.scss
@@ -1,4 +1,5 @@
 @import "compass/css3";
+@import "styles.scss";
 
 body {
   display: block;
@@ -12,10 +13,18 @@ nav {
   width: 100%;
   background-color: #3e3a37;
   color: white;
+  opacity: 0.95;
 }
 
 ul li {
   display: inline;
+
+  a {
+    color: $primary_color;
+  }
+  a:hover {
+    color: lighten($primary_color, 15%);
+  }
 }
 
 ul.left, ul.right {
@@ -32,15 +41,33 @@ ul.right {
 
 section.guide-section {
   display: block;
-  height: 550px;
+  height: 100%;
   overflow-y: auto;
   padding: 82px 32px;
+}
 
-  &:nth-child(even) {
-    background: white
-  }
-  
-  &:nth-child(odd) {
-    background: #E5E5E3
-  }
+.color-swatch {
+  width: 160px;
+  height: 230px;
+  background-color: #344a5f;
+  border-radius: 5px;
+  display: inline-block;
+  margin-right: 15px;
 }
+
+.color-label {
+  position: relative;
+  top: 173px;
+  background-color: white;
+  border: 1px solid #eee;
+  text-align: center;
+  color: #344a5f;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  padding: 10px 0;
+}
+
+.color-name {
+  font-size: small;
+}
+