fixing thumbnail bug, fine-tuning list style for documentation

Author: jueyang

_layouts/doc.html

@@ -78,7 +78,7 @@ <h1>Overview</h1>
         .css('top',original.prop('offsetTop'))
         .css('left',original.prop('offsetLeft') + fullimage.prop('width') + 12)
         .bind('click',closeImg);
-      var closeImg = function(){
+      function closeImg(){
         fullimage.remove();
         close.remove();
       };

_posts/en/beginner/0200-11-25-hierarchy-reference.md

@@ -0,0 +1,34 @@
+---
+layout: doc
+title: Hierarchy reference
+permalink: /en/beginner/hierarchy-reference
+lang: en
+category: beginner
+---
+
+Title of the section
+====================
+
+Subsection 1
+------------
+
+This is a normal paragraph, serving as overview, or description of a
+general topic. It does not provide directions or steps.
+
+Subsection 2
+------------
+
+1. First, prep the ingredients and make sure you have all the equipments.
+    - Chill shaker.
+    - Put the egg whites.
+2. Second, action time.
+    - Shake furiously.
+3. Cool. You are done.
+    - Texture is looking great.
+
+Subsection 3
+------------
+
+- Check this out. Notice these things.
+    -   Pay attention to A.
+    -   Don't forget B.

reset.css

@@ -30,7 +30,7 @@ footer, header, hgroup, menu, nav, section {
   display: block;
   }
 body { line-height: 1; }
-ol, ul { list-style: none;  }
+ol,ul { list-style: none;  }
 blockquote, q { quotes: none; }
 blockquote:before, blockquote:after,
 q:before, q:after { content: ''; content: none; }

style.css

@@ -32,6 +32,37 @@
   clear:both;
   }
 
+/* custom list style */
+.doc ol,
+.doc ul {
+  counter-reset:li;
+  margin-left:0;
+  padding-left:0;
+  }
+  .doc ol > li,
+  .doc ul > li {
+    position:relative;
+    }
+    .doc ol > li:before,
+    .doc ul > li:before {
+      position:absolute;
+      top:-1px;
+      left:-3em;
+      width:2em;
+      font-family:'Source Sans Pro',sans-serif;
+      font-size:12px;
+      text-align:center;
+    }
+    .doc ul > li:before {content:'●'}
+    .doc ol > li:before {
+      content:counter(li);
+      counter-increment:li;
+      border-radius:50%;
+      background:#f0f0f0;
+      }
+      .doc ol li ul > li:before,
+      .doc ul li ul > li:before {content:'➝';}
+
 /* --------------------------------------------------------
   Colors
 -------------------------------------------------------- */
@@ -81,11 +112,10 @@ h4 {
   font-size: 16px;
   margin-bottom:26px;
   }
-p, ul{
+p {
   margin: 0 0 20px;
   line-height:28px;
   }
-
 a {
   text-decoration: none;
   color: #404040;
@@ -95,6 +125,10 @@ a:hover {
   color: #79bc5f;
 }
 
+.doc ul {margin: 20px 0;}
+.doc li,.doc p {font-family:'Quattrocento',serif;}
+.doc li {margin-left:30px;}
+
 small {
   font-size:12px;
   line-height:16px;
@@ -124,23 +158,6 @@ pre {
   -o-transition: all 200ms linear;
 }
 
-.doc li, .doc p {
-  font-family:'Quattrocento',serif;
-  list-style-type: square;
- }
-.doc li {
-  margin:0 0 20px 0;
-}
-.doc li p {
-  margin:0; /* p and ul inside of an li does not need bottom margins*/
-}
-.doc li ul {
-  margin:20px 0 0 20px;
-}
-.doc li ul li {
-  list-style-type: circle;
-}
-
 /* --------------------------------------------------------
   Layout
 -------------------------------------------------------- */
@@ -239,22 +256,23 @@ pre {
       color:#fff;
     }
 
-.email:before,.twitter:before,.translation:before,
-.email:hover:before,.twitter:hover:before,.translation:hover:before {
-  content:'';
-  float:left;
-  margin-right:20px;
-  width:16px;
-  height:20px;
-  background:url(./images/sprite.png) no-repeat;
-  overflow:hidden;
-}
-  .email:before {background-position:-19px -87px;}
-  .email:hover:before {background-position:-19px -107px;}
-  .twitter:before {background-position:-50px -87px;}
-  .twitter:hover:before {background-position:-50px -107px;}
-  .translation:before {background-position:-80px -87px;}
-  .translation:hover:before {background-position:-80px -107px;}
+.contact li {margin-bottom:20px;}
+  .email:before,.twitter:before,.translation:before,
+  .email:hover:before,.twitter:hover:before,.translation:hover:before {
+    content:'';
+    float:left;
+    margin:-5px 18px 0 0;
+    width:16px;
+    height:20px;
+    background:url(./images/sprite.png) no-repeat;
+    overflow:hidden;
+  }
+    .email:before {background-position:-19px -87px;}
+    .email:hover:before {background-position:-19px -107px;}
+    .twitter:before {background-position:-50px -87px;}
+    .twitter:hover:before {background-position:-50px -107px;}
+    .translation:before {background-position:-80px -87px;}
+    .translation:hover:before {background-position:-80px -107px;}
 
 .searchbox {
   height:30px;
@@ -279,7 +297,10 @@ pre {
   }
 
 .faqbox h4 {margin-bottom:46px;}
-.faq li {padding:1px 0 0 0;}
+.faq li {
+  margin:4px 0;
+  padding:1px 0 0 0;
+  }
   .faq li a:before {
     content:'';
     float:left;