Merge pull request #18 from vis-kid/ew-color-variables

Extract Sass variables for colors

1 files changed, 45 insertions, 24 deletions

diff --git a/scss/cayman.scss b/scss/cayman.scss
index 20417e0..83a0319 100644
--- a/scss/cayman.scss
+++ b/scss/cayman.scss
@@ -1,6 +1,27 @@
+// Breakpoints
 $large-breakpoint: 64em;
 $medium-breakpoint: 42em;
 
+// Headers
+$header-heading-color: #fff;
+$header-bg-color: #159957;
+$header-bg-color-secondary: #155799;
+
+// Text
+$section-headings-color: #159957;
+$body-text-color: #606c71;
+$body-link-color: #1e6bb8;
+$blockquote-text-color: #819198;
+
+// Code
+$code-bg-color: #f3f6fa;
+$code-text-color: #567482;
+
+// Borders
+$border-color: #dce6f0;
+$table-border-color: #e9ebec;
+$hr-border-color: #eff0f1;
+
 @mixin large {
   @media screen and (min-width: #{$large-breakpoint}) {
     @content;
@@ -29,11 +50,11 @@ body {
   font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 1.5;
-  color: #606c71;
+  color: $body-text-color;
 }
 
 a {
-  color: #1e6bb8;
+  color: $body-link-color;
   text-decoration: none;
 
   &:hover {
@@ -44,19 +65,19 @@ a {
 .btn {
   display: inline-block;
   margin-bottom: 1rem;
-  color: rgba(255, 255, 255, 0.7);
-  background-color: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.2);
+  color: rgba(255,255,255, 0.7);
+  background-color: rgba(255,255,255, 0.08);
+  border-color: rgba(255,255,255, 0.2);
   border-style: solid;
   border-width: 1px;
   border-radius: 0.3rem;
   transition: color 0.2s, background-color 0.2s, border-color 0.2s;
 
   &:hover {
-    color: rgba(255, 255, 255, 0.8);
+    color: rgba(255,255,255, 0.8);
     text-decoration: none;
-    background-color: rgba(255, 255, 255, 0.2);
-    border-color: rgba(255, 255, 255, 0.3);
+    background-color: rgba(255,255,255, 0.2);
+    border-color: rgba(255,255,255, 0.3);
   }
 
   + .btn {
@@ -86,10 +107,10 @@ a {
 }
 
 .page-header {
-  color: #fff;
+  color: $header-heading-color;
   text-align: center;
-  background-color: #159957;
-  background-image: linear-gradient(120deg, #155799, #159957);
+  background-color: $header-bg-color;
+  background-image: linear-gradient(120deg, $header-bg-color-secondary, $header-bg-color);
 
   @include large {
     padding: 5rem 6rem;
@@ -176,7 +197,7 @@ a {
     margin-top: 2rem;
     margin-bottom: 1rem;
     font-weight: normal;
-    color: #159957;
+    color: $section-headings-color;
   }
 
   p {
@@ -187,8 +208,8 @@ a {
     padding: 2px 4px;
     font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
     font-size: 0.9rem;
-    color: #383e41;
-    background-color: #f3f6fa;
+    color: $code-text-color;
+    background-color: $code-bg-color;
     border-radius: 0.3rem;
   }
 
@@ -197,17 +218,17 @@ a {
     margin-top: 0;
     margin-bottom: 1rem;
     font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    color: #567482;
+    color: $code-text-color;
     word-wrap: normal;
-    background-color: #f3f6fa;
-    border: solid 1px #dce6f0;
+    background-color: $code-bg-color;
+    border: solid 1px $border-color;
     border-radius: 0.3rem;
 
     > code {
       padding: 0;
       margin: 0;
       font-size: 0.9rem;
-      color: #567482;
+      color: $code-text-color;
       word-break: normal;
       white-space: pre;
       background: transparent;
@@ -260,8 +281,8 @@ a {
   blockquote {
     padding: 0 1rem;
     margin-left: 0;
-    color: #819198;
-    border-left: 0.3rem solid #dce6f0;
+    color: $blockquote-text-color;
+    border-left: 0.3rem solid $border-color;
 
     > :first-child {
       margin-top: 0;
@@ -287,7 +308,7 @@ a {
     th,
     td {
       padding: 0.5rem 1rem;
-      border: 1px solid #e9ebec;
+      border: 1px solid $table-border-color;
     }
   }
 
@@ -311,7 +332,7 @@ a {
     height: 2px;
     padding: 0;
     margin: 1rem 0;
-    background-color: #eff0f1;
+    background-color: $hr-border-color;
     border: 0;
   }
 }
@@ -319,7 +340,7 @@ a {
 .site-footer {
   padding-top: 2rem;
   margin-top: 2rem;
-  border-top: solid 1px #eff0f1;
+  border-top: solid 1px $hr-border-color;
 
   @include large {
     font-size: 1rem;
@@ -340,5 +361,5 @@ a {
 }
 
 .site-footer-credits {
-  color: #819198;
+  color: $blockquote-text-color;
 }