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; } -