From a20dc08e105e85171bf5466cacb475b3bbcd8820 Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Wed, 8 Jun 2011 18:58:00 -0400 Subject: [PATCH] 1. Added support for styled subtitle in header 2. Added javascript detection for placeholder 3. Added backup style for search field with no-placeholder support --- _config.yml | 1 + themes/classic/sass/default/core/_layout.scss | 2 +- themes/classic/sass/default/core/_theme.scss | 1 + themes/classic/sass/default/partials/_header.scss | 8 +++++++- themes/classic/sass/default/partials/_navigation.scss | 11 ++++++++--- themes/classic/source/_includes/header.html | 3 +++ themes/classic/source/javascripts/octopress.js | 7 ++++++- 7 files changed, 27 insertions(+), 6 deletions(-) diff --git a/_config.yml b/_config.yml index ff0bfdb..8fb8984 100644 --- a/_config.yml +++ b/_config.yml @@ -4,6 +4,7 @@ destination: public url: http://yoursite.com title: My Octopress Blog +subtitle: A blogging framework for hackers. author: Your Name subscribe_rss: /atom.xml subscribe_email: http://feedburner.com/asdfasdf diff --git a/themes/classic/sass/default/core/_layout.scss b/themes/classic/sass/default/core/_layout.scss index 21f728d..2fabd92 100644 --- a/themes/classic/sass/default/core/_layout.scss +++ b/themes/classic/sass/default/core/_layout.scss @@ -35,7 +35,7 @@ body { } } > header { - font-size: .8em; + font-size: 1em; padding-top: 1.5em; padding-bottom: 1.5em; } diff --git a/themes/classic/sass/default/core/_theme.scss b/themes/classic/sass/default/core/_theme.scss index 62b1a00..5b95175 100644 --- a/themes/classic/sass/default/core/_theme.scss +++ b/themes/classic/sass/default/core/_theme.scss @@ -10,6 +10,7 @@ $page-bg: #252525; $header-bg: #333; //#0c2e46; //darken(#238bd2, 32); //#263448; //#323232; $header-border: lighten($header-bg, 15); $title-color: #f2f2f2; +$subtitle-color: #aaa; $nav-bg: #ccc;//#3a6ea5; $nav-color: darken($nav-bg, 38); diff --git a/themes/classic/sass/default/partials/_header.scss b/themes/classic/sass/default/partials/_header.scss index 63a58c6..4cc92e4 100644 --- a/themes/classic/sass/default/partials/_header.scss +++ b/themes/classic/sass/default/partials/_header.scss @@ -1,5 +1,5 @@ body > header { - background-color: $header_bg; + background-color: $header-bg; h1 { display: inline-block; margin: 0; @@ -8,4 +8,10 @@ body > header { text-decoration: none; } } + h2 { + margin: .2em 0 0; + @extend .sans; + font-size: 1em; + color: $subtitle-color; + } } diff --git a/themes/classic/sass/default/partials/_navigation.scss b/themes/classic/sass/default/partials/_navigation.scss index eeafb92..4abb6a2 100644 --- a/themes/classic/sass/default/partials/_navigation.scss +++ b/themes/classic/sass/default/partials/_navigation.scss @@ -12,9 +12,9 @@ body > nav { @include background-clip(padding-box); margin: 0; padding: 0; .search { - padding: .25em .5em 0; + padding: .3em .5em 0; font-size: .85em; - line-height: 1em; + line-height: 1.1em; width: 95%; @include border-radius(.5em); @include background-clip(padding-box); @@ -41,7 +41,6 @@ body > nav { ul { @include horizontal-list(0); float: left; - //float: right; display: block; padding-top: .25em; } @@ -92,6 +91,12 @@ body > nav { } } } +.no-placeholder { + body > nav .search { + background: lighten($nav-bg, 15) image-url('search.png') .3em .25em no-repeat; + text-indent: 1.3em; + } +} .maskImage { ul[role=subscription] { li, a { border: 0; padding: 0; }} a[rel=subscribe-rss]{ diff --git a/themes/classic/source/_includes/header.html b/themes/classic/source/_includes/header.html index 4e0519e..e08da6d 100644 --- a/themes/classic/source/_includes/header.html +++ b/themes/classic/source/_includes/header.html @@ -1 +1,4 @@

{{ site.title }}

+{% if site.subtitle %} +

{{ site.subtitle }}

+{% endif %} diff --git a/themes/classic/source/javascripts/octopress.js b/themes/classic/source/javascripts/octopress.js index 68e5139..dc391aa 100644 --- a/themes/classic/source/javascripts/octopress.js +++ b/themes/classic/source/javascripts/octopress.js @@ -24,12 +24,17 @@ function addSidebarToggler() { function testFeatures() { var features = ['maskImage']; $(features).map(function(feature){ - if(Modernizr.testAllProps(feature)) { + if (Modernizr.testAllProps(feature)) { $('html').addClass(feature); } else { $('html').addClass('no-'+feature); } }); + if ("placeholder" in document.createElement("input")) { + $('html').addClass('placeholder'); + } else { + $('html').addClass('no-placeholder'); + } } function addDivLines(){