more variables

chrisjmccormick · Feb 8, 2016 · cce52bc · cce52bc
1 parent a181b3d
commit cce52bc
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 23 deletions.
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -15,25 +15,25 @@ body {
 }
 
 html {
-  font-family: $font-family;
-  font-size: 16px;
-  line-height: 1.5;
+  font-family: $root-font-family;
+  font-size: $root-font-size;
+  line-height: $root-line-height;
 
-  @media (min-width: 38em) {
-    font-size: 20px;
+  @media (min-width: $large-breakpoint) {
+    font-size: $large-font-size;
   }
 }
 
 body {
-  color: #515151;
-  background-color: #fff;
+  color: $body-color;
+  background-color: $body-bg;
   -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
 }
 
 // No `:visited` state is required by default (browsers will use `a`)
 a {
-  color: #268bd2;
+  color: $link-color;
   text-decoration: none;
 
   // `:focus` is linked to `:hover` for basic accessibility

diff --git a/_sass/_code.scss b/_sass/_code.scss
@@ -5,13 +5,13 @@
 
 code,
 pre {
-  font-family: Menlo, Monaco, "Courier New", monospace;
+  font-family: $code-font-family;
 }
 
 code {
   padding: .25em .5em;
   font-size: 85%;
-  color: #bf616a;
+  color: $code-color;
   background-color: #f9f9f9;
   border-radius: 3px;
 }

diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss
@@ -11,16 +11,15 @@
 .masthead-title {
   margin-top: 0;
   margin-bottom: 0;
-  color: #505050;
+  color: $gray-4;
 
   a {
-    color: #505050;
+    color: inherit;
   }
 
   small {
     font-size: 75%;
     font-weight: 400;
-    color: #c0c0c0;
-    letter-spacing: 0;
+    opacity: .5;
   }
 }
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -1,12 +1,30 @@
-$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
-$font-size: 16px;
-$line-height: 1.5;
-$color: #515151;
-$link-color: #268bd2;
+$gray-1: #f9f9f9;
+$gray-2: #ccc;
+$gray-3: #767676;
+$gray-4: #515151;
+$gray-5: #313131;
+
+$red: #ac4142;
+$orange: #d28445;
+$yellow: #f4bf75;
+$green: #90a959;
+$cyan: #75b5aa;
+$blue: #268bd2;
+// $blue: #6a9fb5;
+$brown: #8f5536;
+
+$root-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
+$root-font-size: 16px;
+$root-line-height: 1.5;
+
+$body-color: #515151;
+$body-bg: #fff;
+$link-color: $blue;
+
 $border-color: #e5e5e5;
 
+$large-breakpoint: 38em;
+$large-font-size: 20px;
 
-$gray-1: #f9f9f9;
-$gray-2: #767676;
-$gray-3: #515151;
-$gray-4: #313131;
+$code-font-family: Menlo, Monaco, "Courier New", monospace;
+$code-color: #bf616a;