Browse code

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

Brandon Mathis authored on 08/06/2011 at 22:58:00
Showing 7 changed files
... ...
@@ -4,6 +4,7 @@ destination: public
4 4
 
5 5
 url: http://yoursite.com
6 6
 title: My Octopress Blog
7
+subtitle: A blogging framework for hackers.
7 8
 author: Your Name
8 9
 subscribe_rss: /atom.xml
9 10
 subscribe_email: http://feedburner.com/asdfasdf
... ...
@@ -35,7 +35,7 @@ body {
35 35
     }
36 36
   }
37 37
   > header {
38
-    font-size: .8em;
38
+    font-size: 1em;
39 39
     padding-top: 1.5em;
40 40
     padding-bottom: 1.5em;
41 41
   }
... ...
@@ -10,6 +10,7 @@ $page-bg: #252525;
10 10
 $header-bg: #333; //#0c2e46; //darken(#238bd2, 32); //#263448; //#323232;
11 11
 $header-border: lighten($header-bg, 15);
12 12
 $title-color: #f2f2f2;
13
+$subtitle-color: #aaa;
13 14
 
14 15
 $nav-bg: #ccc;//#3a6ea5;
15 16
 $nav-color: darken($nav-bg, 38);
... ...
@@ -1,5 +1,5 @@
1 1
 body > header {
2
-  background-color: $header_bg;
2
+  background-color: $header-bg;
3 3
   h1 {
4 4
     display: inline-block;
5 5
     margin: 0;
... ...
@@ -8,4 +8,10 @@ body > header {
8 8
       text-decoration: none;
9 9
     }
10 10
   }
11
+  h2 {
12
+    margin: .2em 0 0;
13
+    @extend .sans;
14
+    font-size: 1em;
15
+    color: $subtitle-color;
16
+  }
11 17
 }
... ...
@@ -12,9 +12,9 @@ body > nav {
12 12
     @include background-clip(padding-box);
13 13
     margin: 0; padding: 0;
14 14
     .search {
15
-      padding: .25em .5em 0;
15
+      padding: .3em .5em 0;
16 16
       font-size: .85em;
17
-      line-height: 1em;
17
+      line-height: 1.1em;
18 18
       width: 95%;
19 19
       @include border-radius(.5em);
20 20
       @include background-clip(padding-box);
... ...
@@ -41,7 +41,6 @@ body > nav {
41 41
     ul {
42 42
       @include horizontal-list(0);
43 43
       float: left;
44
-      //float: right;
45 44
       display: block;
46 45
       padding-top: .25em;
47 46
     }
... ...
@@ -92,6 +91,12 @@ body > nav {
92 92
     }
93 93
   }
94 94
 }
95
+.no-placeholder {
96
+  body > nav .search {
97
+    background: lighten($nav-bg, 15) image-url('search.png') .3em .25em no-repeat;
98
+    text-indent: 1.3em;
99
+  }
100
+}
95 101
 .maskImage {
96 102
   ul[role=subscription] { li, a { border: 0; padding: 0; }}
97 103
   a[rel=subscribe-rss]{
... ...
@@ -1 +1,4 @@
1 1
 <h1><a href="/">{{ site.title }}</a></h1>
2
+{% if site.subtitle %}
3
+  <h2>{{ site.subtitle }}</h2>
4
+{% endif %}
... ...
@@ -24,12 +24,17 @@ function addSidebarToggler() {
24 24
 function testFeatures() {
25 25
   var features = ['maskImage'];
26 26
   $(features).map(function(feature){
27
-    if(Modernizr.testAllProps(feature)) {
27
+    if (Modernizr.testAllProps(feature)) {
28 28
       $('html').addClass(feature);
29 29
     } else {
30 30
       $('html').addClass('no-'+feature);
31 31
     }
32 32
   });
33
+  if ("placeholder" in document.createElement("input")) {
34
+    $('html').addClass('placeholder');
35
+  } else {
36
+    $('html').addClass('no-placeholder');
37
+  }
33 38
 }
34 39
 
35 40
 function addDivLines(){