* update article.less.

examples/article.html

@@ -116,7 +116,7 @@
               <p><strong>摘要：</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, necessitatibus provident quasi suscipit laborum nemo tenetur ad accusantium explicabo pariatur?</p>
             </section>
           </header>
-          <section>
+          <section class="article-content">
             <h1>Lorem ipsum dolor sit amet.</h1>
             <h2>Lorem ipsum dolor sit amet, consectetur.</h2>
             <h3>Lorem ipsum dolor sit amet, consectetur.</h3>
@@ -245,7 +245,7 @@
               <p><strong>摘要：</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, necessitatibus provident quasi suscipit laborum nemo tenetur ad accusantium explicabo pariatur?</p>
             </section>
           </header>
-          <section>
+          <section class="article-content">
             <h1>Lorem ipsum dolor sit amet.</h1>
             <h2>Lorem ipsum dolor sit amet, consectetur.</h2>
             <h3>Lorem ipsum dolor sit amet, consectetur.</h3>

src/less/views/article.less

@@ -48,122 +48,127 @@
     }
   }
 
-  > section
+  > footer
   {
-    padding: @line-height-computed 0;
-
-    h1 
-    {
-      font-size: @article-font-size-h1;
-      border-bottom: @active-border-width * 2 double @article-headings-border-color;
-      &:before
-      {
-        content: "§ ";
-      }
-    }
-    h2 
-    {
-      font-size: @article-font-size-h2;
-      border-bottom: @active-border-width solid @article-headings-border-color;
-      // &:before
-      // {
-      //   content: "◈ ";
-      // }
-    }
-    h3 
-    {
-      font-size: @article-font-size-h3;
-      border-bottom: @active-border-width double @article-headings-border-color;
-      // &:before
-      // {
-      //   content: "◈ ";
-      // }
-    }
-    h4 
-    {
-      font-size: @article-font-size-h4;
-      border-bottom: 1px solid @article-headings-border-color;
-      padding-left: 0.5em;
-      border-left: @active-border-width * 4 solid @article-headings-border-color;
-    }
-    h5 
-    {
-      font-size: @article-font-size-h5;
-      padding-left: 0.5em;
-      border-bottom: 1px dashed @article-headings-border-color;
-      border-left: @active-border-width * 4 solid @article-headings-border-color;
-    }
-    h6 
+    border-top: 1px dashed darken(@article-abstract-bg, 10%);
+    > p
     {
-      font-size: @article-font-size-h6;
-      padding-left: 0.5em;
-      border-left: @active-border-width * 2 solid @article-headings-border-color;
+      padding: @article-section-padding;
     }
+  }
+}
 
-    img
-    {
-      margin-bottom: @line-height-computed / 2;
-      border-radius: @border-radius-base;
-      .transition(all,@animation-speed-normal,@animation-type);
-      .box-shadow(@article-img-shadow);
+.article-content
+{
+  padding: @line-height-computed 0;
 
-      &:hover
-      {
-        .box-shadow(@article-img-shadow-hover);
-      }
+  h1 
+  {
+    font-size: @article-font-size-h1;
+    border-bottom: @active-border-width * 2 double @article-headings-border-color;
+    &:before
+    {
+      content: "§ ";
     }
+  }
+  h2 
+  {
+    font-size: @article-font-size-h2;
+    border-bottom: @active-border-width solid @article-headings-border-color;
+    // &:before
+    // {
+    //   content: "◈ ";
+    // }
+  }
+  h3 
+  {
+    font-size: @article-font-size-h3;
+    border-bottom: @active-border-width double @article-headings-border-color;
+    // &:before
+    // {
+    //   content: "◈ ";
+    // }
+  }
+  h4 
+  {
+    font-size: @article-font-size-h4;
+    border-bottom: 1px solid @article-headings-border-color;
+    padding-left: 0.5em;
+    border-left: @active-border-width * 4 solid @article-headings-border-color;
+  }
+  h5 
+  {
+    font-size: @article-font-size-h5;
+    padding-left: 0.5em;
+    border-bottom: 1px dashed @article-headings-border-color;
+    border-left: @active-border-width * 4 solid @article-headings-border-color;
+  }
+  h6 
+  {
+    font-size: @article-font-size-h6;
+    padding-left: 0.5em;
+    border-left: @active-border-width * 2 solid @article-headings-border-color;
+  }
+
+  img
+  {
+    margin-bottom: @line-height-computed / 2;
+    border-radius: @border-radius-base;
+    .transition(all,@animation-speed-normal,@animation-type);
+    .box-shadow(@article-img-shadow);
 
-    dl
+    &:hover
     {
-      padding-left: 2em;
-      padding-right: 2em;
+      .box-shadow(@article-img-shadow-hover);
     }
+  }
 
-    table
-    {
-      width: 100%;
-      margin-bottom: @line-height-computed;
+  dl
+  {
+    padding-left: 2em;
+    padding-right: 2em;
+  }
 
-      // Cells
-      >thead,
-      >tbody,
-      >tfoot
+  table
+  {
+    width: 100%;
+    margin-bottom: @line-height-computed;
+
+    // Cells
+    >thead,
+    >tbody,
+    >tfoot
+    {
+      >tr
       {
-        >tr
+        >th,
+        >td
         {
-          >th,
-          >td
-          {
-            padding: @table-cell-padding;
-            line-height: @line-height-base;
-            vertical-align: top;
-            border-bottom: 1px solid @table-border-color;
-            // border-top: 1px solid lighten(@table-border-color, 5%);
+          padding: @table-cell-padding;
+          line-height: @line-height-base;
+          vertical-align: top;
+          border-bottom: 1px solid @table-border-color;
+          // border-top: 1px solid lighten(@table-border-color, 5%);
 
-            .transition(all,@animation-speed-fast,@animation-type);
-          }
+          .transition(all,@animation-speed-fast,@animation-type);
         }
       }
-      // Bottom align for column headings
-      > thead > tr > th 
-      {
-        vertical-align: bottom;
-        border-bottom: 1px solid @table-border-color;
-        background-color: @table-head-bg;
-      }
     }
-  }
-
-  > footer
-  {
-    border-top: 1px dashed darken(@article-abstract-bg, 10%);
-    > p
+    // Bottom align for column headings
+    > thead > tr > th 
     {
-      padding: @article-section-padding;
+      vertical-align: bottom;
+      border-bottom: 1px solid @table-border-color;
+      background-color: @table-head-bg;
     }
   }
 }
 
+body.article-content
+{
+  padding: 8px;
+}
+
 .article-condensed
 {
   padding: @article-padding 0;
@@ -180,7 +185,7 @@
     }
   }
 
-  > section
+  > .article-content
   {
     > p,
     > blockquote,
@@ -260,7 +265,7 @@
 html[lang="zh-CN"],
 html[lang="zh-cn"]
 {
-  .article > section p
+  .article > .article-content p
   {
     text-indent: 2em;
   }