improved flexability of styling code blocks. Improved the light theme.

This commit is contained in:
Brandon Mathis 2012-05-25 11:36:57 -05:00
parent d40eaab07c
commit ae967b264d
3 changed files with 97 additions and 32 deletions

View File

@ -1,11 +1,24 @@
$solarized: dark !default;
$pre-bg: default !default;
$base03: #002b36 !default; //darkest blue $base03: #002b36 !default; //darkest blue
$base02: #073642 !default; //dark blue $base02: #073642 !default; //dark blue
$base01: #586e75 !default; //darkest gray $base01: #586e75 !default; //darkest gray
$base00: #657b83 !default; //dark gray $base00: #657b83 !default; //dark gray
$base0: #839496 !default; //medium gray $base0: #839496 !default; //medium gray
$base1: #93a1a1 !default; //medium light gray $base1: #93a1a1 !default; //medium light gray
$base2: #eee8d5 !default; //cream // Test defaults for cream colors
$base3: #fdf6e3 !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-yellow: #b58900 !default;
$solar-orange: #cb4b16 !default; $solar-orange: #cb4b16 !default;
$solar-red: #dc322f !default; $solar-red: #dc322f !default;
@ -15,10 +28,8 @@ $solar-blue: #268bd2 !default;
$solar-cyan: #2aa198 !default; $solar-cyan: #2aa198 !default;
$solar-green: #859900 !default; $solar-green: #859900 !default;
$solarized: dark !default;
@if $solarized == light { @if $solarized == light {
// Flipping the colors, This is the magic of Solarized.
$_base03: $base03; $_base03: $base03;
$_base02: $base02; $_base02: $base02;
$_base01: $base01; $_base01: $base01;
@ -39,8 +50,21 @@ $solarized: dark !default;
} }
/* non highlighted code colors */ /* 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-border: darken($base02, 5) !default;
$pre-color: $base1 !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;

View File

@ -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; //$header-bg: #263347;
//$subtitle-color: lighten($header-bg, 58); //$subtitle-color: lighten($header-bg, 58);
@ -9,12 +13,31 @@
//$sidebar-link-color-hover: darken(#7ab662, 9); //$sidebar-link-color-hover: darken(#7ab662, 9);
//To use the light Solarized highlighting theme uncomment this block /* To use the light code highlighting theme uncomment the following line */
//$base03: $base3;
//$base02: $base2; //$solarized: light;
//$base01: $base1;
//$base00: $base0; /* To adjust the background color uncomment and edit the following line */
//$base0: $base00; /* If you intend to use a light background, uncomment $solarized: light; above*/
//$base1: $base01;
//$base2: $base02; //$pre-bg: $base03;
//$base3: $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;

View File

@ -4,7 +4,7 @@
text-align: right; text-align: right;
font-size: 13px; font-size: 13px;
line-height: 1.45em; line-height: 1.45em;
@if $solarized == light { @if lightness($base03) > lightness(#555) {
background: lighten($base03, 1) $noise-bg !important; background: lighten($base03, 1) $noise-bg !important;
border-right: 1px solid darken($base02, 2) !important; border-right: 1px solid darken($base02, 2) !important;
@include box-shadow(lighten($base03, 2) -1px 0 inset); @include box-shadow(lighten($base03, 2) -1px 0 inset);
@ -46,7 +46,7 @@ html .gist .gist-file {
border: 1px solid lighten($base02, 2) !important; border: 1px solid lighten($base02, 2) !important;
color: $base01; color: $base01;
font-size: .7em !important; font-size: .7em !important;
@if $solarized == light { @if lightness($base03) > lightness(#555) {
background: lighten($base03, 2) $noise-bg; background: lighten($base03, 2) $noise-bg;
border: 1px solid $pre-border !important; border: 1px solid $pre-border !important;
border-top: 1px solid lighten($base03, 2) !important; border-top: 1px solid lighten($base03, 2) !important;
@ -107,7 +107,6 @@ p, li {
} }
.pre-code { .pre-code {
@include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px);
font-family: $mono !important; font-family: $mono !important;
overflow: scroll; overflow: scroll;
overflow-y: hidden; overflow-y: hidden;
@ -196,7 +195,7 @@ p, li {
$solar-scroll-bg: rgba(#fff, .15); $solar-scroll-bg: rgba(#fff, .15);
$solar-scroll-thumb: rgba(#fff, .2); $solar-scroll-thumb: rgba(#fff, .2);
@if $solarized == light { @if lightness($base03) > lightness(#555) {
$solar-scroll-bg: rgba(#000, .15); $solar-scroll-bg: rgba(#000, .15);
$solar-scroll-thumb: 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 { .code-title {
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
line-height: 2em; line-height: 2em;
text-shadow: #cbcccc 0 1px 0;
color: #474747;
font-weight: normal; font-weight: normal;
margin-bottom: 0; margin-bottom: 0;
@include border-top-radius(5px); @include border-top-radius(5px);
font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
background: #aaaaaa image-url("code_bg.png") top repeat-x; background-color: #aaaaaa; // image-url("code_bg.png") top repeat-x;
border: 1px solid #565656; @if lightness($base03) <= lightness(#555) {
border-top-color: #cbcbcb; text-shadow: #cbcccc 0 1px 0;
border-left-color: #a5a5a5; color: #555;
border-right-color: #a5a5a5; @include background-image(linear-gradient(
border-bottom: 0; #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 { .download-source {
position: absolute; right: .8em; position: absolute; right: .8em;
@include hover-link; @include hover-link;
color: #666 !important; color: inherit !important;
z-index: 1; z-index: 1;
font-size: 13px; font-size: 13px;
text-shadow: #cbcccc 0 1px 0;
padding-left: 3em; padding-left: 3em;
} }