From ae967b264df2e2c61823bf8971052da21e31d191 Mon Sep 17 00:00:00 2001
From: Brandon Mathis <brandon@imathis.com>
Date: Fri, 25 May 2012 11:36:57 -0500
Subject: [PATCH] improved flexability of styling code blocks. Improved the
 light theme.

---
 .themes/classic/sass/base/_solarized.scss  | 36 +++++++++++++---
 .themes/classic/sass/custom/_colors.scss   | 45 +++++++++++++++-----
 .themes/classic/sass/partials/_syntax.scss | 48 +++++++++++++++-------
 3 files changed, 97 insertions(+), 32 deletions(-)

diff --git a/.themes/classic/sass/base/_solarized.scss b/.themes/classic/sass/base/_solarized.scss
index 45d8fc5..7006318 100644
--- a/.themes/classic/sass/base/_solarized.scss
+++ b/.themes/classic/sass/base/_solarized.scss
@@ -1,11 +1,24 @@
+$solarized: dark !default;
+$pre-bg: default !default;
+
 $base03:          #002b36 !default; //darkest blue
 $base02:          #073642 !default; //dark blue
 $base01:          #586e75 !default; //darkest gray
 $base00:          #657b83 !default; //dark gray
 $base0:           #839496 !default; //medium gray
 $base1:           #93a1a1 !default; //medium light gray
-$base2:           #eee8d5 !default; //cream
-$base3:           #fdf6e3 !default; //white
+// Test defaults for cream colors
+$base2:           default !default;
+$base3:           default !default;
+@if $solarized == dark {
+  @if $base2 == default { $base2: #eee8d5; } // cream
+  @if $base3 == default { $base3: #fdf6e3; } // cream white
+}
+@if $solarized == light {
+  // I prefer white and gray for the light theme
+  @if $base2 == default { $base2: #e5e5e5; } // light gray
+  @if $base3 == default { $base3: #fbfbfb; } // white
+}
 $solar-yellow:    #b58900 !default;
 $solar-orange:    #cb4b16 !default;
 $solar-red:       #dc322f !default;
@@ -15,10 +28,8 @@ $solar-blue:      #268bd2 !default;
 $solar-cyan:      #2aa198 !default;
 $solar-green:     #859900 !default;
 
-$solarized: dark !default;
-
 @if $solarized == light {
-
+  // Flipping the colors, This is the magic of Solarized.
   $_base03: $base03;
   $_base02: $base02;
   $_base01: $base01;
@@ -39,8 +50,21 @@ $solarized: dark !default;
 }
 
 /* non highlighted code colors */
-$pre-bg: $base03 !default;
+@if $pre-bg == default {
+  $pre-bg: $base03;
+} @else if $pre-bg != $base03 {
+  $base03: $pre-bg;
+  $base02: lighten($base03, 5);
+}
+
 $pre-border: darken($base02, 5) !default;
 $pre-color: $base1 !default;
 
+@if $pre-border != darken($base02, 5) {
+  $base02: lighten($pre-border, 5);
+}
+@if $pre-color != $base1 {
+  $base1: $pre-color;
+}
 
+$code-selection-color: false !default;
diff --git a/.themes/classic/sass/custom/_colors.scss b/.themes/classic/sass/custom/_colors.scss
index 0771a86..2558d74 100644
--- a/.themes/classic/sass/custom/_colors.scss
+++ b/.themes/classic/sass/custom/_colors.scss
@@ -1,5 +1,9 @@
-// Here you can easily change your sites's color scheme.
-// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works.
+/*
+  Here you can easily change your site's color scheme.
+  To give it a try, uncomment some of the lines below rebuild your blog, and see how it works.
+  Look at sass/base/_theme.scss for more colors you tweak (override them in this file)
+
+  For a handy color picker try http://hslpicker.com */
 
 //$header-bg: #263347;
 //$subtitle-color: lighten($header-bg, 58);
@@ -9,12 +13,31 @@
 //$sidebar-link-color-hover: darken(#7ab662, 9);
 
 
-//To use the light Solarized highlighting theme uncomment this block
-//$base03: $base3;
-//$base02: $base2;
-//$base01: $base1;
-//$base00: $base0;
-//$base0: $base00;
-//$base1: $base01;
-//$base2: $base02;
-//$base3: $base03;
+/* To use the light code highlighting theme uncomment the following line */
+
+//$solarized: light;
+
+/* To adjust the background color uncomment and edit the following line */
+/* If you intend to use a light background, uncomment $solarized: light; above*/
+
+//$pre-bg: $base03;
+
+
+/* For fine control over the syntax highlighting colors edit here */
+
+//$base03:          #002b36; //darkest blue
+//$base02:          #073642; //dark blue
+//$base01:          #586e75; //darkest gray
+//$base00:          #657b83; //dark gray
+//$base0:           #839496; //medium gray
+//$base1:           #93a1a1; //medium light gray
+//$base2:           #eee8d5; //cream
+//$base3:           #fdf6e3; //white
+//$solar-yellow:    #b58900;
+//$solar-orange:    #cb4b16;
+//$solar-red:       #dc322f;
+//$solar-magenta:   #d33682;
+//$solar-violet:    #6c71c4;
+//$solar-blue:      #268bd2;
+//$solar-cyan:      #2aa198;
+//$solar-green:     #859900;
diff --git a/.themes/classic/sass/partials/_syntax.scss b/.themes/classic/sass/partials/_syntax.scss
index 77ac8d7..2e5292a 100644
--- a/.themes/classic/sass/partials/_syntax.scss
+++ b/.themes/classic/sass/partials/_syntax.scss
@@ -4,7 +4,7 @@
     text-align: right;
     font-size: 13px;
     line-height: 1.45em;
-    @if $solarized == light {
+    @if lightness($base03) > lightness(#555) {
       background: lighten($base03, 1) $noise-bg !important;
       border-right: 1px solid darken($base02, 2) !important;
       @include box-shadow(lighten($base03, 2) -1px 0 inset);
@@ -46,7 +46,7 @@ html .gist .gist-file {
    border: 1px solid lighten($base02, 2) !important;
    color: $base01;
    font-size: .7em !important;
-   @if $solarized == light {
+   @if lightness($base03) > lightness(#555) {
      background: lighten($base03, 2) $noise-bg;
      border: 1px solid $pre-border !important;
      border-top: 1px solid lighten($base03, 2) !important;
@@ -107,7 +107,6 @@ p, li {
 }
 
 .pre-code {
-  @include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px);
   font-family: $mono !important;
   overflow: scroll;
   overflow-y: hidden;
@@ -196,7 +195,7 @@ p, li {
 
 $solar-scroll-bg: rgba(#fff, .15);
 $solar-scroll-thumb: rgba(#fff, .2);
-@if $solarized == light {
+@if lightness($base03) > lightness(#555) {
   $solar-scroll-bg: rgba(#000, .15);
   $solar-scroll-thumb: rgba(#000, .15);
 }
@@ -223,31 +222,50 @@ figure.code {
   }
 }
 
+pre {
+  @if $code-selection-color != false {
+    @include selection($code-selection);
+  }
+}
+
 .code-title {
   text-align: center;
   font-size: 13px;
   line-height: 2em;
-  text-shadow: #cbcccc 0 1px 0;
-  color: #474747;
   font-weight: normal;
   margin-bottom: 0;
   @include border-top-radius(5px);
   font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
-  background: #aaaaaa image-url("code_bg.png") top repeat-x;
-  border: 1px solid #565656;
-  border-top-color: #cbcbcb;
-  border-left-color: #a5a5a5;
-  border-right-color: #a5a5a5;
-  border-bottom: 0;
+  background-color: #aaaaaa; // image-url("code_bg.png") top repeat-x;
+  @if lightness($base03) <= lightness(#555) {
+    text-shadow: #cbcccc 0 1px 0;
+    color: #555;
+    @include background-image(linear-gradient(
+      #e0e0e0, #cfcfcf 6%, #b1b1b1 90%, #aaaaaa
+    ));
+    border: 1px solid #a5a5a5 {
+      top-color: #cbcbcb;
+      bottom: 0;
+    }
+  }
+  @else if lightness($base03) > lightness(#555) {
+    text-shadow: #fff 0 1px 0;
+    color: #777;
+    @include background-image(linear-gradient(
+      #fff, #f0f0f0 6%, #e5e5e5 90%, #ddd
+    ));
+    border: 1px solid #c5c5c5 {
+      top-color: #d5d5d5;
+      bottom: 0;
+    }
+  }
 }
 
 .download-source {
   position: absolute; right: .8em;
   @include hover-link;
-  color: #666 !important;
+  color: inherit !important;
   z-index: 1;
   font-size: 13px;
-  text-shadow: #cbcccc 0 1px 0;
   padding-left: 3em;
 }
-