feat(docs): semantic file name

_app/_posts/note/2014-02-01-svg-post-title.md

@@ -3,7 +3,7 @@ layout: post
 title: SVG Post Ttile
 category: note
 tags: curtana
-svg-headline: svg/kai.svg
+svg-headline: svg/svg-title-example.svg
 svg-headline-width: 400
 svg-headline-height: 86
 scheme-text: "#b93b00"
@@ -16,24 +16,24 @@ scheme-bg: "#ff9610"
 This is an example of custom post title using SVG image. You can simply add the following setting to your post [front-matter field](http://jekyllrb.com/docs/frontmatter/):
 
 ```
-svg-headline: svg/kai.svg
+svg-headline: svg/cool-title.svg
 svg-headline-width: 400
 svg-headline-height: 86
 ```
 
-Image defined for `svg-headline` should be stored at `_app/assets/svg/kai.svg`, you can simply keep these title images under Git control, they will be inlined into the HTML pages using Grunt.js in production builds. The `svg-headline-width` and `svg-headline-height` are optional if you have correct dimensions for your images.
+Image defined for `svg-headline` should be stored at `_app/assets/svg/cool-title.svg`, you can simply keep these title images under Git control, they will be inlined into the HTML pages using Grunt.js in production builds. The `svg-headline-width` and `svg-headline-height` are optional if you have correct dimensions for your images.
 
 There's also an option for common raster images, but please note that these files should be stored at where you define `site.file`.
 
 ```
-img-headline: imouto-logo-large.png
+img-headline: cool-title.png
 img-headline-width: 500
 ```
 
 > **Pro Tips**: Keep a `<title>` tag for your SVG can help Safari generate correct post title for its Reader mode:
 
 ```
 <svg xmlns="http://www.w3.org/2000/svg" width="2175" height="465" viewBox="0 0 2175 465">
-<title>Kai Series</title>
+<title>Cool Article</title>
 …
 ```

_app/assets/_less/user.less

@@ -20,6 +20,18 @@
 // .content { .list h2 a, header h1, header h1 a { color: @link-color; } }
 // .external span { background: @link-color; }
 
+// EXAMPLE: custom header with background image
+.content header {
+  @header-factor: .64;
+  color: @background-color;
+  background: @link-color url('/assets/img/bg.png') center center;
+  background-size: (100vw * @header-factor);
+
+  a {
+    color: @background-color;
+  }
+}
+
 // EXAMPLE: amsf.github.io custom variables
 @fontstack-sans-serif: "Helvetica Neue", "Hiragino Sans GB", Arial, sans-serif;
 @fontstack-serif: Georgia, "Hiragino Mincho ProN", serif;