From 21813059f255dcd338d4cc42aad51700126d6058 Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Fri, 17 Jun 2011 22:24:48 -0400 Subject: 1. Replaced Rdiscount in favor of Kramdown (better html5 support) for markdown processing. 2. Added updated instructions to the README 3. Removed unused media css directories 4. Improved use of color variables for page theming. 5. Improved Typography and blog styling. 6. Added support for simple pre and code styles 7. Misc styling and markup improvements. --- themes/classic/sass/default/core/_layout.scss | 8 +- themes/classic/sass/default/core/_theme.scss | 44 ++++--- themes/classic/sass/default/core/_typography.scss | 14 +-- themes/classic/sass/default/media/_480.scss | 26 ---- themes/classic/sass/default/media/_768.scss | 8 -- themes/classic/sass/default/media/_992.scss | 19 --- themes/classic/sass/default/partials/_blog.scss | 12 +- themes/classic/sass/default/partials/_footer.scss | 8 +- themes/classic/sass/default/partials/_header.scss | 1 + themes/classic/sass/default/partials/_page.scss | 2 +- themes/classic/sass/default/partials/_sidebar.scss | 14 ++- themes/classic/sass/default/partials/_syntax.scss | 46 ++++--- themes/classic/sass/default/partials/_twitter.scss | 8 +- themes/classic/source/_includes/article.html | 38 +++--- themes/classic/source/_includes/header.html | 10 +- themes/classic/source/archive.html | 2 +- .../source/fonts/adellebasic_bold-webfont.eot | Bin 13694 -> 0 bytes .../source/fonts/adellebasic_bold-webfont.svg | 139 --------------------- .../source/fonts/adellebasic_bold-webfont.ttf | Bin 24072 -> 0 bytes .../source/fonts/adellebasic_bold-webfont.woff | Bin 15604 -> 0 bytes 20 files changed, 126 insertions(+), 273 deletions(-) delete mode 100644 themes/classic/sass/default/media/_480.scss delete mode 100644 themes/classic/sass/default/media/_768.scss delete mode 100644 themes/classic/sass/default/media/_992.scss delete mode 100755 themes/classic/source/fonts/adellebasic_bold-webfont.eot delete mode 100755 themes/classic/source/fonts/adellebasic_bold-webfont.svg delete mode 100755 themes/classic/source/fonts/adellebasic_bold-webfont.ttf delete mode 100755 themes/classic/source/fonts/adellebasic_bold-webfont.woff (limited to 'themes') diff --git a/themes/classic/sass/default/core/_layout.scss b/themes/classic/sass/default/core/_layout.scss index 2fabd928..e1a271b2 100644 --- a/themes/classic/sass/default/core/_layout.scss +++ b/themes/classic/sass/default/core/_layout.scss @@ -1,9 +1,9 @@ $default-border-radius: 4px; $pad-min: 18px; -$pad-narrow: 18px; -$pad-medium: 24px; -$pad-wide: 30px; +$pad-narrow: 20px; +$pad-medium: 35px; +$pad-wide: 55px; $sidebar-width-medium: 240px; $sidebar-pad-medium: 15px; $sidebar-pad-wide: 20px; @@ -117,8 +117,6 @@ body { } 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; diff --git a/themes/classic/sass/default/core/_theme.scss b/themes/classic/sass/default/core/_theme.scss index 6d73f2e0..6c82ae2a 100644 --- a/themes/classic/sass/default/core/_theme.scss +++ b/themes/classic/sass/default/core/_theme.scss @@ -1,37 +1,53 @@ -// Link Colors +// Main Link Colors $link-color: lighten(#165b94, 3); -$link-color-hover: darken(#165b94, 5); +$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); // Main Section Colors $body-color: #333333; $light-text: #999999; $page-bg: #252525; +$article-border: #eeeeee; +$main-bg: #f5f5f5; -$header-bg: #333; //#0c2e46; //darken(#238bd2, 32); //#263448; //#323232; +$header-bg: #333; $header-border: lighten($header-bg, 15); $title-color: #f2f2f2; $subtitle-color: #aaa; -$nav-bg: #ccc;//#3a6ea5; +$type-border: #ddd; +$type-color-light: #555; +$type-color: #222; + +$nav-bg: #ccc; $nav-color: darken($nav-bg, 38); $nav-color-hover: darken($nav-color, 25); $nav-border: darken($nav-bg, 10); $nav-border-top: lighten($nav-bg, 15); -$nav-border-bottom: darken($nav-bg, 25);//darken($nav-bg, 5); +$nav-border-bottom: darken($nav-bg, 25); $nav-border-left: darken($nav-bg, 11); $nav-border-right: lighten($nav-bg, 7); -$sidebar-bg: #eee; //#f8f8f8; //desaturate(change-color(#e8f4f4, $hue: 207), 100); //mix(#f5f5f5, aqua, 93%); +$sidebar-bg: #eee; +$sidebar-color: change-color(mix($type-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2); +$sidebar-border: desaturate(darken($sidebar-bg, 7), 10); $sidebar-border: darken($sidebar-bg, 7); - -// Blog -$article-border: #eeeeee; -$main-bg: #f9f8f6; +$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); +$twitter-status-link: lighten($sidebar-link-color-subdued, 15); $footer-color: #999999; -//$footer-bg: #444444; -$footer-bg: $nav-bg;//$page-bg; -$footer-border: $nav-border-top;//$page-bg; +$footer-bg: #ccc; +$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-link-color: darken($footer-bg, 38); +$footer-link-color-hover: darken($footer-color, 25); +$page-border-bottom: darken($footer-bg, 5); // Form Colors $fieldset-bg: #ececec; @@ -48,6 +64,6 @@ $textinput-border-right: #c3c3c3; $textinput-border-focus: #989898; #articles a, #articles + aside a { - @include link-colors($link-color, $hover: saturate(darken($link_color, 15), 20), $focus: saturate(darken($link_color, 15), 20), $visited: darken(adjust_hue($link_color, 70), 10)); + @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active); } a { @include transition(color, .5s); } diff --git a/themes/classic/sass/default/core/_typography.scss b/themes/classic/sass/default/core/_typography.scss index 13103378..78abb6e4 100644 --- a/themes/classic/sass/default/core/_typography.scss +++ b/themes/classic/sass/default/core/_typography.scss @@ -1,11 +1,7 @@ -$type-border: #ddd; -$type-color-light: #555; -$type-color: #000; -$blockquote: $type-border !default; //darken($type-border, 20) !default; +$blockquote: $type-border !default; $mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; // Fonts -//@include font-face("Adelle", font-files("adellebasic_bold-webfont.woff", woff, "adellebasic_bold-webfont.ttf", truetype, "adellebasic_bold-webfont.svg#webfontKykxqSyz", svg), $eot: "adellebasic_bold-webfont.eot" ); .heading { font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif; } @@ -14,7 +10,7 @@ $mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; .mono { font-family: $mono; } body > header h1 { - font-size: 2em; + font-size: 3em; @extend .heading; font-weight: normal; line-height: 1.2em; @@ -31,10 +27,10 @@ body { @extend .heading; text-rendering: optimizelegibility; margin-bottom: 1em; - font-weight: normal; + font-weight: bold; } h1 { - font-size: 2.4em; + font-size: 3.2em; line-height: 1.2em } h2, section h1 { @@ -59,8 +55,6 @@ ul{ list-style-type: disc; } ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } } ul ul, ol ol { margin-left: 1.75em; } -li { margin-bottom: .5em; } - strong { font-weight: bold; } em { font-style: italic; } diff --git a/themes/classic/sass/default/media/_480.scss b/themes/classic/sass/default/media/_480.scss deleted file mode 100644 index fe1aa64d..00000000 --- a/themes/classic/sass/default/media/_480.scss +++ /dev/null @@ -1,26 +0,0 @@ -#articles + aside { display: none; } -body > nav { - .site-serch { - width: 10em; - .search { width: 100%; background-color: #f6f6f6; } - } -} - -body > nav, body > footer, body > div > div { - padding-left: .5em; - padding-right: .5em; -} -body > * { font-size: .8em; } -body > header { - font-size: .5em; - padding: .4em .5em; -} -header, #{headings()} { text-align: center; } -.site-search { - margin: .15em 0 0; padding: 0; - .search { - padding: .3em .8em 0; - line-height: 1.5em; - font-size: .85em; - } -} diff --git a/themes/classic/sass/default/media/_768.scss b/themes/classic/sass/default/media/_768.scss deleted file mode 100644 index 67e7952d..00000000 --- a/themes/classic/sass/default/media/_768.scss +++ /dev/null @@ -1,8 +0,0 @@ -//body { - //padding: 0 1em; -//} -//body > header { - //font-size: 1em; - //padding-top: .5em; - //padding-bottom: .5em; -//} diff --git a/themes/classic/sass/default/media/_992.scss b/themes/classic/sass/default/media/_992.scss deleted file mode 100644 index bacd81d2..00000000 --- a/themes/classic/sass/default/media/_992.scss +++ /dev/null @@ -1,19 +0,0 @@ -//@include media-layout(1.2em, 20em, 1em); -//body > * { - //margin: 0 auto; - //font-size: 1em; -//} -//body { - //max-width: 1280px; - //margin: 0 auto; - //> header { - //padding-top: 2em; - //padding-bottom: 1em; - //} - //> nav { - //border-left: 1px solid $header-border; - //border-right: 1px solid $header-border; - //@include border-top-radius(.6em); - //} -//} - diff --git a/themes/classic/sass/default/partials/_blog.scss b/themes/classic/sass/default/partials/_blog.scss index 916e78c8..1f1a4a86 100644 --- a/themes/classic/sass/default/partials/_blog.scss +++ b/themes/classic/sass/default/partials/_blog.scss @@ -1,11 +1,18 @@ $border: inline-image('dotted-border.png'); #articles { + @media only screen and (max-width: 992px) { + ul, ol { margin-left: 1.4em; } + } > article { padding-bottom: 1em; &:last-child { margin-bottom: 0; border-bottom: none; } h2 { padding-top: 0.8em; background: $border top left repeat-x; + &:first-child { + background: none; + padding-top: 0; + } } .byline + time:before, .byline + time +time:before { content: "\2022 "; @@ -31,7 +38,6 @@ $border: inline-image('dotted-border.png'); margin: 0; font-style: italic; @extend .sans; - //font-family: "Georgia", Palatino, Times, "Times New Roman"; } } .entry-content { @@ -60,6 +66,10 @@ $border: inline-image('dotted-border.png'); } } } + header.feature h1 { + font-size: 2.0em; font-style: italic; + line-height: 1.3em; + } #disqus_thread { } .meta { border-bottom: 1px dashed #dddddd; diff --git a/themes/classic/sass/default/partials/_footer.scss b/themes/classic/sass/default/partials/_footer.scss index a04b3df9..019bc2a4 100644 --- a/themes/classic/sass/default/partials/_footer.scss +++ b/themes/classic/sass/default/partials/_footer.scss @@ -1,11 +1,11 @@ body > footer { @extend .sans; font-size: .8em; - color: $nav-color; + color: $footer-color; text-shadow: lighten($footer-bg, 5) 0 1px; background-color: $footer-bg; - @include background(linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11))); - border-top: 1px solid $footer-border; + @include background(linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11))); + border-top: 1px solid $footer-border-top; position: relative; padding-top: 1em; padding-bottom: 1em; @@ -13,7 +13,7 @@ body > footer { @include border-bottom-radius(.4em); z-index: 1; a { - @include link-colors($nav-color, $nav-color-hover); + @include link-colors($footer-link-color, $footer-link-color-hover); } p:last-child { margin-bottom: 0; } } diff --git a/themes/classic/sass/default/partials/_header.scss b/themes/classic/sass/default/partials/_header.scss index 4cc92e4f..9cc4601f 100644 --- a/themes/classic/sass/default/partials/_header.scss +++ b/themes/classic/sass/default/partials/_header.scss @@ -13,5 +13,6 @@ body > header { @extend .sans; font-size: 1em; color: $subtitle-color; + font-weight: normal; } } diff --git a/themes/classic/sass/default/partials/_page.scss b/themes/classic/sass/default/partials/_page.scss index cb0aa27a..8bda58e1 100644 --- a/themes/classic/sass/default/partials/_page.scss +++ b/themes/classic/sass/default/partials/_page.scss @@ -5,7 +5,7 @@ body { border: 0 0 1px 0 solid darken($page-bg, 5); > div { background-color: $sidebar-bg; - border-bottom: 1px solid $nav-border-bottom; + border-bottom: 1px solid $page-border-bottom; > div { background-color: $main-bg; border-right: 1px solid $sidebar-border; diff --git a/themes/classic/sass/default/partials/_sidebar.scss b/themes/classic/sass/default/partials/_sidebar.scss index 046068d1..8c38e2a6 100644 --- a/themes/classic/sass/default/partials/_sidebar.scss +++ b/themes/classic/sass/default/partials/_sidebar.scss @@ -1,12 +1,14 @@ .side-shadow-border { - @include box-shadow(#fff 0 1px); + @include box-shadow(lighten($sidebar-bg, 5) 0 1px); } #articles + aside { + color: $sidebar-color; padding-top: 1.2em; + text-shadow: lighten($sidebar-bg, 8) 0 1px; section { @extend .sans; font-size: .8em; - line-height: 1.5em; + line-height: 1.4em; margin-bottom: 1.5em; h1 { margin: 1.5em 0 0; @@ -35,7 +37,9 @@ color: inherit; @include transition(color, .5s); } - &:hover a, &:hover #tweets a { color: $link-color; } + &:hover a, &:hover #tweets a { color: $sidebar-link-color; + &:hover { color: $sidebar-link-color-hover; } + } #recent_posts { time { text-transform: uppercase; @@ -48,8 +52,8 @@ @import "delicious"; } .aside-alt-link { - color: #999; + color: $sidebar-link-color-subdued; &:hover { - color: #555; + color: $sidebar-link-color-subdued-hover; } } diff --git a/themes/classic/sass/default/partials/_syntax.scss b/themes/classic/sass/default/partials/_syntax.scss index 2258ac46..b249559f 100644 --- a/themes/classic/sass/default/partials/_syntax.scss +++ b/themes/classic/sass/default/partials/_syntax.scss @@ -26,15 +26,16 @@ $green: #859900; //$base3: $base03; .highlight, html .gist .gist-file .gist-syntax .gist-highlight { - pre.line-numbers { + .line-numbers { text-align: right; + font-size: .8em; + line-height: 1.45em; background: $base02 !important; border-right: 1px solid darken($base03, 2) !important; @include box-shadow(lighten($base02, 2) -1px 0 inset); text-shadow: darken($base02, 10) 0 -1px; span { color: $base01 !important; } - padding-left: .8em !important; - padding-right: .8em !important; + padding: .8em !important; } } html .gist .gist-file { @@ -47,10 +48,7 @@ html .gist .gist-file { .gist-highlight{ background: $base03 !important; pre { - @extend .pre; - } - pre.line-numbers { - + @extend .pre-code; } } } @@ -79,19 +77,39 @@ html .gist .gist-file { } } } -pre { @extend .pre; } +pre { + background: #fff; + border: 1px solid #ddd; + @include border-radius(.4em); + @extend .mono; + line-height: 1.45em; + font-size: .8em; + margin-bottom: 1.5em; + padding: .4em .8em; + color: #555; +} -.pre { +p code { @extend .mono; + display: inline-block; + white-space: no-wrap; + background: #fff; + font-size: .9em; + color: #555; + border: 1px solid #ddd; + @include border-radius(.4em); + padding: 0 .3em; +} + +.pre-code { @include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px); - font-size: .8em; overflow: scroll; overflow-y: hidden; + display: block; + padding: .8em !important; overflow-x: auto; line-height: 1.45em; - padding: 1em 1.2em !important; background: $base03 !important; - code { background: $base03 !important; overflow: hidden; } color: $base1 !important; span { color: $base1 !important; } span { font-style: normal !important; font-weight: normal !important; } @@ -162,12 +180,13 @@ pre { @extend .pre; } } .highlight, .gist-highlight { + pre { background: none; @include border-radius(none); border: none; padding: 0; margin-bottom: 0; } margin-bottom: 1.5em; background: $base03; overflow-y: hidden; overflow-x: auto; - pre { overflow: visible; } } +.highlight code { @extend .pre-code; background: #000;} figure { margin-bottom: 1.5em; figcaption { @@ -201,7 +220,6 @@ h3.filename { @extend .code-title; } position: absolute; right: .8em; @include hover-link; color: #666 !important; - &:hover { color: $link-color !important; } z-index: 1; font-size: 13px; text-shadow: #cbcccc 0 1px 0; diff --git a/themes/classic/sass/default/partials/_twitter.scss b/themes/classic/sass/default/partials/_twitter.scss index de7a6930..36c6f62b 100644 --- a/themes/classic/sass/default/partials/_twitter.scss +++ b/themes/classic/sass/default/partials/_twitter.scss @@ -9,13 +9,13 @@ background: inline-image('bird_32_gray_fail.png') no-repeat center .5em; } } - a { color: #666; @include hover-link; } + a { color: $sidebar-link-color-subdued; @include hover-link; } p { position: relative; padding-right: 1em; } - a[href*='status']{ - color: #aaa; + a[href*=status]{ + color: $twitter-status-link; float: right; padding: 0 0 .1em 1em; position: relative; right: -1.3em; @@ -23,7 +23,7 @@ font-size: .7em; span { font-size: 1.5em; } &:hover { - color: #555; + color: $sidebar-link-color-subdued-hover; text-decoration: none; } } diff --git a/themes/classic/source/_includes/article.html b/themes/classic/source/_includes/article.html index 92c06024..764e36d1 100644 --- a/themes/classic/source/_includes/article.html +++ b/themes/classic/source/_includes/article.html @@ -3,24 +3,26 @@ {% else %} {% assign author = site.author %} {% endif %} -
- {% if index %} -

{{ page.title | titlecase }}

- {% else %} -

{{ page.title | titlecase }}

- {% endif %} - {% unless page.nometa %} -

- {% if page.date %} - - {% endif %} - {% if page.updated %} - - {% endif %} - {% if author %}By {{ author }}{% endif %} -

- {% endunless %} -
+{% unless page.no_header %} +
+ {% if index %} +

{{ page.title | titlecase }}

+ {% else %} +

{{ page.title | titlecase }}

+ {% endif %} + {% unless page.no_meta %} +

+ {% if page.date %} + + {% endif %} + {% if page.updated %} + + {% endif %} + {% if author %}By {{ author }}{% endif %} +

+ {% endunless %} +
+{% endunless %} {% if index %}
{{ content | exerpt(content, page.url, 'Continue reading »') | smart_quotes }}
{% else %} diff --git a/themes/classic/source/_includes/header.html b/themes/classic/source/_includes/header.html index e08da6dc..de153086 100644 --- a/themes/classic/source/_includes/header.html +++ b/themes/classic/source/_includes/header.html @@ -1,4 +1,6 @@ -

{{ site.title }}

-{% if site.subtitle %} -

{{ site.subtitle }}

-{% endif %} +
+

{{ site.title }}

+ {% if site.subtitle %} +

{{ site.subtitle }}

+ {% endif %} +
diff --git a/themes/classic/source/archive.html b/themes/classic/source/archive.html index 98518aa5..be373762 100644 --- a/themes/classic/source/archive.html +++ b/themes/classic/source/archive.html @@ -1,7 +1,7 @@ --- layout: page title: Blog Archive -nometa: true +no_meta: true --- {% for post in site.posts reverse %} {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %} diff --git a/themes/classic/source/fonts/adellebasic_bold-webfont.eot b/themes/classic/source/fonts/adellebasic_bold-webfont.eot deleted file mode 100755 index 5bace32f..00000000 Binary files a/themes/classic/source/fonts/adellebasic_bold-webfont.eot and /dev/null differ diff --git a/themes/classic/source/fonts/adellebasic_bold-webfont.svg b/themes/classic/source/fonts/adellebasic_bold-webfont.svg deleted file mode 100755 index c259c24c..00000000 --- a/themes/classic/source/fonts/adellebasic_bold-webfont.svg +++ /dev/null @@ -1,139 +0,0 @@ - - - - -This is a custom SVG webfont generated by Font Squirrel. -Copyright : Copyright c 2009 by TypeTogether All rights reserved -Designer : Veronika Burian Jos Scaglione -Foundry : TypeTogether -Foundry URL : wwwtypetogethercom - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/themes/classic/source/fonts/adellebasic_bold-webfont.ttf b/themes/classic/source/fonts/adellebasic_bold-webfont.ttf deleted file mode 100755 index 7e70d0de..00000000 Binary files a/themes/classic/source/fonts/adellebasic_bold-webfont.ttf and /dev/null differ diff --git a/themes/classic/source/fonts/adellebasic_bold-webfont.woff b/themes/classic/source/fonts/adellebasic_bold-webfont.woff deleted file mode 100755 index 07ae59a2..00000000 Binary files a/themes/classic/source/fonts/adellebasic_bold-webfont.woff and /dev/null differ -- cgit v1.2.1