update aside style

components/button.md

-# 按钮
+# Button 按钮
 
 ---
 
-123
+这是一个按钮。
 
 ```html
 <button>按钮</button>

components/select.md

+# Select 选择框
+
+---
+
+这是一个下拉选择器。
+
+```html
+<Select>选择器</Select>
+```
+

static/style.css

@@ -2,14 +2,16 @@ html {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: Consolas, "Microsoft Yahei", "tahoma", "arial", "\5b8b\4f53";
-  font-size: 1em;
-  color: #BEC4C8;
 }
 html,
 body {
   height: 100%;
 }
+body {
+  font-family: Consolas, "Microsoft Yahei", "tahoma", "arial", "\5b8b\4f53";
+  line-height: 1.5;
+  color: #999;
+}
 *,
 *:after,
 *:before {
@@ -32,7 +34,7 @@ li {
   list-style: none;
 }
 a {
-  color: #BEC4C8;
+  color: #6EB4E0;
   text-decoration: none;
   transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1);
   -webkit-transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1);
@@ -42,8 +44,9 @@ a:hover {
 }
 header {
   width: 100%;
-  background: #ffffff;
+  background: #fff;
   overflow: hidden;
+  border-bottom: 1px solid #eee;
 }
 .fn-alpha-in {
   opacity: 1 !important;
@@ -53,7 +56,7 @@ header {
 }
 .logo {
   float: left;
-  width: 173px;
+  width: 179px;
   height: 46px;
   margin: 20px 30px;
   transition: margin .3s cubic-bezier(0.075, 0.82, 0.165, 1), width .3s cubic-bezier(0.075, 0.82, 0.165, 1), height .3s cubic-bezier(0.075, 0.82, 0.165, 1);
@@ -291,6 +294,8 @@ header {
 footer {
   animation: yBottomMatrix .5s ease-out .7s backwards;
   -webkit-animation: yBottomMatrix .5s ease-out .7s backwards;
+  clear: both;
+  border-top: 1px solid #eee;
 }
 footer ul {
   overflow: hidden;
@@ -314,34 +319,19 @@ footer h3 {
   color: #5C6B77;
   font-weight: normal;
 }
-footer>h3 {
+footer > h3 {
   text-align: center;
   font-size: .75em;
   display: none;
   margin: auto;
   padding: 10px 0;
 }
-footer ul li>a {
+footer ul li > a {
   font-size: 0.75em;
   display: block;
   margin: 5px auto;
 }
-/***********content**************/
-
-.content-box {
-  width: 100%;
-  height: 100%;
-  overflow: inherit;
-  animation: yTopMatrix .3s ease-out;
-  -webkit-animation: yTopMatrix .3s ease-out;
-}
-.content-line {
-  width: 96%;
-  background: #EBEDEE;
-  height: 1px;
-  margin: auto;
-}
-.content-left {
+.aside-container {
   width: 240px;
   float: left;
   height: 100%;
@@ -349,57 +339,50 @@ footer ul li>a {
   position: absolute;
   animation: xLeftMatrix .5s ease-out .3s backwards;
   -webkit-animation: xLeftMatrix .5s ease-out .3s backwards;
+  padding-top: 20px;
 }
-.content-left>ul {
-  width: 100%;
-  margin: 20px auto;
-}
-.content-left>ul>li {
-  position: relative;
-  line-height: 40px;
-  overflow: hidden;
-}
-.content-left .list-one {
-  display: block;
-  padding-left: 30px;
-  width: 100%;
-  font-size: 1em;
-  color: #5C6B77;
+
+.aside-container li {
+  margin-left: 5px;
 }
-.content-left .list-tow {
+
+.aside-container li a {
+  line-height: 44px;
+  height: 44px;
   display: block;
-  padding-left: 40px;
-  font-size: 0.875em;
-  color: #788692;
+  padding-left: 60px;
+  font-size: 14px;
+  color: #5C6B76;
+  border-left: 3px solid transparent;
 }
-.content-left .list-tow>p {
-  display: inline-block;
-  font-size: 0.75em;
-  padding-left: 10px;
-}
-.content-left>ul>li>ul {
-  background: #f6f6f6;
-}
-.content-left .hover>a {
-  background: #ffffff;
+
+.aside-container li a:hover {
+  color: #6EB4E0;
 }
-.content-left .hover>a:before {
-  content: "";
-  display: inline-block;
-  width: 4px;
-  background: #6EB4E0;
-  height: 40px;
-  left: 0;
-  position: absolute;
+
+.aside-container li.current > a {
+  background: #fff;
+  border-left: 3px solid #71B5DE;
+  color: #71B5DE;
 }
-.content-right {
+
+.main-container {
   width: calc(100% - 240px);
   float: right;
   padding: 30px 40px;
   animation: xRightMatrix .5s ease-out .5s backwards;
   -webkit-animation: xRightMatrix .5s ease-out .5s backwards;
+  height: 100%;
+}
+
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #5C6B77;
 }
-/**************/
 
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
   .nav {

theme/templates/aside.html

 {%- set items = resource.pages|find_category(post.meta.category) %}
-<aside>
+<aside class="aside-container">
   <ul>
     {%- for item in items %}
-    <li><a href="{{permalink_url(item)}}">{{item.title}}</a></li>
+    <li class="{%- if item.title === post.title %}current{%- endif %}">
+      <a href="{{permalink_url(item)}}">{{item.title}}</a>
+    </li>
     {%- endfor %}
   </ul>
 </aside>

theme/templates/layout.html

@@ -56,15 +56,17 @@
   </div>
   <script src="/static/home.js"></script>
   {%- else %}
-  <article class="markdown">
-    <h1>{{ post.title }}</h1>
-    {{ post.html }}
-  </article>
+  <section class="main-container">
+    <article class="markdown">
+      <h1>{{ post.title }}</h1>
+      {{ post.html }}
+    </article>
+  </section>
   {%- endif %}
   <footer id="footer">
     <ul>
       <li>
-        <h2>Ｇitlab仓库</h2>
+        <h2>Gitlab仓库</h2>
         <a href="">脚手架 - Flaming Water</a>
         <a href="">组件 - Flaming Cloud Component</a>
       </li>