diff options
author | Brandon Mathis <brandon@imathis.com> | 2011-06-17 22:24:48 -0400 |
---|---|---|
committer | Brandon Mathis <brandon@imathis.com> | 2011-06-17 22:24:48 -0400 |
commit | 21813059f255dcd338d4cc42aad51700126d6058 (patch) | |
tree | 7503e24c9c0858dfc9961df7063b817f5688df57 /themes/classic/sass | |
parent | b0405cc3c2f901e20d8aa0bc1ed8c499065f0c8b (diff) | |
download | my_new_personal_website-21813059f255dcd338d4cc42aad51700126d6058.tar.xz my_new_personal_website-21813059f255dcd338d4cc42aad51700126d6058.zip |
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.
Diffstat (limited to 'themes/classic/sass')
-rw-r--r-- | themes/classic/sass/default/core/_layout.scss | 8 | ||||
-rw-r--r-- | themes/classic/sass/default/core/_theme.scss | 44 | ||||
-rw-r--r-- | themes/classic/sass/default/core/_typography.scss | 14 | ||||
-rw-r--r-- | themes/classic/sass/default/media/_480.scss | 26 | ||||
-rw-r--r-- | themes/classic/sass/default/media/_768.scss | 8 | ||||
-rw-r--r-- | themes/classic/sass/default/media/_992.scss | 19 | ||||
-rw-r--r-- | themes/classic/sass/default/partials/_blog.scss | 12 | ||||
-rw-r--r-- | themes/classic/sass/default/partials/_footer.scss | 8 | ||||
-rw-r--r-- | themes/classic/sass/default/partials/_header.scss | 1 | ||||
-rw-r--r-- | themes/classic/sass/default/partials/_page.scss | 2 | ||||
-rw-r--r-- | themes/classic/sass/default/partials/_sidebar.scss | 14 | ||||
-rw-r--r-- | themes/classic/sass/default/partials/_syntax.scss | 46 | ||||
-rw-r--r-- | themes/classic/sass/default/partials/_twitter.scss | 8 |
13 files changed, 99 insertions, 111 deletions
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; } } |