diff --git a/Guardfile b/Guardfile deleted file mode 100644 index ea16c62..0000000 --- a/Guardfile +++ /dev/null @@ -1,3 +0,0 @@ -guard 'livereload', :api_version => '1.6' do - watch(/public\/\S[css|js|html|png|jpg|gif]/) -end diff --git a/themes/classic/sass/default/_partials.scss b/themes/classic/sass/default/_partials.scss deleted file mode 100644 index 4ca98c0..0000000 --- a/themes/classic/sass/default/_partials.scss +++ /dev/null @@ -1,12 +0,0 @@ -//@import "partials/shared"; -//@import "partials/search"; - -/* layout partials */ -@import "partials/header"; -@import "partials/navigation"; -@import "partials/page"; -@import "partials/sidebar"; -@import "partials/blog"; -@import "partials/footer"; - -@import "partials/syntax"; diff --git a/themes/classic/sass/default/_style.scss b/themes/classic/sass/default/_style.scss index 051e003..b83159a 100644 --- a/themes/classic/sass/default/_style.scss +++ b/themes/classic/sass/default/_style.scss @@ -2,7 +2,18 @@ @include reset-html5; @import "core/utilities"; +@import "partials/solarized"; +@import "custom/colors"; @import "core/theme"; @import "core/layout"; @import "core/typography"; -@import "partials"; + +/* layout partials */ +@import "partials/header"; +@import "partials/navigation"; +@import "partials/page"; +@import "partials/sidebar"; +@import "partials/blog"; +@import "partials/footer"; +@import "partials/syntax"; +@import "custom/styles"; diff --git a/themes/classic/sass/default/core/_layout.scss b/themes/classic/sass/default/core/_layout.scss index e1a271b..339c049 100644 --- a/themes/classic/sass/default/core/_layout.scss +++ b/themes/classic/sass/default/core/_layout.scss @@ -11,7 +11,6 @@ $sidebar-width-wide: 300px; .group { @include pie-clearfix; } -//html { } body { -webkit-text-size-adjust: none; max-width: 1350px; @@ -42,7 +41,14 @@ body { } .toggle-sidebar { display: none; } -#articles { width: 100%; + aside { display: none; } } +#articles { width: 100%; + + aside { + float: none; + padding: 0 $pad-min 1px; + background-color: $sidebar-bg; + border-top: 1px solid $sidebar-border; + } +} @media only screen and (min-width: 550px) { body > header { font-size: 1em; } @@ -68,7 +74,7 @@ body { + aside { width: $sidebar-width-medium - $sidebar-pad-medium*2; padding: 0 $sidebar-pad-medium $sidebar-pad-medium; - display: block; + background: none; float: left; margin: 0 -100% 0 0; } @@ -112,14 +118,14 @@ body { } @media only screen and (min-width: 992px) { - body > header { - font-size: 1.3em; - } + body > header { font-size: 1.3em; } body > nav + div > div { margin-right: $sidebar-width-wide; } #articles { + padding-top: $pad-wide/2; + padding-bottom: $pad-wide/2; + aside { width: $sidebar-width-wide - $sidebar-pad-wide*2; - padding: 0 $sidebar-pad-wide $sidebar-pad-wide; + padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide; } } } diff --git a/themes/classic/sass/default/core/_theme.scss b/themes/classic/sass/default/core/_theme.scss index 6c82ae2..1e54b12 100644 --- a/themes/classic/sass/default/core/_theme.scss +++ b/themes/classic/sass/default/core/_theme.scss @@ -1,50 +1,54 @@ // Main Link Colors -$link-color: lighten(#165b94, 3); -$link-color-hover: adjust-hue($link-color, -200); -$link-color-visited: darken(adjust_hue($link_color, 70), 10); -$link-color-active: darken($link-color-hover, 15); +$link-color: lighten(#165b94, 3) !default; +$link-color-hover: adjust-hue($link-color, -200) !default; +$link-color-visited: darken(adjust_hue($link_color, 70), 10) !default; +$link-color-active: darken($link-color-hover, 15) !default; // Main Section Colors -$body-color: #333333; -$light-text: #999999; -$page-bg: #252525; -$article-border: #eeeeee; -$main-bg: #f5f5f5; +$body-color: #333333 !default; +$light-text: #999999 !default; +$page-bg: #252525 !default; +$article-border: #eeeeee !default; +$main-bg: #f5f5f5 !default; -$header-bg: #333; -$header-border: lighten($header-bg, 15); -$title-color: #f2f2f2; -$subtitle-color: #aaa; +$header-bg: #333 !default; +$header-border: lighten($header-bg, 15) !default; +$title-color: #f2f2f2 !default; +$subtitle-color: #aaa !default; -$type-border: #ddd; -$type-color-light: #555; -$type-color: #222; +$type-color: #222 !default; +$type-color-light: #555 !default; +$type-border: #ddd !default; -$nav-bg: #ccc; -$nav-color: darken($nav-bg, 38); + +/* Navigation */ +$nav-bg: #ccc !default; +$nav-color: darken($nav-bg, 38) !default; $nav-color-hover: darken($nav-color, 25); +$nav-placeholder: desaturate(darken($nav-bg, 10), 15); $nav-border: darken($nav-bg, 10); $nav-border-top: lighten($nav-bg, 15); $nav-border-bottom: darken($nav-bg, 25); $nav-border-left: darken($nav-bg, 11); $nav-border-right: lighten($nav-bg, 7); -$sidebar-bg: #eee; -$sidebar-color: change-color(mix($type-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2); +/* Sidebar colors */ +$sidebar-bg: #eee !default; +$sidebar-link-color: $link-color !default; +$sidebar-link-color-hover: $link-color-hover !default; +$sidebar-color: change-color(mix($type-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default; $sidebar-border: desaturate(darken($sidebar-bg, 7), 10); $sidebar-border: darken($sidebar-bg, 7); -$sidebar-link-color: $link-color; -$sidebar-link-color-hover: $link-color-hover; $sidebar-link-color-subdued: lighten($sidebar-color, 20); -$sidebar-link-color-subdued-hover: $link-color-hover;//darken($sidebar-link-color-subdued, 20); +$sidebar-link-color-subdued-hover: $sidebar-link-color-hover; $twitter-status-link: lighten($sidebar-link-color-subdued, 15); -$footer-color: #999999; -$footer-bg: #ccc; +$footer-color: #999999 !default; +$footer-bg: #ccc !default; $footer-color: darken($footer-bg, 38); $footer-color-hover: darken($footer-color, 10); -$footer-placeholder: desaturate(darken($footer-bg, 10), 15); $footer-border-top: lighten($footer-bg, 15); +$footer-border-bottom: darken($footer-bg, 15); $footer-link-color: darken($footer-bg, 38); $footer-link-color-hover: darken($footer-color, 25); $page-border-bottom: darken($footer-bg, 5); diff --git a/themes/classic/sass/default/custom/_colors.scss b/themes/classic/sass/default/custom/_colors.scss new file mode 100644 index 0000000..b6e541c --- /dev/null +++ b/themes/classic/sass/default/custom/_colors.scss @@ -0,0 +1,22 @@ +// 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. + +//$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); + + +//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; +*/ diff --git a/themes/classic/sass/default/custom/_styles.scss b/themes/classic/sass/default/custom/_styles.scss new file mode 100644 index 0000000..91ffccc --- /dev/null +++ b/themes/classic/sass/default/custom/_styles.scss @@ -0,0 +1,2 @@ +// This File is imported last, and will override other styles in the cascade +// Add styles here to make changes without digging in too much diff --git a/themes/classic/sass/default/partials/_search.scss b/themes/classic/sass/default/partials/_search.scss deleted file mode 100644 index e69de29..0000000 diff --git a/themes/classic/sass/default/partials/_solarized.scss b/themes/classic/sass/default/partials/_solarized.scss new file mode 100644 index 0000000..4952120 --- /dev/null +++ b/themes/classic/sass/default/partials/_solarized.scss @@ -0,0 +1,16 @@ +$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 +$yellow: #b58900; +$orange: #cb4b16; +$red: #dc322f; +$magenta: #d33682; +$violet: #6c71c4; +$blue: #268bd2; +$cyan: #2aa198; +$green: #859900; diff --git a/themes/classic/sass/default/partials/_syntax.scss b/themes/classic/sass/default/partials/_syntax.scss index b249559..22f5eb0 100644 --- a/themes/classic/sass/default/partials/_syntax.scss +++ b/themes/classic/sass/default/partials/_syntax.scss @@ -1,30 +1,3 @@ -$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 -$yellow: #b58900; -$orange: #cb4b16; -$red: #dc322f; -$magenta: #d33682; -$violet: #6c71c4; -$blue: #268bd2; -$cyan: #2aa198; -$green: #859900; - -// If you prefer light colors, uncomment the following block to change themes -//$base03: $base3; -//$base02: $base2; -//$base01: $base1; -//$base00: $base0; -//$base0: $base00; -//$base1: $base01; -//$base2: $base02; -//$base3: $base03; - .highlight, html .gist .gist-file .gist-syntax .gist-highlight { .line-numbers { text-align: right;