├── _layouts
    ├── blank.html
    ├── post.html
    └── default.html
├── images
    ├── bg.jpg
    ├── blog.jpg
    ├── logo.jpg
    ├── cnt-top.jpg
    ├── aside-bg.jpg
    └── cnt-left.jpg
├── _posts
    ├── 2013-08-11-kunka-back.markdown
    └── 2012-08-10-typo-css.markdown
├── .gitignore
├── README.md
├── archives.html
├── links.html
├── atom.xml
├── categories.html
├── contact.html
├── index.html
├── _config.yml
├── css
    ├── syntax.css
    └── main.css
└── Rakefile


/_layouts/blank.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pizn/kunka/HEAD/images/bg.jpg


--------------------------------------------------------------------------------
/images/blog.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pizn/kunka/HEAD/images/blog.jpg


--------------------------------------------------------------------------------
/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pizn/kunka/HEAD/images/logo.jpg


--------------------------------------------------------------------------------
/images/cnt-top.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pizn/kunka/HEAD/images/cnt-top.jpg


--------------------------------------------------------------------------------
/images/aside-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pizn/kunka/HEAD/images/aside-bg.jpg


--------------------------------------------------------------------------------
/images/cnt-left.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pizn/kunka/HEAD/images/cnt-left.jpg


--------------------------------------------------------------------------------
/_posts/2013-08-11-kunka-back.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title:  kunka 主题归来
4 | date:   2013-08-11 12:55:11
5 | category: "主题"
6 | ---
7 | 
8 | 很久之前就把视觉稿画好了，周末有时间，把它给写了出来。下面介绍下 Kunka 主题。
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | *.iml
 2 | .idea/
 3 | .idea/scopes/scope_settings.xml
 4 | .idea/workspace.xml
 5 | .ipr
 6 | .iws
 7 | *~
 8 | ~*
 9 | *.diff
10 | *.patch
11 | *.bak
12 | .DS_Store
13 | Thumbs.db
14 | .project
15 | .*proj
16 | .svn/
17 | *.swp
18 | *.swo
19 | *.pyc
20 | *.pyo
21 | build
22 | node_modules
23 | _site
24 | sea-modules
25 | .cache


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ##Kunka
 2 | 
 3 | > 这只是另外一个 Jekyll 主题文件。
 4 | 
 5 | ![kunka blog theme](images/blog.jpg)
 6 | 
 7 | ###使用方法
 8 | 
 9 | * 把主题文件 clone 到你本地服务器
10 | * 使用```rake post title="title name"```自动添加文章到 ```_posts``` 文件夹。
11 | * 修改 ```_config.yml```，里面有很多可以配置的选项。
12 | * 运行 ```jekyll serve```，浏览器打开 http://localhost:4000 便可以看到新的主题。
13 | 
14 | 更多的介绍，详见[Jekyll 博客主题 Kunka](http://www.zhanxin.info/jekyll/2013-08-11-jekyll-theme-kunka.html)。


--------------------------------------------------------------------------------
/archives.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | title: Archives
 4 | ---
 5 | <div class="article">
 6 |     <h3 class="title">{{ page.title }}</h3>
 7 |     {% capture post_year1 %}{{ 'now' | date: '%Y' }}{% endcapture %}
 8 |     <ul class="article-year" data-year="{{ post_year1 }}">
 9 |         {% for post in site.posts %}
10 |             {% capture post_year2 %}{{ post.date | date: '%Y' }}{% endcapture %}
11 |             {% if post_year1 != post_year2 %}
12 |                 {% assign post_year1 = post_year2 %}
13 |     </ul>
14 |     <ul class="article-year" data-year="{{ post_year1 }}">
15 |             {% endif %}
16 |         <li class="fn-clear"><span>{{ post.date |  date: '%b %d' }}</span><a href="{{site.url}}{{ post.url }}">{{ post.title }}</a></li>
17 |         {% endfor %}
18 |     </ul>
19 | </div>
20 | 
21 | 


--------------------------------------------------------------------------------
/links.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | title: Links
 4 | comment: true
 5 | ---
 6 | 
 7 | <div class="article">
 8 |     <h3 class="title">{{ page.title }}</h3>
 9 |     <div class="links">
10 |         {% for i in site.customLinks %}
11 |         <h4 class="links-category fn-clear">{{ i.message }}</h4>
12 |         <ul class="links-list fn-clear">
13 |                 {% for link in i.item %}
14 |                 <li><a href="{{ link.url }}" target="_blank">{{ link.text }}</a></li>
15 |                 {% endfor %}
16 |         </ul>
17 |         {% endfor %}
18 |     </div>
19 |     <div class="comment">
20 |         {% if site.disqus.config %}
21 |         <div id="disqus_thread"></div>
22 |         {% else %}
23 |             {% if site.duoshuo.config %}
24 |             <div class="ds-thread"></div>
25 |             {% endif %}
26 |         {% endif %}
27 |     </div>
28 | </div>


--------------------------------------------------------------------------------
/atom.xml:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: blank
 3 | ---
 4 | <?xml version="1.0" encoding="utf-8"?>
 5 | <feed xmlns="http://www.w3.org/2005/Atom">
 6 | 
 7 |    <title>{{ site.title }}</title>
 8 |    <link href="{{ site.url }}{{ site.feed }}" rel="self" type="application/atom+xml"/>
 9 |    <link href="{{ site.url }}" rel="alternate" type="text/html" />
10 |    <updated>{{ site.time | date_to_xmlschema }}</updated>
11 |    <id>{{ site.url }}</id>
12 |    <author>
13 |      <name>{{ site.author.name }}</name>
14 |      <email>{{ site.author.email }}</email>
15 |    </author>
16 | 
17 |    {% for post in site.posts limit:10 %}
18 |    <entry>
19 |      <title>{{ post.title }}</title>
20 |      <link href="{{ site.url }}{{ post.url }}"/>
21 |      <updated>{{ post.date | date_to_xmlschema }}</updated>
22 |      <id>{{ site.url }}{{ post.id }}</id>
23 |      <content type="html">{{ post.content | xml_escape }}</content>
24 |    </entry>
25 |    {% endfor %}
26 | 
27 | </feed>
28 | 


--------------------------------------------------------------------------------
/categories.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | title: Categories
 4 | ---
 5 | <div class="article">
 6 |     <h3 class="title">{{ page.title }}</h3>
 7 |     <ul class="categories">
 8 |     {% assign categories_list = site.categories %}
 9 |     {% for category in categories_list %}
10 |         <li class="categories-item"><a href="{{ BASE_PATH }}{{ site.JB.categories_path }}#{{ category[0] }}-ref">
11 |             {{ category[0] | join: "/" }}
12 |         </a></li>
13 |     {% endfor %}
14 |     </ul>
15 | 
16 | <div class="article">
17 | {% for category in site.categories %} 
18 |   <h2  class="article-year" id="{{ category[0] }}-ref" data-year="&diams;">{{ category[0] | join: "/" }}</h2>
19 |   <ul style="list-style: none">
20 |     {% assign pages_list = category[1] %}  
21 |     {% for node in pages_list %}
22 |       {% if node.title != null %}
23 |         {% if group == null or group == node.group %}
24 |             <li style="background:#F2EEEC; padding:5px; margin:3px 0"><a href="{{ BASE_PATH }}{{node.url}}">{{node.title}}</a></li>
25 |         {% endif %}
26 |       {% endif %}
27 |     {% endfor %}
28 |    
29 |   </ul>
30 | {% endfor %}
31 | </div>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | title: Contact
 4 | comment: true
 5 | ---
 6 | 
 7 | <div class="article">
 8 |     <h3 class="title">{{ page.title }}</h3>
 9 |     <div class="about">
10 | 
11 |         <div class="about-text">
12 |             <p>{{ site.author.simpleIntro }}</p>
13 |             {{ site.author.detailIntro }}
14 |         </div>
15 |         <div class="about-image">
16 |             <img src="{{ site.author.imageLink }}" />
17 |         </div>
18 |     </div>
19 |     <div class="fn-clear"></div>
20 |     <div class="social">
21 |         {% for link in site.follow %}
22 |         <a href="{{ link.url }}" target="_blank"><i class="{{ link.class }}"></i></a>
23 |         {% endfor %}
24 |     </div>
25 |     <div class="fn-clear"></div>
26 |     <div class="contact">
27 |         <a href="mailto:{{ site.author.email }}">{{ site.author.email }}</a>
28 |     </div>
29 |     <div class="comment">
30 |         {% if site.disqus.config %}
31 |         <div id="disqus_thread"></div>
32 |         {% else %}
33 |             {% if site.duoshuo.config %}
34 |             <div class="ds-thread"></div>
35 |             {% endif %}
36 |         {% endif %}
37 |     </div>
38 | </div>


--------------------------------------------------------------------------------
/_layouts/post.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | comment: true
 4 | ---
 5 | <div class="article article-post">
 6 |     <h2 class="title">{{ page.title }}</h2>
 7 |     <div class="info">
 8 |         <span class="info-title"><i class="icon-calendar"></i> Published: </span>
 9 |         <span class="info-date">{{ page.date | date_to_string }}</span>
10 |         <span class="info-title"><i class="icon-folder-open"></i> Category: </span>
11 |         <span class="info-link"><a href="{{ site.url }}/categories.html#{{ page.category }}-ref" >{{ page.category }}</a></span>
12 |     </div>
13 |     {{ content }}
14 |     <nav class="article-previous fn-clear">
15 |         {% if page.previous %}
16 |         <a class="prev" href="{{ page.previous.url }}" rel="bookmark">&laquo;&nbsp;{{ page.previous.title | truncatewords:5 }}</a>
17 |         {% endif %}
18 |         {% if page.next %}
19 |         <a class="next" href="{{ page.next.url }}" rel="bookmark">{{ page.next.title | truncatewords:5 }}&nbsp;&raquo;</a>
20 |         {% endif %}
21 |     </nav>
22 |     <div class="comment">
23 |         {% if site.disqus.config %}
24 |         <div id="disqus_thread"></div>
25 |         {% else %}
26 |             {% if site.duoshuo.config %}
27 |             <div class="ds-thread"></div>
28 |             {% endif %}
29 |         {% endif %}
30 |     </div>
31 | </div>
32 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | title: Kunka
 4 | keywords: Jekyll theme, Kunka
 5 | ---
 6 | {% for post in paginator.posts %}
 7 |     <div class="article">
 8 |         <h3 class="title"><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></h3>
 9 |         <article class="rexp">
10 |             <p>{{ post.excerpt }}</p>
11 |         </article>
12 |         <a href="{{ site.url }}{{ post.url }}" class="more"><i class="icon-link"></i></a>
13 |         <div class="info">
14 |             <span class="info-title"><i class="icon-calendar"></i> Published: </span>
15 |             <span class="info-date">{{ post.date | date_to_string }}</span>
16 |         </div>
17 |     </div>
18 | {% endfor %}
19 | {% if paginator.total_pages > 1 %}
20 |     <nav class="pagination fn-clear">
21 |         <span class="pagination-icon"><i class=" icon-copy"></i></span>
22 |         <ul class="pagination-list">
23 |             {% for page in (1..paginator.total_pages) %}
24 |                 {% if page == paginator.page %}
25 |                     <li class="current"><a href="javascript:void(0);">{{ page }}</a></li>
26 |                 {% else %}
27 |                     <li><a href="{{ site.url }}/{%if page > 1 %}page{{ page }}/{% endif %}">{{ page }}</a></li>
28 |                 {% endif %}
29 |             {% endfor %}
30 |         </ul>
31 |     </nav>
32 | {% endif %}


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
  1 | # Where things are
  2 | source:       .
  3 | destination:  ./_site
  4 | plugins:      ./_plugins
  5 | layouts:      ./_layouts
  6 | paginate:     8
  7 | 
  8 | # Handling Reading
  9 | safe:         false
 10 | include:      [".htaccess"]
 11 | exclude:      []
 12 | keep_files:   [".git", ".svn"]
 13 | encoding:     "utf-8"
 14 | markdown_ext: "markdown,mkdown,mkdn,mkd,md"
 15 | textile_ext:  "textile"
 16 | 
 17 | # Filtering Content
 18 | show_drafts:  null
 19 | limit_posts:  0
 20 | future:       true
 21 | unpublished:  false
 22 | 
 23 | # Conversion
 24 | markdown:     kramdown
 25 | highlighter:  pygments
 26 | lsi:          false
 27 | excerpt_separator: "\n\n"
 28 | 
 29 | # Serving
 30 | detach:       false
 31 | port:         4000
 32 | host:         127.0.0.1
 33 | baseurl:      "" # does not include hostname
 34 | 
 35 | # Outputting
 36 | permalink:     date
 37 | paginate_path: /page:num
 38 | timezone:      null
 39 | 
 40 | 
 41 | #Site config
 42 | title: Jekyll Theme
 43 | description: Just another Jekyll theme design and code by zhanxin.info.
 44 | keywords: Jekyll Theme
 45 | url: http://pizn.github.io/kunka
 46 | feed: /atom.xml
 47 | favicon: http://jekyllrb.com/favicon.png
 48 | 
 49 | #Nav config
 50 | nav:
 51 |   - text: 首页
 52 |     url: /index.html
 53 |   - text: 分类目录 
 54 |     url: /categories.html
 55 |   - text: 文章归档
 56 |     url: /archives.html
 57 |   - text: 联系我
 58 |     url: /contact.html
 59 |   - text: 友情链接
 60 |     url: /links.html
 61 | 
 62 | #Author config
 63 | author:
 64 |     name: 掌心
 65 |     email: zhanxin.info@gmail.com
 66 |     imageLink: http://tp2.sinaimg.cn/1832671293/180/40020872447/1
 67 |     simpleIntro: 我是「展新展新」，一个矛盾体的化身，在你的掌心里。
 68 |     detailIntro:
 69 |       <p>Jekyll 是一个简洁的、特别针对博客平台的 静态网站 生成器。它使用一个模板目录作为网站布局的基础框架，并在其上运行 Textile 、 Markdown 或 Liquid 标记语言的转换器，最终生成一个完整的静态Web站点，可以被放置在Apache或者你喜欢的其他任何Web服务器上。它同时也是 GitHub Pages 、一个由 GitHub 提供的用于托管项目主页或博客的服务，在后台所运行的引擎。</p>
 70 |       <p>很早之前，使用过 wordpress 来写博客。但是还要处理很多的底层问题。而使用 Jekyll 来写博客，可以很简单，写 Markdown 就好。然而，Jekyll 还很年轻，没有很多主题的支持。这里的主题，就是为 Jekyll 而写的。希望你能喜欢。</p>
 71 | 
 72 | #Follow me, you can choose your icon by http://fortawesome.github.io/Font-Awesome/icons/#brand
 73 | follow:
 74 |   - class: icon-rss
 75 |     url: /atom.xml
 76 |   - class: icon-weibo
 77 |     url: http://weibo.com/pizn
 78 |   - class: icon-renren
 79 |     url: http://renren.com
 80 |   - class: icon-github-alt
 81 |     url: http://github.com/pizn
 82 |   - class: icon-twitter
 83 |     url: http://twitter.com/piznlin
 84 |   - class: icon-google-plus
 85 |     url: http://google.com
 86 | 
 87 | #Links
 88 | customLinks:
 89 |   - item:
 90 |     - text: 掌心
 91 |       url: http://www.zhanxin.info
 92 |     - text: Jekyll
 93 |       url: http://jekyllrb.com
 94 |     - text: Jekyll Theme
 95 |       url: http://www.zhanxin.info/themes.html
 96 |     message: Friends
 97 |   - item:
 98 |     - text: Font Awesome
 99 |       url: http://fortawesome.github.io/Font-Awesome/
100 |     - text: Google Font
101 |       url: http://www.google.com/fonts/
102 |     - text: jQuery
103 |       url: http://jquery.com/
104 |     message: 其他相关链接
105 | 
106 | #googleAnaly, your id link UA-12345678-X
107 | googleAnaly:
108 |   config: true
109 |   id: UA-40169250-1
110 | 
111 | #comment config
112 | disqus:
113 |   config: false
114 |   id: piznblog
115 | 
116 | duoshuo:
117 |   config: true
118 |   id: zhanxin


--------------------------------------------------------------------------------
/css/syntax.css:
--------------------------------------------------------------------------------
 1 | .highlight .c { color: #999988; font-style: italic } /* Comment */
 2 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
 3 | .highlight .k { font-weight: bold } /* Keyword */
 4 | .highlight .o { font-weight: bold } /* Operator */
 5 | .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
 6 | .highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
 7 | .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
 8 | .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
 9 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
10 | .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
11 | .highlight .ge { font-style: italic } /* Generic.Emph */
12 | .highlight .gr { color: #aa0000 } /* Generic.Error */
13 | .highlight .gh { color: #999999 } /* Generic.Heading */
14 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
15 | .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
16 | .highlight .go { color: #888888 } /* Generic.Output */
17 | .highlight .gp { color: #555555 } /* Generic.Prompt */
18 | .highlight .gs { font-weight: bold } /* Generic.Strong */
19 | .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
20 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */
21 | .highlight .kc { font-weight: bold } /* Keyword.Constant */
22 | .highlight .kd { font-weight: bold } /* Keyword.Declaration */
23 | .highlight .kp { font-weight: bold } /* Keyword.Pseudo */
24 | .highlight .kr { font-weight: bold } /* Keyword.Reserved */
25 | .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
26 | .highlight .m { color: #009999 } /* Literal.Number */
27 | .highlight .s { color: #d14 } /* Literal.String */
28 | .highlight .na { color: #008080 } /* Name.Attribute */
29 | .highlight .nb { color: #0086B3 } /* Name.Builtin */
30 | .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
31 | .highlight .no { color: #008080 } /* Name.Constant */
32 | .highlight .ni { color: #800080 } /* Name.Entity */
33 | .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
34 | .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
35 | .highlight .nn { color: #555555 } /* Name.Namespace */
36 | .highlight .nt { color: #000080 } /* Name.Tag */
37 | .highlight .nv { color: #008080 } /* Name.Variable */
38 | .highlight .ow { font-weight: bold } /* Operator.Word */
39 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */
40 | .highlight .mf { color: #009999 } /* Literal.Number.Float */
41 | .highlight .mh { color: #009999 } /* Literal.Number.Hex */
42 | .highlight .mi { color: #009999 } /* Literal.Number.Integer */
43 | .highlight .mo { color: #009999 } /* Literal.Number.Oct */
44 | .highlight .sb { color: #d14 } /* Literal.String.Backtick */
45 | .highlight .sc { color: #d14 } /* Literal.String.Char */
46 | .highlight .sd { color: #d14 } /* Literal.String.Doc */
47 | .highlight .s2 { color: #d14 } /* Literal.String.Double */
48 | .highlight .se { color: #d14 } /* Literal.String.Escape */
49 | .highlight .sh { color: #d14 } /* Literal.String.Heredoc */
50 | .highlight .si { color: #d14 } /* Literal.String.Interpol */
51 | .highlight .sx { color: #d14 } /* Literal.String.Other */
52 | .highlight .sr { color: #009926 } /* Literal.String.Regex */
53 | .highlight .s1 { color: #d14 } /* Literal.String.Single */
54 | .highlight .ss { color: #990073 } /* Literal.String.Symbol */
55 | .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
56 | .highlight .vc { color: #008080 } /* Name.Variable.Class */
57 | .highlight .vg { color: #008080 } /* Name.Variable.Global */
58 | .highlight .vi { color: #008080 } /* Name.Variable.Instance */
59 | .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
60 | 


--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <!--
  5 |          **
  6 |          * Auther:      掌心
  7 |          * Contact:     http://www.zhanxin.info
  8 |          * Create:      2013.08.10
  9 |          * Theme Name:  Kunka
 10 |          * Authorize:   BY-NC-SA
 11 |          **
 12 |         -->
 13 |         <meta charset="utf-8">
 14 |         <title>{% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
 15 |         <!-- meta -->
 16 |         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 17 |         <meta name="generator" content="Jekyll" />
 18 |         <meta name="author" content="{{ site.author.name }}" />
 19 |         <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
 20 |         <meta name="keywords" content="{{ page.keywords | join: ',' }}" />
 21 |         <!-- atom -->
 22 |         <link rel="alternate" type="application/atom+xml" title="Recent Entries" href="{{ site.url }}{{ site.feed }}" />
 23 |         <link rel="shortcut icon" href="{{ site.favicon }}" type="image/x-icon" />
 24 |         <!-- font-awesome -->
 25 |         <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 26 |         <link href='http://fonts.googleapis.com/css?family=Spirax' rel='stylesheet' type='text/css'>
 27 |         <link rel="stylesheet" href="{{ site.url }}/css/syntax.css">
 28 |         <link rel="stylesheet" href="{{ site.url }}/css/main.css">
 29 |         {% if site.googleAnaly.config %}
 30 |         <script type="text/javascript">
 31 |             var _gaq = _gaq || [];
 32 |             _gaq.push(['_setAccount', '{{ site.googleAnaly.id }}']);
 33 |             _gaq.push(['_trackPageview']);
 34 |             (function() {
 35 |               var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 36 |                   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 37 |               var s = document.getElementsByTagName('script')[0];
 38 |                   s.parentNode.insertBefore(ga, s);
 39 |             })();
 40 |         </script>
 41 |         {% endif %}
 42 |     </head>
 43 |     <body>
 44 |         <div class="head fn-clear">
 45 |             <div class="header">
 46 |                 <h1 class="logo">
 47 |                     <a href="{{ site.url }}"><i class="icon-anchor"></i></a>
 48 |                 </h1>
 49 |                 <nav class="nav">
 50 |                     <ul>
 51 |                         {% for link in site.nav %}
 52 |                         {% assign active = nil %}
 53 |                         {% if page.url == link.url%}
 54 |                           {% assign active = 'nav-item-active' %}
 55 |                         {% endif %}
 56 |                         <li class="nav-item {{ active }}">
 57 |                             <a href="{{ site.url }}{{ link.url }}">
 58 |                                 {{ link.text }}
 59 |                             </a>
 60 |                             {{ indicator }}
 61 |                         </li>
 62 |                         {% endfor %}
 63 |                     </ul>
 64 |                 </nav>
 65 |                 <div class="follow">
 66 |                     {% for link in site.follow %}
 67 |                     <a href="{{ link.url }}" target="_blank"><i class="{{ link.class }}"></i></a>
 68 |                     {% endfor %}
 69 |                 </div>
 70 |             </div>
 71 |         </div>
 72 |         <div class="contain fn-clear">
 73 |             <div class="container fn-clear">
 74 |                 <div class="main">
 75 |                     {{ content }}
 76 |                 </div>
 77 |                 <div class="aside">
 78 |                     <div class="aside-contact">
 79 |                         <h4 class="title">About me</h4>
 80 |                         <div class="det fn-clear">
 81 |                             <div class="det-image">
 82 |                                 <img src="{{ site.author.imageLink }}" />
 83 |                             </div>
 84 |                             <div class="det-text">
 85 |                                 <p>{{ site.author.simpleIntro }}</p>
 86 |                             </div>
 87 |                         </div>
 88 |                     </div>
 89 | 
 90 |                     <div class="aside-item">
 91 |                         <h4 class="title">Recent Posts</h4>
 92 |                         <ul class="list">
 93 |                             {% for rpost in site.posts limit:6  %}
 94 |                                 <li><a href="{{ site.url }}{{ rpost.url }}" title="{{ rpost.title }}" rel="bookmark">{{ rpost.title }}</a></li>
 95 |                             {% endfor %}
 96 |                         </ul>
 97 |                     </div>
 98 | 
 99 |                     <div class="aside-item">
100 |                         <h4 class="title">Links</h4>
101 |                         <ul class="list">
102 |                             {% for i in site.customLinks %}
103 |                                 {% if i.message == "Friends" %}
104 |                                     {% for link in i.item %}
105 |                                     <li><a href="{{ link.url }}" title="{{ link.text }}" target="_blank">{{ link.text }}</a></li>
106 |                                     {% endfor %}
107 |                                 {% endif %}
108 |                             {% endfor %}
109 |                         </ul>
110 |                     </div>
111 | 
112 |                 </div>
113 |             </div>
114 |         </div>
115 |         <div class="foot">
116 |             <div class="footer">
117 |                 <p>Copyright 2013. All rights reserved. Powered by <a href="http://jekyllrb.com" target="_blank">Jekyll</a>, Design by <a href="http://www.zhanxin.info" target="_blank">zhanxin.info</a>.</p>
118 |             </div>
119 |         </div>
120 |         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
121 |         {% if page.comment %}
122 |             {% if site.disqus.config %}
123 |             <script type="text/javascript">
124 |                 //disqus
125 |                 var disqus_shortname = '{{ site.disqus.id }}';
126 |                 (function() {
127 |                     var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
128 |                     dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
129 |                     (document.getElementsByTagName('head')[0] ||
130 |                         document.getElementsByTagName('body')[0]).appendChild(dsq);
131 |                 })();
132 |             </script>
133 |             {% else %}
134 |                 {% if site.duoshuo.config %}
135 |                 <script type="text/javascript">
136 |                     var duoshuoQuery = {short_name:"{{ site.duoshuo.id }}"};
137 |                     (function() {
138 |                         var ds = document.createElement('script');
139 |                         ds.type = 'text/javascript';ds.async = true;
140 |                         ds.src = 'http://static.duoshuo.com/embed.js';
141 |                         ds.charset = 'UTF-8';
142 |                         (document.getElementsByTagName('head')[0]
143 |                         || document.getElementsByTagName('body')[0]).appendChild(ds);
144 |                     })();
145 |                 </script>
146 |                 {% endif %}
147 |             {% endif %}
148 |         {% endif %}
149 |     </body>
150 | </html>
151 | 


--------------------------------------------------------------------------------
/Rakefile:
--------------------------------------------------------------------------------
  1 | require "rubygems"
  2 | require 'rake'
  3 | require 'yaml'
  4 | require 'time'
  5 | 
  6 | SOURCE = "."
  7 | CONFIG = {
  8 |   'version' => "0.3.0",
  9 |   'themes' => File.join(SOURCE, "_includes", "themes"),
 10 |   'layouts' => File.join(SOURCE, "_layouts"),
 11 |   'posts' => File.join(SOURCE, "_posts"),
 12 |   'post_ext' => "md",
 13 |   'theme_package_version' => "0.1.0"
 14 | }
 15 | 
 16 | # Path configuration helper
 17 | module JB
 18 |   class Path
 19 |     SOURCE = "."
 20 |     Paths = {
 21 |       :layouts => "_layouts",
 22 |       :themes => "_includes/themes",
 23 |       :theme_assets => "assets/themes",
 24 |       :theme_packages => "_theme_packages",
 25 |       :posts => "_posts"
 26 |     }
 27 |     
 28 |     def self.base
 29 |       SOURCE
 30 |     end
 31 | 
 32 |     # build a path relative to configured path settings.
 33 |     def self.build(path, opts = {})
 34 |       opts[:root] ||= SOURCE
 35 |       path = "#{opts[:root]}/#{Paths[path.to_sym]}/#{opts[:node]}".split("/")
 36 |       path.compact!
 37 |       File.__send__ :join, path
 38 |     end
 39 |   
 40 |   end #Path
 41 | end #JB
 42 | 
 43 | # Usage: rake post title="A Title" [date="2012-02-09"] [tags=[tag1, tag2]]
 44 | desc "Begin a new post in #{CONFIG['posts']}"
 45 | task :post do
 46 |   abort("rake aborted: '#{CONFIG['posts']}' directory not found.") unless FileTest.directory?(CONFIG['posts'])
 47 |   title = ENV["title"] || "new-post"
 48 |   tags = ENV["tags"] || "[]"
 49 |   slug = title.downcase.strip.gsub(' ', '-').gsub(/[^\w-]/, '')
 50 |   begin
 51 |     date = (ENV['date'] ? Time.parse(ENV['date']) : Time.now).strftime('%Y-%m-%d')
 52 |   rescue Exception => e
 53 |     puts "Error - date format must be YYYY-MM-DD, please check you typed it correctly!"
 54 |     exit -1
 55 |   end
 56 |   filename = File.join(CONFIG['posts'], "#{date}-#{slug}.#{CONFIG['post_ext']}")
 57 |   if File.exist?(filename)
 58 |     abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
 59 |   end
 60 |   
 61 |   puts "Creating new post: #{filename}"
 62 |   open(filename, 'w') do |post|
 63 |     post.puts "---"
 64 |     post.puts "layout: post"
 65 |     post.puts "title: \"#{title.gsub(/-/,' ')}\""
 66 |     post.puts 'description: ""'
 67 |     post.puts "category: "
 68 |     post.puts "tags: []"
 69 |     post.puts "---"
 70 |     #post.puts "{% include JB/setup %}"
 71 |   end
 72 | end # task :post
 73 | 
 74 | # Usage: rake page name="about.html"
 75 | # You can also specify a sub-directory path.
 76 | # If you don't specify a file extention we create an index.html at the path specified
 77 | desc "Create a new page."
 78 | task :page do
 79 |   name = ENV["name"] || "new-page.md"
 80 |   filename = File.join(SOURCE, "#{name}")
 81 |   filename = File.join(filename, "index.html") if File.extname(filename) == ""
 82 |   title = File.basename(filename, File.extname(filename)).gsub(/[\W\_]/, " ").gsub(/\b\w/){$&.upcase}
 83 |   if File.exist?(filename)
 84 |     abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
 85 |   end
 86 |   
 87 |   mkdir_p File.dirname(filename)
 88 |   puts "Creating new page: #{filename}"
 89 |   open(filename, 'w') do |post|
 90 |     post.puts "---"
 91 |     post.puts "layout: page"
 92 |     post.puts "title: \"#{title}\""
 93 |     post.puts 'description: ""'
 94 |     post.puts "---"
 95 |     post.puts "{% include JB/setup %}"
 96 |   end
 97 | end # task :page
 98 | 
 99 | desc "Launch preview environment"
100 | task :preview do
101 |   system "jekyll --auto --server"
102 | end # task :preview
103 | 
104 | # Public: Alias - Maintains backwards compatability for theme switching.
105 | task :switch_theme => "theme:switch"
106 | 
107 | namespace :theme do
108 |   
109 |   # Public: Switch from one theme to another for your blog.
110 |   #
111 |   # name - String, Required. name of the theme you want to switch to.
112 |   #        The the theme must be installed into your JB framework.
113 |   #
114 |   # Examples
115 |   #
116 |   #   rake theme:switch name="the-program"
117 |   #
118 |   # Returns Success/failure messages.
119 |   desc "Switch between Jekyll-bootstrap themes."
120 |   task :switch do
121 |     theme_name = ENV["name"].to_s
122 |     theme_path = File.join(CONFIG['themes'], theme_name)
123 |     settings_file = File.join(theme_path, "settings.yml")
124 |     non_layout_files = ["settings.yml"]
125 | 
126 |     abort("rake aborted: name cannot be blank") if theme_name.empty?
127 |     abort("rake aborted: '#{theme_path}' directory not found.") unless FileTest.directory?(theme_path)
128 |     abort("rake aborted: '#{CONFIG['layouts']}' directory not found.") unless FileTest.directory?(CONFIG['layouts'])
129 | 
130 |     Dir.glob("#{theme_path}/*") do |filename|
131 |       next if non_layout_files.include?(File.basename(filename).downcase)
132 |       puts "Generating '#{theme_name}' layout: #{File.basename(filename)}"
133 | 
134 |       open(File.join(CONFIG['layouts'], File.basename(filename)), 'w') do |page|
135 |         if File.basename(filename, ".html").downcase == "default"
136 |           page.puts "---"
137 |           page.puts File.read(settings_file) if File.exist?(settings_file)
138 |           page.puts "---"
139 |         else
140 |           page.puts "---"
141 |           page.puts "layout: default"
142 |           page.puts "---"
143 |         end 
144 |         page.puts "{% include JB/setup %}"
145 |         page.puts "{% include themes/#{theme_name}/#{File.basename(filename)} %}" 
146 |       end
147 |     end
148 |     
149 |     puts "=> Theme successfully switched!"
150 |     puts "=> Reload your web-page to check it out =)"
151 |   end # task :switch
152 |   
153 |   # Public: Install a theme using the theme packager.
154 |   # Version 0.1.0 simple 1:1 file matching.
155 |   #
156 |   # git  - String, Optional path to the git repository of the theme to be installed.
157 |   # name - String, Optional name of the theme you want to install.
158 |   #        Passing name requires that the theme package already exist.
159 |   #
160 |   # Examples
161 |   #
162 |   #   rake theme:install git="https://github.com/jekyllbootstrap/theme-twitter.git"
163 |   #   rake theme:install name="cool-theme"
164 |   #
165 |   # Returns Success/failure messages.
166 |   desc "Install theme"
167 |   task :install do
168 |     if ENV["git"]
169 |       manifest = theme_from_git_url(ENV["git"])
170 |       name = manifest["name"]
171 |     else
172 |       name = ENV["name"].to_s.downcase
173 |     end
174 | 
175 |     packaged_theme_path = JB::Path.build(:theme_packages, :node => name)
176 |     
177 |     abort("rake aborted!
178 |       => ERROR: 'name' cannot be blank") if name.empty?
179 |     abort("rake aborted! 
180 |       => ERROR: '#{packaged_theme_path}' directory not found.
181 |       => Installable themes can be added via git. You can find some here: http://github.com/jekyllbootstrap
182 |       => To download+install run: `rake theme:install git='[PUBLIC-CLONE-URL]'`
183 |       => example : rake theme:install git='git@github.com:jekyllbootstrap/theme-the-program.git'
184 |     ") unless FileTest.directory?(packaged_theme_path)
185 |     
186 |     manifest = verify_manifest(packaged_theme_path)
187 |     
188 |     # Get relative paths to packaged theme files
189 |     # Exclude directories as they'll be recursively created. Exclude meta-data files.
190 |     packaged_theme_files = []
191 |     FileUtils.cd(packaged_theme_path) {
192 |       Dir.glob("**/*.*") { |f| 
193 |         next if ( FileTest.directory?(f) || f =~ /^(manifest|readme|packager)/i )
194 |         packaged_theme_files << f 
195 |       }
196 |     }
197 |     
198 |     # Mirror each file into the framework making sure to prompt if already exists.
199 |     packaged_theme_files.each do |filename|
200 |       file_install_path = File.join(JB::Path.base, filename)
201 |       if File.exist? file_install_path and ask("#{file_install_path} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
202 |         next
203 |       else
204 |         mkdir_p File.dirname(file_install_path)
205 |         cp_r File.join(packaged_theme_path, filename), file_install_path
206 |       end
207 |     end
208 |     
209 |     puts "=> #{name} theme has been installed!"
210 |     puts "=> ---"
211 |     if ask("=> Want to switch themes now?", ['y', 'n']) == 'y'
212 |       system("rake switch_theme name='#{name}'")
213 |     end
214 |   end
215 | 
216 |   # Public: Package a theme using the theme packager.
217 |   # The theme must be structured using valid JB API.
218 |   # In other words packaging is essentially the reverse of installing.
219 |   #
220 |   # name - String, Required name of the theme you want to package.
221 |   #        
222 |   # Examples
223 |   #
224 |   #   rake theme:package name="twitter"
225 |   #
226 |   # Returns Success/failure messages.
227 |   desc "Package theme"
228 |   task :package do
229 |     name = ENV["name"].to_s.downcase
230 |     theme_path = JB::Path.build(:themes, :node => name)
231 |     asset_path = JB::Path.build(:theme_assets, :node => name)
232 | 
233 |     abort("rake aborted: name cannot be blank") if name.empty?
234 |     abort("rake aborted: '#{theme_path}' directory not found.") unless FileTest.directory?(theme_path)
235 |     abort("rake aborted: '#{asset_path}' directory not found.") unless FileTest.directory?(asset_path)
236 |     
237 |     ## Mirror theme's template directory (_includes)
238 |     packaged_theme_path = JB::Path.build(:themes, :root => JB::Path.build(:theme_packages, :node => name))
239 |     mkdir_p packaged_theme_path
240 |     cp_r theme_path, packaged_theme_path
241 |     
242 |     ## Mirror theme's asset directory
243 |     packaged_theme_assets_path = JB::Path.build(:theme_assets, :root => JB::Path.build(:theme_packages, :node => name))
244 |     mkdir_p packaged_theme_assets_path
245 |     cp_r asset_path, packaged_theme_assets_path
246 | 
247 |     ## Log packager version
248 |     packager = {"packager" => {"version" => CONFIG["theme_package_version"].to_s } }
249 |     open(JB::Path.build(:theme_packages, :node => "#{name}/packager.yml"), "w") do |page|
250 |       page.puts packager.to_yaml
251 |     end
252 |     
253 |     puts "=> '#{name}' theme is packaged and available at: #{JB::Path.build(:theme_packages, :node => name)}"
254 |   end
255 |   
256 | end # end namespace :theme
257 | 
258 | # Internal: Download and process a theme from a git url.
259 | # Notice we don't know the name of the theme until we look it up in the manifest.
260 | # So we'll have to change the folder name once we get the name.
261 | #
262 | # url - String, Required url to git repository.
263 | #        
264 | # Returns theme manifest hash
265 | def theme_from_git_url(url)
266 |   tmp_path = JB::Path.build(:theme_packages, :node => "_tmp")
267 |   abort("rake aborted: system call to git clone failed") if !system("git clone #{url} #{tmp_path}")
268 |   manifest = verify_manifest(tmp_path)
269 |   new_path = JB::Path.build(:theme_packages, :node => manifest["name"])
270 |   if File.exist?(new_path) && ask("=> #{new_path} theme package already exists. Override?", ['y', 'n']) == 'n'
271 |     remove_dir(tmp_path)
272 |     abort("rake aborted: '#{manifest["name"]}' already exists as theme package.")
273 |   end
274 | 
275 |   remove_dir(new_path) if File.exist?(new_path)
276 |   mv(tmp_path, new_path)
277 |   manifest
278 | end
279 | 
280 | # Internal: Process theme package manifest file.
281 | #
282 | # theme_path - String, Required. File path to theme package.
283 | #        
284 | # Returns theme manifest hash
285 | def verify_manifest(theme_path)
286 |   manifest_path = File.join(theme_path, "manifest.yml")
287 |   manifest_file = File.open( manifest_path )
288 |   abort("rake aborted: repo must contain valid manifest.yml") unless File.exist? manifest_file
289 |   manifest = YAML.load( manifest_file )
290 |   manifest_file.close
291 |   manifest
292 | end
293 | 
294 | def ask(message, valid_options)
295 |   if valid_options
296 |     answer = get_stdin("#{message} #{valid_options.to_s.gsub(/"/, '').gsub(/, /,'/')} ") while !valid_options.include?(answer)
297 |   else
298 |     answer = get_stdin(message)
299 |   end
300 |   answer
301 | end
302 | 
303 | def get_stdin(message)
304 |   print message
305 |   STDIN.gets.chomp
306 | end
307 | 
308 | #Load custom rake scripts
309 | Dir['_rake/*.rake'].each { |r| load r }
310 | 


--------------------------------------------------------------------------------
/_posts/2012-08-10-typo-css.markdown:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: post
  3 | title:  TYPO.CSS
  4 | date:   2012-08-10 12:55:11
  5 | category: "介绍"
  6 | ---
  7 | 
  8 | <h2 id="tagline">一致化浏览器排版效果，构建最适合中文阅读的网页排版</h2>
  9 | 
 10 | <ol id="table">
 11 |     <li><a href="#section1">关于 TYPO.CSS</a></li>
 12 |     <li><a href="#section2">排版实例</a>
 13 |         <ul>
 14 |             <li><a href="#section2-1">例1：论语学而篇第一</a></li>
 15 |             <li><a href="#section2-2">例2：英文排版</a></li>
 16 |         </ul>
 17 |     </li>
 18 |     <li><a href="#section3">附录</a>
 19 |         <ol>
 20 |             <li><a href="#appendix1">TYPO.CSS 排版偏重点</a></li>
 21 |             <li><a href="#appendix2">开源许可</a></li>
 22 |         </ol>
 23 |     </li>
 24 | </ol>
 25 | 
 26 | <h2 id="section1">一、关于 TYPO.CSS</h2>
 27 | <p><em>TYPO.CSS</em> 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。</p>
 28 | <h4>现状和如何去做：</h4>
 29 | <p>排版是一个麻烦的问题，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个 OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的 Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。TYPO.CSS 要做的就是解决中文排版的问题。</p>
 30 | <p><strong>TYPO.CSS 测试于如下平台：</strong></p>
 31 | <table summary="TYPO.CSS 的测试平台列表">
 32 |     <thead>
 33 |         <tr>
 34 |             <th>OS/浏览器</th>
 35 |             <th>Firefox</th>
 36 |             <th>Chrome</th>
 37 |             <th>Safari</th>
 38 |             <th>Opera</th>
 39 |             <th>IE9</th>
 40 |             <th>IE8</th>
 41 |             <th>IE7</th>
 42 |             <th>IE6</th>
 43 |         </tr>
 44 |     </thead>
 45 |     <tbody>
 46 |         <tr>
 47 |             <td>Mac OS X</td>
 48 |             <td>√</td>
 49 |             <td>√</td>
 50 |             <td>√</td>
 51 |             <td>√</td>
 52 |             <td>-</td>
 53 |             <td>-</td>
 54 |             <td>-</td>
 55 |             <td>-</td>
 56 |         </tr>
 57 |         <tr>
 58 |             <td>Windows 7</td>
 59 |             <td>√</td>
 60 |             <td>√</td>
 61 |             <td>√</td>
 62 |             <td>√</td>
 63 |             <td>√</td>
 64 |             <td>√</td>
 65 |             <td>√</td>
 66 |             <td>-</td>
 67 |         </tr>
 68 |         <tr>
 69 |             <td>Windows XP</td>
 70 |             <td>√</td>
 71 |             <td>√</td>
 72 |             <td>√</td>
 73 |             <td>√</td>
 74 |             <td>-</td>
 75 |             <td>√</td>
 76 |             <td>√</td>
 77 |             <td>√</td>
 78 |         </tr>
 79 |         <tr>
 80 |             <td>Ubuntu Linux</td>
 81 |             <td>√</td>
 82 |             <td>√</td>
 83 |             <td>-</td>
 84 |             <td>√</td>
 85 |             <td>-</td>
 86 |             <td>-</td>
 87 |             <td>-</td>
 88 |             <td>-</td>
 89 |         </tr>
 90 |     </tbody>
 91 | </table>
 92 | 
 93 | <h4>中文排版的重点和难点</h4>
 94 | <p>在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像<abbr title="在文字下多加一个点">着重号</abbr>。在 HTML4 中，着重号标签（<code>&lt;u&gt;</code>）已经被放弃，而 HTML5 被<a href="http://html5doctor.com/u-element/">重新提起</a>。TYPO.CSS 也根据实际情况提供相应的方案。我们重要要注意的两点是：</p>
 95 | <ol>
 96 |     <li>语义：语义对应的用法和样式是否与中文排版一致</li>
 97 |     <li>表现：在各浏览器中的字体、大小和缩放是否如排版预期</li>
 98 | </ol>
 99 | <p>对于这些，TYPO.CSS 排版项目的中文偏重注意点，都添加在附录中，详见：</p>
100 | <blockquote>
101 |     <b>附录一</b>：<a href="#appendix1">TYPO.CSS 排版偏重点</a>
102 | </blockquote>
103 | 
104 | <p>目前仍处于 alpha 开发阶段，测试平台的覆盖，特别是在<abbr title="手机、平板电脑等移动平台">移动端</abbr>上还没有覆盖完主流平台，希望有能力的同学能加入测试行列，或者加入到 TYPO.CSS 的开发。加入方法：<a href="https://github.com/sofish/typo.css">参与 TYPO.CSS 开发</a>。如有批评、建议和意见，也随时欢迎给在 Github 直接提 <a href="https://github.com/sofish/typo.css/issues">issues</a>，或给<abbr title="Sofish Lin, author of TYPO.CSS" role="author">我</abbr>发<a href="mailto:sofish@163.com">邮件</a>。</p>
105 | 
106 | 
107 | <h2 id="section2">二、排版实例：</h2>
108 | <p>提供2个排版实例，第一个中文实例来自于来自于<cite class="typo-unique">张燕婴</cite>的《论语》，由于古文排版涉及到的元素比较多，所以采用《论语》中《学而》的第一篇作为排版实例介绍；第2个来自到经典的 Lorem Ipsum，并加入了一些代码和列表等比较具有代表性的排版元素。</p>
109 | 
110 | <h3 id="section2-1">例1：论语学而篇第一</h3>
111 | <p><small><b>作者：</b><abbr title="名丘，字仲尼">孔子</abbr>（<time>前551年9月28日－前479年4月11日</time>）</small></p>
112 | 
113 | <h4>本篇引语</h4>
114 | <p>《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是“吾日三省吾身”；“节用而爱人，使民以时”；“礼之用，和为贵”以及仁、孝、信等道德范畴。 </p>
115 | 
116 | <h4>原文</h4>
117 | <p>子曰<sup><a href="#note1">[1]</a></sup>：“学<sup><a href="#note2">[2]</a></sup>而时习<sup><a href="#note3">[3]</a></sup>之，不亦说<sup><a href="#note4">[4]</a></sup>乎？有朋<sup><a href="#note5">[5]</a></sup>自远方来，不亦乐<sup><a href="#note6">[6]</a></sup>乎？人不知<sup><a href="#note7">[7]</a></sup>，而不愠<sup><a href="#note8">[8]</a></sup>，不亦君子<sup><a href="#note9">[9]</a></sup>乎？” </p>
118 | 
119 | <h4>注释</h4>
120 | <p>
121 | <small>
122 | <span id="note1">[1]</span> 子：中国古代对于有地位、有学问的男子的尊称，有时也泛称男子。《论语》书中“子曰”的子，都是指孔子而言。<br />
123 | <span id="note2">[2]</span> 学：孔子在这里所讲的“学”，主要是指学习西周的礼、乐、诗、书等传统文化典籍。 <br />
124 | <span id="note3">[3]</span> 时习：在周秦时代，“时”字用作副词，意为“在一定的时候”或者“在适当的时候”。但朱熹在《论语集注》一书中把“时”解释为“时常”。“习”，指演习礼、乐；复习诗、书。也含有温习、实习、练习的意思。 <br />
125 | <span id="note4">[4]</span> 说：音ｙｕè，同悦，愉快、高兴的意思。 <br />
126 | <span id="note5">[5]</span> 有朋：一本作“友朋”。旧注说，“同门曰朋”，即同在一位老师门下学习的叫朋，也就是志同道合的人。 <br />
127 | <span id="note6">[6]</span> 乐：与说有所区别。旧注说，悦在内心，乐则见于外。 <br />
128 | <span id="note7">[7]</span> 人不知：此句不完整，没有说出人不知道什么。缺少宾语。一般而言，知，是了解的意思。人不知，是说别人不了解自己。 <br />
129 | <span id="note8">[8]</span> 愠：音ｙùｎ，恼怒，怨恨。 <br />
130 | <span id="note9">[9]</span> 君子：《论语》书中的君子，有时指有德者，有时指有位者。此处指孔子理想中具有高尚人格的人。
131 | </small>
132 | </p>
133 | 
134 | <h4>译文</h4>
135 | <p>孔子说：“学了又时常温习和练习，不是很愉快吗？有志同道合的人从远方来，不是很令人高兴的吗？人家不了解我，我也不怨恨、恼怒，不也是一个有德的君子吗？” </p>
136 | 
137 | <h4>评析</h4>
138 | <p>宋代著名学者<u class="typo-u">朱熹</u>对此章评价极高，说它是“入道之门，积德之基”。本章这三句话是人们非常熟悉的。历来的解释都是：学了以后，又时常温习和练习，不也高兴吗等等。三句话，一句一个意思，前后句子也没有什么连贯性。但也有人认为这样解释不符合原义，指出这里的“学”不是指学习，而是指学说或主张；“时”不能解为时常，而是时代或社会的意思，“习”不是温习，而是使用，引申为采用。而且，这三句话不是孤立的，而是前后相互连贯的。这三句的意思是：自己的学说，要是被社会采用了，那就太高兴了；退一步说，要是没有被社会所采用，可是很多朋友赞同<abbr title="张燕婴">我</abbr>的学说，纷纷到我这里来讨论问题，我也感到快乐；再退一步说，即使社会不采用，人们也不理解我，我也不怨恨，这样做，不也就是君子吗？（见《齐鲁学刊》1986年第6期文）这种解释可以自圆其说，而且也有一定的道理，供读者在理解本章内容时参考。</p>
139 | <p>此外，在对“人不知，而不愠”一句的解释中，也有人认为，“人不知”的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，“人不知”就是“人家不知道我所讲述的”了。这样的解释似乎有些牵强。</p>
140 | <p>总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。</p>
141 | 
142 | <h3 id="section2-2">例2：英文排版</h3>
143 | <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
144 | <blockquote>
145 |     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
146 | </blockquote>
147 | 
148 | <h4>The standard Lorem Ipsum passage, used since the 1500s</h4>
149 | <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
150 | 
151 | <h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4>
152 | <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
153 | 
154 | <h4>List style in action</h4>
155 | <ul>
156 |     <li>If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as your brother and hope as your sentry.
157 |         <p>如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。</p>
158 |     </li>
159 |     <li>Sometimes one pays most for the things one gets for nothing.
160 |         <p>有时候一个人为不花钱得到的东西付出的代价最高。</p>
161 |     </li>
162 |     <li>Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
163 |         <p>只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。</p>
164 |     </li>
165 | </ul>
166 | 
167 | <h4>You may want to create a perfect <code>&lt;hr /&gt;</code> line, despite the fact that there will never have one</h4>
168 | <hr />
169 | <p><abbr title="法国作家罗切福考尔德">La Racheforcauld</abbr> said: <mark>"Few things are impossible in themselves; and it is often for want of will, rather than of means, that man fails to succeed".</mark> You just need to follow the browser's behavior, and set a right <code>margin</code> to it。it will works nice as the demo you're watching now. The following code is the best way to render typo in Chinese:</p>
170 | 
171 | {% highlight css %}
172 | /* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
173 | h1,h2,h3,h4,h5,h6 {
174 |     line-height:1;font-family:Arial,sans-serif;margin:1.4em 0 0.8em;
175 | }
176 | h1{font-size:1.8em;}
177 | h2{font-size:1.6em;}
178 | h3{font-size:1.4em;}
179 | h4{font-size:1.2em;}
180 | h5,h6{font-size:1em;}
181 | 
182 | /* 现代排版：保证块/段落之间的空白隔行 */
183 | .typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr {
184 |     margin:1em 0 0.6em;
185 | }
186 | {% endhighlight %}
187 | 
188 | <h3 id="section3">三、附录</h3>
189 | 
190 | <h5 id="appendix1">1、TYPO.CSS 排版偏重点</h5>
191 | <table summary="TYPO.CSS 排版偏重点">
192 |     <thead>
193 |         <tr>
194 |             <th>类型</th>
195 |             <th>语义</th>
196 |             <th>标签</th>
197 |             <th>注意点</th>
198 |         </tr>
199 |     </thead>
200 |     <tbody>
201 |         <tr>
202 |           <th rowspan="15">基础标签</th>
203 |           <td>标题</td>
204 |           <td><code>h1</code> ～ <code>h6</code></td>
205 |           <td>全局不强制大小，<code>.typo</code> 中标题与其对应的内容应紧贴，并且有相应的大小设置</td>
206 |         </tr>
207 |         <tr>
208 |           <td>上、下标</td>
209 |           <td><code>sup</code>/<code>sub</code></td>
210 |           <td>保持与 MicroSoft Office Word 等程序的日常排版一致</td>
211 |         </tr>
212 |         <tr>
213 |           <td>引用</td>
214 |           <td><code>blockquote</code></td>
215 |           <td>显示/嵌套样式</td>
216 |         </tr>
217 |         <tr>
218 |           <td>缩写</td>
219 |           <td><code>abbr</code></td>
220 |           <td>是否都有下划线，鼠标 <code>hover</code> 是否为帮助手势</td>
221 |         </tr>
222 |         <tr>
223 |           <td>分割线</td>
224 |           <td><code>hr</code></td>
225 |           <td>显示的 <code>padding</code> 和 <code>margin</code>正确</td>
226 |         </tr>
227 |         <tr>
228 |           <td>列表</td>
229 |           <td><code>ul</code>/<code>ol</code>/<code>dl</code></td>
230 |           <td>在全局没有 <code>list-style</code>，在 .<code>typo</code> 中对齐正确</td>
231 |         </tr>
232 |         <tr>
233 |           <td>定义列表</td>
234 |           <td><code>dl</code></td>
235 |           <td>全局 <code>padding</code> 和 <code>margin</code>为0， .<code>typo</code> 中对齐正确</td>
236 |         </tr>
237 |         <tr>
238 |           <td>选项</td>
239 |           <td><code>input[type=radio[, checkbox]]</code></td>
240 |           <td>与其他 <code>form</code> 元素排版时是否居中</td>
241 |         </tr>
242 |         <tr>
243 |           <td>斜体</td>
244 |           <td><code>i</code></td>
245 |           <td>只设置一种斜体，让 <code>em</code> 和  <code>cite</code> 显示为正体</td>
246 |         </tr>
247 |         <tr>
248 |           <td>强调</td>
249 |           <td><code>em</code></td>
250 |           <td>在全局显示正体，在 <code>.typo</code> 中显示与 <code>b</code> 和 <code>strong</code> 的样式一致，为粗休</td>
251 |         </tr>
252 |         <tr>
253 |           <td>加强</td>
254 |           <td><code>strong/b</code></td>
255 |           <td>显示为粗体</td>
256 |         </tr>
257 |         <tr>
258 |           <td>标记</td>
259 |           <td><code>mark</code></td>
260 |           <td>类似荧光笔</td>
261 |         </tr>
262 |         <tr>
263 |           <td>印刷</td>
264 |           <td><code>small</code></td>
265 |           <td>保持为正确字体的 80% 大小，颜色设置为浅灰色</td>
266 |         </tr>
267 |         <tr>
268 |           <td>表格</td>
269 |           <td><code>table</code></td>
270 |           <td>全局不显示线条，在 <code>table</code> 中显示表格外框，并且表头有浅灰背景</td>
271 |         </tr>
272 |         <tr>
273 |             <td>代码</td>
274 |             <td><code>pre</code>/<code>code</code></td>
275 |             <td>字体使用 <code>courier</code> 系字体，保持与 <code>serif</code> 有比较一致的显示效果</td>
276 |         </tr>
277 |         <tr>
278 |           <th rowspan="5">特殊符号</th>
279 |           <td>着重号</td>
280 |           <td>在文字下加点（•）</td>
281 |           <td>在支持 <code>:after</code> 和 <code>:before</code> 的浏览器可以做渐进增强实现</td>
282 |         </tr>
283 |         <tr>
284 |           <td>专名号</td>
285 |           <td><u>林建锋</u></td>
286 |           <td>专名号，有下划线，使用 <code>u</code> 或都 <code>.typo-u</code> 类</td>
287 |         </tr>
288 |         <tr>
289 |           <td>破折号</td>
290 |           <td>——</td>
291 |           <td>保持一划，而非两划</td>
292 |         </tr>
293 |         <tr>
294 |           <td>人民币</td>
295 |           <td>&yen;</td>
296 |           <td>使用两平等线的符号，或者 HTML 实体符号 <code>&amp;yen;</code></td>
297 |         </tr>
298 |         <tr>
299 |           <td>删除符</td>
300 |           <td><del>已删除（deleted）</del></td>
301 |           <td>一致化各浏览器显示，中英混排正确</td>
302 |         </tr>
303 |         <tr>
304 |           <th rowspan="4">加强类</th>
305 |           <td>专名号</td>
306 |           <td><code>.typo-u</code></td>
307 |           <td>由于 <code>u</code> 被 HTML4 放弃，在向后兼容上推荐使用 <code><u type="typo-u" …</code></td>
308 |         </tr>
309 |         <tr>
310 |           <td>着重符</td>
311 |           <td><code>.typo-em</code></td>
312 |           <td>利用 <code>:after</code> 和 <code>:before</code> 实现着重符</td>
313 |         </tr>
314 |         <tr>
315 |           <td>首字下沉</td>
316 |           <td><code>.typo-first</code></td>
317 |           <td>特殊排版</td>
318 |         </tr>
319 |         <tr>
320 |             <td>清除浮动</td>
321 |             <td><code>.clearfix</code></td>
322 |             <td>与一般 CSS Reset 保持一对致 API</td>
323 |         </tr>
324 |         <tr>
325 |           <th rowspan="5">注意点</th>
326 |           <td colspan="3">（1）中英文混排行高/行距</td>
327 |         </tr>
328 |         <tr>
329 |           <td colspan="3">（2）上下标在 IE 中显示效果</td>
330 |         </tr>
331 |         <tr>
332 |           <td colspan="3">（3）块/段落分割空白是否符合设计原则</td>
333 |         </tr>
334 |         <tr>
335 |           <td colspan="3">（4）input 多余空间问题</td>
336 |         </tr>
337 |         <tr>
338 |             <td colspan="3">（5）默认字体色彩，目前采用 <code>#333</code> 在各种浏览显示比较好</td>
339 |         </tr>
340 |     </tbody>
341 | </table>
342 | <h5 id="appendix2">2、开源许可</h5>
343 | <p>TYPO.CSS 基于 <a href="http://zh.wikipedia.org/wiki/MIT_License">MIT License</a> 开源，使用代码只需说明来源，或者引用 <a href="http://typo.sofish.de/license.txt">license.txt</a> 即可。</p>
344 | 


--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
  1 | /*****************************************************************************/
  2 | /*
  3 | /* Common
  4 | /*
  5 | /*****************************************************************************/
  6 | 
  7 | /* Global Reset */
  8 | * {
  9 |   margin: 0;
 10 |   padding: 0;
 11 | }
 12 | 
 13 | html, body { height: 100%; }
 14 | body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, group, menu, nav, section { margin: 0; padding: 0; }
 15 | ul, ol {
 16 |     list-style-type: none;
 17 | }
 18 | body {
 19 |     background: #92b3a2 url(../images/bg.jpg) repeat 0 0;
 20 |     font-size: 14px;
 21 |     line-height: 1.5;
 22 |     font-family: Georgia, Hiragino Sans GB,\5b8b\4f53;
 23 |     text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
 24 | }
 25 | 
 26 | h1, h2, h3, h4, h5, h6 {
 27 |   font-size: 100%; }
 28 | 
 29 | h1 { margin-bottom: 1em; }
 30 | p { margin: 1em 0; }
 31 | 
 32 | a         { color: #91736b; text-decoration: none; }
 33 | 
 34 | ::-moz-selection {background: rgba(252, 252, 82,0.2)}
 35 | ::selection {background: rgba(252, 252, 82,0.2)}
 36 | 
 37 | .fn-clear:after             { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; }
 38 | 
 39 | /*****************************************************************************/
 40 | /*
 41 | /* Jekyll theme
 42 | /*
 43 | /*****************************************************************************/
 44 | 
 45 | /* --- head --- */
 46 | .head {
 47 |     width: 100%;
 48 |     height: 120px;
 49 | }
 50 | .header {
 51 |     width: 960px;
 52 |     height: 120px;
 53 |     margin: 0 auto;
 54 | }
 55 | .logo {
 56 |     display: block;
 57 |     float: left;
 58 |     width: 72px;
 59 |     height: 104px;
 60 |     text-align: center;
 61 | }
 62 | .logo a, .logo a:hover {
 63 |     display: block;
 64 |     width: 72px;
 65 |     height: 104px;
 66 |     font-size: 38px;
 67 |     line-height: 100px;
 68 |     vertical-align: middle;
 69 |     text-decoration: none;
 70 |     color: rgba(255, 255, 255, 0.9);
 71 |     background: url(../images/logo.jpg) no-repeat -72px 0;
 72 |     -webkit-transition: color 200ms ease-in-out;
 73 |     -moz-transition: color 200ms ease-in-out;
 74 |     -ms-transition: color 200ms ease-in-out;
 75 |     -o-transition: color 200ms ease-in-out;
 76 |     transition: color 200ms ease-in-out;
 77 | }
 78 | .logo a:hover {
 79 |     color: rgba(255, 255, 255, 0.7);
 80 |     background-position: 0 0;
 81 | }
 82 | .nav {
 83 |     width: 610px;
 84 |     padding-top: 82px;
 85 |     height: 30px;
 86 |     float: left;
 87 | }
 88 | .nav-item {
 89 |     float: left;
 90 |     line-height: 30px;
 91 |     margin: 0 0 0 20px;
 92 | }
 93 | .nav-item a {
 94 |     color: #46635e;
 95 |     font-size: 14px;
 96 |     text-decoration: none;
 97 | }
 98 | .nav-item a:hover {
 99 |     border-bottom: 3px double #46635e;
100 | }
101 | .nav-item-active a {
102 |     color: #f2eeec;
103 | }
104 | .nav-item-active a:hover {
105 |     border-bottom: 3px double rgba(255, 255, 255, 0.3);
106 | }
107 | .follow {
108 |     float: left;
109 |     width: 270px;
110 |     padding-top: 80px;
111 |     height: 30px;
112 |     text-align: center;
113 | }
114 | .follow a {
115 |     text-decoration: none;
116 |     color: rgba(255, 255, 255, 0.82);
117 |     width: 30px;
118 |     height: 30px;
119 |     line-height: 30px;
120 |     background: #496661;
121 |     display: block;
122 |     float: left;
123 |     font-size: 16px;
124 |     border-radius: 60px;
125 |     vertical-align: middle;
126 |     margin-right: 10px;
127 | }
128 | .follow a:hover {
129 |     color: rgba(255, 255, 255, 0.98);
130 | }
131 | 
132 | /* --- contain --- */
133 | .contain {
134 |     width: 100%;
135 |     height: auto;
136 | }
137 | .container {
138 |     position: relative;
139 |     width: 960px;
140 |     height: auto;
141 |     min-height: 500px;
142 |     margin: 0 auto;
143 | }
144 | 
145 | .main {
146 |     float: left;
147 |     width: 600px;
148 |     padding: 40px 30px;
149 |     min-height: 600px;
150 |     height: auto;
151 |     box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
152 |     background: #e3ded8 url(../images/cnt-top.jpg) repeat-x 0 0;
153 | }
154 | 
155 | .main .article {
156 |     line-height: 1.6;
157 |     position: relative;
158 |     margin-bottom: 40px;
159 | }
160 | .main .article h1 { font-size: 22px; color: #4d4d4d; }
161 | .main .article h2 { font-size: 20px; color: #4d4d4d; }
162 | .main .article h3 { font-size: 18px; color: #4d4d4d; }
163 | .main .article h4 { font-size: 16px; color: #4d4d4d; }
164 | .main .article h5 { color: #4d4d4d; }
165 | .main .article h6 { color: #4d4d4d; }
166 | 
167 | .main .article .title {
168 |     font-size: 24px;
169 |     line-height: 32px;
170 |     border-bottom: 4px double rgba(0, 0, 0, 0.1);
171 | }
172 | .main .article .title a {
173 |     color: #4a4a4a;
174 |     line-height: 32px;
175 |     text-decoration: none;
176 | }
177 | .main .article .title a:hover {
178 |     border-bottom: none;
179 | }
180 | .main .article p {
181 |     line-height: 1.6;
182 |     color: #565656;
183 | }
184 | .main .article ul, .main .article ol {
185 |     list-style-type: disc;
186 |     padding-left: 20px;
187 |     margin-bottom: 1em;
188 | }
189 | .main .article li {
190 |      line-height: 24px;
191 | }
192 | .main .article a:hover {
193 |     border-bottom: 3px double rgba(0, 0, 0, 0.1);
194 | }
195 | .main .article blockquote {
196 |     position: relative;
197 |     padding: 10px 10px;
198 |     background: rgba(0, 0, 0, 0.1);
199 |     margin-bottom: 1em;
200 | }
201 | .main .article blockquote:after {
202 |     width: 32px;
203 |     height: 32px;
204 |     display: block;
205 |     position: absolute;
206 |     top: 0;
207 |     left: -62px;
208 |     content: "❝";
209 |     background: #44635d;
210 |     background: -moz-linear-gradient(0deg, #44635d 0%, #44635d 90%,  #263733 100%);
211 |     background: -webkit-linear-gradient(0deg, #44635d 0%, #44635d 90%, #263733 100%);
212 |     background: -o-linear-gradient(0deg, #44635d 0%,#44635d 90%,   #263733 100%);
213 |     background: -ms-linear-gradient(to 0deg, #44635d 0%, #44635d 90%,  #263733 100%);
214 |     background: linear-gradient(to 0deg, #44635d 0%,#44635d 90%,   #263733 100%);
215 |     font-size: 18px;
216 |     line-height: 32px;
217 |     text-align: center;
218 |     color: rgba(255, 255, 255, 0.8);
219 | }
220 | .main .article blockquote p {
221 |     margin: 0 0;
222 |     padding-bottom: 10px;
223 | }
224 | .main .article blockquote p:last-child {
225 |     padding-bottom: 0;
226 | }
227 | 
228 | .main .article table {
229 |     position: relative;
230 |     width: 100%;
231 |     margin-bottom: 1em;
232 |     color: #4d4d4d;
233 | }
234 | 
235 | .main .article table:after {
236 |     content: "⊞";
237 |     width: 32px;
238 |     height: 32px;
239 |     display: block;
240 |     position: absolute;
241 |     top: 0;
242 |     left: -62px;
243 |     background: #44635d;
244 |     background: -moz-linear-gradient(0deg, #44635d 0%, #44635d 90%,  #263733 100%);
245 |     background: -webkit-linear-gradient(0deg, #44635d 0%, #44635d 90%, #263733 100%);
246 |     background: -o-linear-gradient(0deg, #44635d 0%,#44635d 90%,   #263733 100%);
247 |     background: -ms-linear-gradient(to 0deg, #44635d 0%, #44635d 90%,  #263733 100%);
248 |     background: linear-gradient(to 0deg, #44635d 0%,#44635d 90%,   #263733 100%);
249 |     font-size: 18px;
250 |     line-height: 32px;
251 |     text-align: center;
252 |     color: rgba(255, 255, 255, 0.8);
253 | }
254 | .main .article table th, .main .article table td {
255 |     padding: 4px 0;
256 | }
257 | .main .article table th {
258 |     background: rgba(0, 0, 0, 0.1);
259 | }
260 | .main .article table td {
261 |     background: rgba(255, 255, 255, 0.3);
262 |     text-indent: 6px;
263 | }
264 | 
265 | .main .article pre {
266 |     margin-bottom: 1em;
267 |     padding: 10px 10px;
268 |     color: #4d4d4d;
269 |     background: rgba(0, 0, 0, 0.1);
270 |     overflow: auto;
271 | }
272 | .main .highlight {
273 |     position: relative;
274 | }
275 | 
276 | .main .highlight pre:after {
277 |     content: "</>";
278 |     width: 32px;
279 |     height: 32px;
280 |     display: block;
281 |     position: absolute;
282 |     top: 0;
283 |     left: -62px;
284 |     background: #44635d;
285 |     background: -moz-linear-gradient(0deg, #44635d 0%, #44635d 90%,  #263733 100%);
286 |     background: -webkit-linear-gradient(0deg, #44635d 0%, #44635d 90%, #263733 100%);
287 |     background: -o-linear-gradient(0deg, #44635d 0%,#44635d 90%,   #263733 100%);
288 |     background: -ms-linear-gradient(to 0deg, #44635d 0%, #44635d 90%,  #263733 100%);
289 |     background: linear-gradient(to 0deg, #44635d 0%,#44635d 90%,   #263733 100%);
290 |     font-size: 12px;
291 |     line-height: 32px;
292 |     text-align: center;
293 |     color: rgba(255, 255, 255, 0.8);
294 | }
295 | 
296 | .main .article img {
297 |     position: relative;
298 |     max-width: 100%;
299 | }
300 | 
301 | 
302 | .main .article .more {
303 |     position: absolute;
304 |     width: 32px;
305 |     height: 32px;
306 |     background: #e54e4d;
307 |     background: -moz-linear-gradient(0deg, #e54e4d 0%, #e54e4d 90%,  #b13c3c 100%);
308 |     background: -webkit-linear-gradient(0deg, #e54e4d 0%, #e54e4d 90%, #b13c3c 100%);
309 |     background: -o-linear-gradient(0deg, #e54e4d 0%,#e54e4d 90%,   #b13c3c 100%);
310 |     background: -ms-linear-gradient(to 0deg, #e54e4d 0%, #e54e4d 90%,  #b13c3c 100%);
311 |     background: linear-gradient(to 0deg, #e54e4d 0%,#e54e4d 90%,   #b13c3c 100%);
312 |     display: block;
313 |     top: 0;
314 |     left: -62px;
315 |     text-decoration: none;
316 |     font-size: 18px;
317 |     line-height: 32px;
318 |     text-align: center;
319 |     color: rgba(255, 255, 255, 0.98);
320 | }
321 | .main .article .more:hover {
322 |     border-bottom: none;
323 |     color: rgba(255, 255, 255, 0.86);
324 | }
325 | .main .article .info {
326 |     font-size: 14px;
327 |     line-height: 24px;
328 |     vertical-align: middle;
329 | }
330 | .main .article-post .info {
331 |     margin-bottom: 30px;
332 | }
333 | .main .article .info-title {
334 |     color: #888;
335 |     vertical-align: middle;
336 |     line-height: 24px;
337 | }
338 | .main .article .info-date {
339 |     margin-right: 15px;
340 |     color: #565656;
341 |     line-height: 24px;
342 |     vertical-align: middle;
343 | }
344 | .main .article .info-link {
345 |     margin-right: 15px;
346 |     line-height: 24px;
347 |     vertical-align: middle;
348 |     border-bottom: none;
349 | }
350 | .main .article .info-link a:hover {
351 |     border-bottom: none;
352 | }
353 | 
354 | .main .pagination {
355 |     line-height: 32px;
356 |     padding-top: 20px;
357 | 
358 | }
359 | .main .pagination li {
360 |     float: left;
361 |     margin: 0 10px 10px 0;
362 | }
363 | 
364 | .main .pagination-icon {
365 |     width: 32px;
366 |     height: 32px;
367 |     display: block;
368 |     float: left;
369 |     font-size: 16px;
370 |     line-height: 32px;
371 |     text-align: center;
372 |     color: #fefefe;
373 |     background: #99b9c4;
374 | }
375 | .main .pagination-list {
376 |     margin-left: 10px;
377 |     width: 550px;
378 |     height: 32px;
379 |     line-height: 32px;
380 |     float: left;
381 | }
382 | .main .pagination-list li a {
383 |     width: 32px;
384 |     height: 32px;
385 |     display: block;
386 |     background: #f2eeec;
387 |     text-align: center;
388 | }
389 | .main .pagination-list .current a {
390 |     background: #e54e4d;
391 |     color: #fefefe;
392 | }
393 | 
394 | .main .article .article-year {
395 |     position: relative;
396 |     margin: 30px 0;
397 |     padding: 0 0;
398 |     list-style: none;
399 | }
400 | .main .article-year:after {
401 |     content: attr(data-year);
402 |     width: 32px;
403 |     height: 32px;
404 |     display: block;
405 |     position: absolute;
406 |     top: 0;
407 |     left: -62px;
408 |     background: #e54e4d;
409 |     background: -moz-linear-gradient(0deg, #e54e4d 0%, #e54e4d 90%,  #b13c3c 100%);
410 |     background: -webkit-linear-gradient(0deg, #e54e4d 0%, #e54e4d 90%, #b13c3c 100%);
411 |     background: -o-linear-gradient(0deg, #e54e4d 0%,#e54e4d 90%,   #b13c3c 100%);
412 |     background: -ms-linear-gradient(to 0deg, #e54e4d 0%, #e54e4d 90%,  #b13c3c 100%);
413 |     background: linear-gradient(to 0deg, #e54e4d 0%,#e54e4d 90%,   #b13c3c 100%);
414 |     font-size: 12px;
415 |     line-height: 32px;
416 |     text-align: center;
417 |     color: rgba(255, 255, 255, 0.8);
418 | }
419 | .main .article-year li {
420 |     line-height: 32px;
421 |     padding-bottom: 10px;
422 | }
423 | .main .article-year li span {
424 |     width: 60px;
425 |     text-align: right;
426 |     padding: 0 10px;
427 |     display: block;
428 |     float: left;
429 |     line-height: 32px;
430 |     background: #99b9c4;
431 |     color: #fefefe;
432 | }
433 | .main .article-year li a {
434 |     width: 500px;
435 |     display: block;
436 |     float: left;
437 |     line-height: 32px;
438 |     background: #f2eeec;
439 |     padding: 0 10px;
440 | }
441 | .main .article-year li a:hover {
442 |     color: #45625d;
443 |     border-bottom: none;
444 | }
445 | .main .article .about {
446 |     margin: 30px 0;
447 |     position: relative;
448 |     height: auto;
449 | }
450 | .main .article .about:after {
451 |     content: "❍";
452 |     width: 32px;
453 |     height: 32px;
454 |     display: block;
455 |     position: absolute;
456 |     top: 0;
457 |     left: -62px;
458 |     background: #e54e4d;
459 |     background: -moz-linear-gradient(0deg, #e54e4d 0%, #e54e4d 90%,  #b13c3c 100%);
460 |     background: -webkit-linear-gradient(0deg, #e54e4d 0%, #e54e4d 90%, #b13c3c 100%);
461 |     background: -o-linear-gradient(0deg, #e54e4d 0%,#e54e4d 90%,   #b13c3c 100%);
462 |     background: -ms-linear-gradient(to 0deg, #e54e4d 0%, #e54e4d 90%,  #b13c3c 100%);
463 |     background: linear-gradient(to 0deg, #e54e4d 0%,#e54e4d 90%,   #b13c3c 100%);
464 |     font-size: 12px;
465 |     line-height: 32px;
466 |     text-align: center;
467 |     color: rgba(255, 255, 255, 0.8);
468 | }
469 | .main .article .about-image {
470 |     width: 200px;
471 |     float: left;
472 |     height: auto;
473 | }
474 | .main .article .about-image img {
475 |     width: 196px;
476 |     height: auto;
477 |     border: 2px solid #99b9c4;
478 | }
479 | .main .article .about-image img:hover {
480 |     border: 2px solid #43625c;
481 | }
482 | .main .article .about-text {
483 |     width: 380px;
484 |     float: left;
485 |     margin-right: 20px;
486 | }
487 | .main .article .about-text p:first-child {
488 |     margin-top: 0;
489 | }
490 | .main .article .social {
491 |     margin: 30px 0;
492 |     position: relative;
493 |     clear: both;
494 |     height: auto;
495 | }
496 | .main .article .social:after {
497 |     content: "☛";
498 |     width: 32px;
499 |     height: 32px;
500 |     display: block;
501 |     position: absolute;
502 |     top: 0;
503 |     left: -62px;
504 |     background: #e54e4d;
505 |     background: -moz-linear-gradient(0deg, #e54e4d 0%, #e54e4d 90%,  #b13c3c 100%);
506 |     background: -webkit-linear-gradient(0deg, #e54e4d 0%, #e54e4d 90%, #b13c3c 100%);
507 |     background: -o-linear-gradient(0deg, #e54e4d 0%,#e54e4d 90%,   #b13c3c 100%);
508 |     background: -ms-linear-gradient(to 0deg, #e54e4d 0%, #e54e4d 90%,  #b13c3c 100%);
509 |     background: linear-gradient(to 0deg, #e54e4d 0%,#e54e4d 90%,   #b13c3c 100%);
510 |     font-size: 12px;
511 |     line-height: 32px;
512 |     text-align: center;
513 |     color: rgba(255, 255, 255, 0.8);
514 | }
515 | .main .article .social a {
516 |     width: 32px;
517 |     height: 32px;
518 |     display: block;
519 |     text-align: center;
520 |     line-height: 32px;
521 |     margin: 0 10px 10px 0;
522 |     background: #f2eeec;
523 |     float: left;
524 | }
525 | .main .article .social a:hover {
526 |     background: #99b9c4;
527 |     color: #fefefe;
528 |     border-bottom:  none;
529 | }
530 | .main .article .contact {
531 |     margin: 30px 0;
532 |     position: relative;
533 |     height: auto;
534 | }
535 | .main .article .contact a {
536 |     line-height: 32px;
537 |     height: 32px;
538 |     display: inline-block;
539 |     text-align: center;
540 |     padding: 0 10px;
541 |     background: #f2eeec;
542 |     width: auto;
543 | }
544 | .main .article .contact a:hover {
545 |     background: #99b9c4;
546 |     color: #fefefe;
547 |     border-bottom:  none;
548 | }
549 | 
550 | .main .article .links {
551 |     margin: 30px 0;
552 | }
553 | .main .article .links-category {
554 |     margin-bottom: 10px;
555 | }
556 | .main .article .links-list {
557 |     width: 100%;
558 |     clear: both;
559 |     list-style-type: none;
560 |     padding: 0 0;
561 | }
562 | .main .article .links-list li {
563 |     width: 40%;
564 |     margin: 0 10% 10px 0;
565 |     padding: 0 0;
566 |     float: left;
567 | }
568 | 
569 | .main .article .links-list li a {
570 |     display: block;
571 |     line-height: 32px;
572 |     height: 32px;
573 |     padding: 0 10px;
574 |     background: #f2eeec;
575 | }
576 | .main .article .links-list li a:hover {
577 |     border-bottom: none;
578 |     color: #45625d;
579 | }
580 | .main .article .article-previous {
581 |     margin: 20px 0;
582 |     border-top: 1px solid rgba(0, 0, 0, 0.1);
583 |     padding: 10px 0;
584 |     position: relative;
585 | }
586 | .main .article .article-previous .prev,
587 | .main .article .article-previous .next {
588 |     display: inline-block;
589 |     height: 32px;
590 |     line-height: 32px;
591 |     padding: 0 10px;
592 |     background: #f2eeec;
593 |     border-bottom:  none;
594 | }
595 | .main .article .article-previous .prev {
596 |     float: left;
597 | }
598 | .main .article .article-previous .next {
599 |     float: right;
600 | }
601 | .main .article .article-previous .prev:hover,
602 | .main .article .article-previous .next:hover {
603 |     border-bottom: none;
604 |     color: #45625d;
605 | }
606 | .main .article .comment {
607 |     margin: 30px 0 0 0;
608 | }
609 | 
610 | .main .article .categories {
611 |     width: 100%;
612 |     overflow: hidden;
613 |     margin: 20px 0;
614 |     padding-left: 0;
615 | }
616 | .main .categories .categories-item {
617 |     list-style-type: none;
618 |     background: #99b9c4;
619 |     color: #fff;
620 |     margin-right: 10px;
621 |     padding: 3px 20px;
622 |     float: left;
623 | }
624 | .main .categories .categories-item a {
625 |     color: #fff;
626 | }
627 | 
628 | .aside {
629 |     padding: 20px 20px 40px 20px;
630 |     margin-top: 26px;
631 |     float: left;
632 |     background: #f2eeec url(../images/aside-bg.jpg) no-repeat 0px 0px;
633 |     width: 240px;
634 |     min-height: 500px;
635 |     height: auto;
636 |     box-shadow:  3px 3px 6px rgba(0, 0, 0, 0.1), 1px 0 4px rgba(0, 0, 0, 0.3) inset;
637 | }
638 | .aside-contact {
639 |     width: 220px;
640 |     height: auto;
641 |     padding: 10px 10px;
642 |     border-radius: 5px 5px;
643 |     background: rgba(110, 70, 60, 0.72);
644 |     text-align: left;
645 | }
646 | .aside-contact .title {
647 |     line-height: 24px;
648 |     color: #232323;
649 |     font-size: 14px;
650 |     line-height: 24px;
651 |     font-family: 'Spirax', cursive;
652 |     text-transform: uppercase;
653 | }
654 | .aside-contact .det {
655 |     padding: 10px 0;
656 |     line-height: 24px;
657 |     color: #232323;
658 |     clear: both;
659 |     height: auto;
660 | }
661 | .aside-contact .det-image {
662 |     width: 48px;
663 |     height: 48px;
664 |     float: left;
665 |     padding: 2px 2px;
666 |     background: #fff;
667 |     border: 1px solid #9d6156;
668 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
669 | }
670 | .aside-contact .det-image img {
671 |     width: 48px;
672 |     height: 48px;
673 |     display: block;
674 |     text-align: center;
675 |     vertical-align: middle;
676 | }
677 | .aside-contact .det-text {
678 |     width: 150px;
679 |     padding-left: 10px;
680 |     float: left;
681 |     font-size: 12px;
682 |     line-height: 18px;
683 | }
684 | .aside-contact .det-text p {
685 |     padding-top: 0;
686 |     margin-top: 0;
687 | }
688 | .aside-contact .det-text p:last-child {
689 |     padding-bottom: 0;
690 |     margin-bottom: 0;
691 | }
692 | .aside-item {
693 |     margin: 20px 0;
694 | }
695 | .aside-item .title {
696 |     line-height: 24px;
697 |     color: #232323;
698 |     font-size: 14px;
699 |     line-height: 24px;
700 |     padding-bottom: 3px;
701 |     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
702 |     box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
703 |     font-family: 'Spirax', cursive;
704 |     text-transform: uppercase;
705 | }
706 | .aside-item .list {
707 |     padding: 10px 0;
708 |     margin-bottom: 10px;
709 |     font-size: 14px;
710 |     font-family: Arial;
711 |     list-style-type: disc;
712 |     line-height: 24px;
713 |     padding-left: 18px;
714 |     text-decoration: none;
715 | }
716 | .aside-item .list a {
717 |     color: #91736b;
718 |     text-decoration: none;
719 | }
720 | .aside-item .list a:hover {
721 |     border-bottom: 3px double rgba(0, 0, 0, 0.1);
722 | }
723 | /* --- foot --- */
724 | .foot {
725 |     width: 100%;
726 |     height: 100px;
727 | }
728 | .footer {
729 |     width: 960px;
730 |     padding-top: 20px;
731 |     height: 80px;
732 |     margin: 0 auto;
733 | }


--------------------------------------------------------------------------------