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
This commit is contained in:
Brandon Mathis 2011-06-08 18:58:00 -04:00
parent 901f4d7f29
commit a20dc08e10
7 changed files with 27 additions and 6 deletions

View File

@ -4,6 +4,7 @@ destination: public
url: http://yoursite.com url: http://yoursite.com
title: My Octopress Blog title: My Octopress Blog
subtitle: A blogging framework for hackers.
author: Your Name author: Your Name
subscribe_rss: /atom.xml subscribe_rss: /atom.xml
subscribe_email: http://feedburner.com/asdfasdf subscribe_email: http://feedburner.com/asdfasdf

View File

@ -35,7 +35,7 @@ body {
} }
} }
> header { > header {
font-size: .8em; font-size: 1em;
padding-top: 1.5em; padding-top: 1.5em;
padding-bottom: 1.5em; padding-bottom: 1.5em;
} }

View File

@ -10,6 +10,7 @@ $page-bg: #252525;
$header-bg: #333; //#0c2e46; //darken(#238bd2, 32); //#263448; //#323232; $header-bg: #333; //#0c2e46; //darken(#238bd2, 32); //#263448; //#323232;
$header-border: lighten($header-bg, 15); $header-border: lighten($header-bg, 15);
$title-color: #f2f2f2; $title-color: #f2f2f2;
$subtitle-color: #aaa;
$nav-bg: #ccc;//#3a6ea5; $nav-bg: #ccc;//#3a6ea5;
$nav-color: darken($nav-bg, 38); $nav-color: darken($nav-bg, 38);

View File

@ -1,5 +1,5 @@
body > header { body > header {
background-color: $header_bg; background-color: $header-bg;
h1 { h1 {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
@ -8,4 +8,10 @@ body > header {
text-decoration: none; text-decoration: none;
} }
} }
h2 {
margin: .2em 0 0;
@extend .sans;
font-size: 1em;
color: $subtitle-color;
}
} }

View File

@ -12,9 +12,9 @@ body > nav {
@include background-clip(padding-box); @include background-clip(padding-box);
margin: 0; padding: 0; margin: 0; padding: 0;
.search { .search {
padding: .25em .5em 0; padding: .3em .5em 0;
font-size: .85em; font-size: .85em;
line-height: 1em; line-height: 1.1em;
width: 95%; width: 95%;
@include border-radius(.5em); @include border-radius(.5em);
@include background-clip(padding-box); @include background-clip(padding-box);
@ -41,7 +41,6 @@ body > nav {
ul { ul {
@include horizontal-list(0); @include horizontal-list(0);
float: left; float: left;
//float: right;
display: block; display: block;
padding-top: .25em; 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 { .maskImage {
ul[role=subscription] { li, a { border: 0; padding: 0; }} ul[role=subscription] { li, a { border: 0; padding: 0; }}
a[rel=subscribe-rss]{ a[rel=subscribe-rss]{

View File

@ -1 +1,4 @@
<h1><a href="/">{{ site.title }}</a></h1> <h1><a href="/">{{ site.title }}</a></h1>
{% if site.subtitle %}
<h2>{{ site.subtitle }}</h2>
{% endif %}

View File

@ -24,12 +24,17 @@ function addSidebarToggler() {
function testFeatures() { function testFeatures() {
var features = ['maskImage']; var features = ['maskImage'];
$(features).map(function(feature){ $(features).map(function(feature){
if(Modernizr.testAllProps(feature)) { if (Modernizr.testAllProps(feature)) {
$('html').addClass(feature); $('html').addClass(feature);
} else { } else {
$('html').addClass('no-'+feature); $('html').addClass('no-'+feature);
} }
}); });
if ("placeholder" in document.createElement("input")) {
$('html').addClass('placeholder');
} else {
$('html').addClass('no-placeholder');
}
} }
function addDivLines(){ function addDivLines(){