From c5f044312630113d3a470156fb5ee3955f919f39 Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Fri, 25 May 2012 12:52:50 -0500 Subject: [PATCH] updated to latest, changed code highlighting to light theme --- sass/base/_solarized.scss | 35 ++++++++++++++++++++++----- sass/custom/_colors.scss | 47 ++++++++++++++++++++++++++++--------- sass/partials/_syntax.scss | 48 ++++++++++++++++++++++++++------------ 3 files changed, 98 insertions(+), 32 deletions(-) diff --git a/sass/base/_solarized.scss b/sass/base/_solarized.scss index 8903887..da5ca9e 100644 --- a/sass/base/_solarized.scss +++ b/sass/base/_solarized.scss @@ -1,11 +1,23 @@ +$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: #f2f2f2 !default; //cream -$base3: #ffffff !default; //white +$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 +27,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 +49,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/sass/custom/_colors.scss b/sass/custom/_colors.scss index 538547c..a97fd98 100644 --- a/sass/custom/_colors.scss +++ b/sass/custom/_colors.scss @@ -1,18 +1,43 @@ +/* + 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); $nav-bg: desaturate(lighten(#8fc17a, 18), 5); $sidebar-bg: desaturate(#eceff5, 8); $sidebar-link-color: saturate(#526f9a, 10); $sidebar-link-color-hover: darken(#7ab662, 9); -//$pre-bg: darken($header-bg, 2); -//$base03: $pre-bg; -//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/sass/partials/_syntax.scss b/sass/partials/_syntax.scss index 77ac8d7..2e5292a 100644 --- a/sass/partials/_syntax.scss +++ b/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; } -