Recolor doc site.

doc/site/style.scss

@@ -1,16 +1,16 @@
-//$header: "Sanchez", helvetica, arial, sans-serif;
 $header: "Dosis", helvetica, arial, sans-serif;
 $body: "Source Sans Pro", georgia, serif;
 $code: "Source Code Pro", Menlo, Monaco, Consolas, monospace;
 
-// roboto: boring
-// dosis: nice, "wren" looks good, bit nerdy
-// mont: nice and wide
-// raleway: great w
+$primary:    hsl(30, 40%, 65%);
+$link:       hsl(30, 50%, 40%);
+$link-hover: hsl(195, 100%, 40%);
+$link-glow:  hsla(195, 100%, 60%, 0.2);
 
-$p: 195;
+$secondary-hue: 195;
 
-$light-gray: hsl($p, 20%, 80%);
+$light-gray: hsl(30, 10%, 80%);
+$lighter-gray: hsl(30, 10%, 93%);
 
 * {
   box-sizing: border-box;
@@ -37,38 +37,36 @@ h2 {
 }
 
 h3 {
-  font: normal 18px $header;
+  font: normal 20px $header;
   margin: 24px 0 0 0;
 }
 
 h1, h2, h3 {
-  color: hsl($p, 90%, 50%);
+  color: $primary;
   outline: none;
 }
 
 a {
-  color: hsl($p, 80%, 40%);
+  color: $link;
   text-decoration: none;
   transition: color 0.3s, text-shadow 0.3s;
 }
 
-a:hover {
-  color: hsl(330, 100%, 50%);
-  text-shadow: 0 0 6px hsla(330, 100%, 50%, 0.2);
-}
-
 .header-anchor {
   display: none;
 }
 
-h2:hover > .header-anchor, h3:hover > .header-anchor {
+h2:hover > .header-anchor,
+h3:hover > .header-anchor {
   display: inline;
-  color: hsl($p, 30%, 90%);
+  color: $lighter-gray;
 }
 
-h2:hover > .header-anchor:hover, h3:hover > .header-anchor:hover {
-  color: hsl($p, 70%, 40%);
-  text-shadow: 0 0 6px hsla($p, 100%, 50%, 0.2);
+a:hover,
+h2:hover > .header-anchor:hover,
+h3:hover > .header-anchor:hover {
+  color: $link-hover;
+  text-shadow: 0 0 6px $link-glow;
 }
 
 p, li {
@@ -81,12 +79,11 @@ p + p {
 }
 
 code, pre {
-  color: hsl($p, 20%, 40%);
+  color: hsl($secondary-hue, 20%, 40%);
   font: 14px $code;
-  background: hsl($p, 20%, 97%);
+  background: hsl($secondary-hue, 30%, 97%);
   border-radius: 4px;
-
-  border: solid 1px hsl($p, 30%, 92%);
+  border: solid 1px hsl($secondary-hue, 30%, 92%);
 }
 
 code {
@@ -110,13 +107,13 @@ pre {
   position: absolute;
   width: 840px;
   height: 100px;
-  border-bottom: solid 1px hsl($p, 20%, 93%);
+  border-bottom: solid 1px $lighter-gray;
 
   h1 {
     position: absolute;
     left: 0;
     bottom: 0;
-    font: 56px $header;
+    font: 64px $header;
     font-weight: 300;
     margin: 0;
     letter-spacing: 2px;
@@ -128,6 +125,7 @@ pre {
     bottom: 7px;
     color: $light-gray;
     font: 18px $header;
+    font-weight: 300;
     letter-spacing: 1px;
   }
 }
@@ -148,6 +146,7 @@ pre {
   h2 {
     color: $light-gray;
     font: normal 18px $header;
+    font-weight: 300;
     margin: 0;
     letter-spacing: 1px;
   }
@@ -173,17 +172,18 @@ pre {
 }
 
 // Syntax highlighting.
-.codehilite pre span.c1 { color: hsl($p, 20%, 65%); } /* line comment */
-.codehilite pre span.cm { color: hsl($p, 20%, 65%); } /* block comment */
+.codehilite pre span.c1 { color: hsl($secondary-hue, 20%, 65%); } /* line comment */
+.codehilite pre span.cm { color: hsl($secondary-hue, 20%, 65%); } /* block comment */
 .codehilite pre span.vg { color: #5d3a85; } /* global variable */
 .codehilite pre span.vi { color: #784bab; } /* instance variable */
-.codehilite pre span.k  { color: hsl($p, 80%, 40%); } /* keyword message */
+.codehilite pre span.k  { color: hsl($secondary-hue, 100%, 40%); } /* keyword message */
+.codehilite pre span.kd { color: hsl($secondary-hue, 100%, 40%); } /* keyword decl */
 .codehilite pre span.p  { color: #777; } /* punctuation ()[]{} */
-.codehilite pre span.s  { color: hsl(330, 60%, 55%); } /* string */
+.codehilite pre span.s  { color: hsl(30, 40%, 55%); } /* string */
+.codehilite pre span.s2 { color: hsl(30, 40%, 55%); } /* string escape */
 .codehilite pre span.se { color: hsl(30, 90%, 45%); } /* string escape */
 .codehilite pre span.nb { color: #30a138; } /* built-in name: self undefined */
-.codehilite pre span.o  { color: hsl($p, 100%, 35%); } /* operator */
-.codehilite pre span.kd { color: hsl($p, 100%, 45%); } /* keyword decl */
+.codehilite pre span.o  { color: hsl($secondary-hue, 100%, 35%); } /* operator */
 .codehilite pre span.nv { color: #24a36a; } /* argument name */
 .codehilite pre span.ow { color: #30a186; } /* user-defined operator */
 .codehilite pre span.mi { } /* number */