typo enhancement

Author: aispin

source/_posts/2016-10-24-decorator.md

@@ -17,14 +17,12 @@ wechat:
     share_desc: 麻麻说：写代码一定要优雅
 ---
 
-<!-- more -->
-
-# Javascript 中的装饰器
-
 ## 前言
 
 在 ES6 中增加了对类对象的相关定义和操作（比如 `class` 和 `extends` ），这就使得我们在多个不同类之间共享或者扩展一些方法或者行为的时候，变得并不是那么优雅。这个时候，我们就需要一种更优雅的方法来帮助我们完成这些事情。
 
+<!-- more -->
+
 ## Python 中的装饰器
 
 decorators 即 装饰器，这一特性的提出来源于 python 之类的语言，如果你熟悉 python 的话，对它一定不会陌生。那么我们先来看一下 python 里的装饰器是什么样子的吧：

themes/lattice/layout/_partial/common/header.swig

@@ -13,7 +13,7 @@
                         {{ header_menu('main-nav') }}
                     </ul>
                 </nav>
-                <div class="mod-search">
+                <div class="mod-search" id="J_search">
                     <a class="fa fa-search mod-search-ico" id="J_searchTrigger" title="{{ __('menu.search') }}"></a>
                     <form id="J_searchForm" method="get" class="mod-search-form" action="/search/">
                         <input type="text" name="query" class="mod-search-ipt" id="J_searchInput" placeholder="{{ __('menu.search') }}" />

themes/lattice/layout/_partial/post/main.swig

@@ -1,8 +1,9 @@
 <!-- Post -->
 <article class="post">
+    <div class="post-cover"><img src="{{ post_img( post.cover|default(theme.post.cover) ) }}" alt="{{ post.title }}" /></div>
     <header class="post-hd">
         {{seachData()}}
-        <h2 class="post-tit">{{ post.title }}</h2>
+        <h1 class="post-tit">{{ post.title }}</h1>
         <div class="post-meta">
             by <a target="_blank" href="https://github.com/{{ author.github_name }}" class="post-author">{{ author.nick|default(author.github_name) }}</a> on <span>{{ date(post.date) }}</span>
         </div>
@@ -11,9 +12,6 @@
         {% endif %}
         <span style="display:none;" id="busuanzi_value_page_pv"></span>
     </header>
-
-    <div class="post-cover"><img src="{{ post_img( post.cover|default(theme.post.cover) ) }}" alt="{{ post.title }}" /></div>
-    
     <div class="post-content">
         {{ page_anchor(post.content) }}
 

themes/lattice/source/css/_base/_mixins.styl

@@ -5,7 +5,7 @@ the-transition() {
 }
 
 mobile() {
-  @media (max-width: 989px) {
+  @media (max-width: 1023px) {
     {block}
   }
 }
@@ -17,7 +17,7 @@ mobile() {
 // }
 
 desktop() {
-  @media (min-width: 990px) and (max-width: 1189px) {
+  @media (min-width: 1014px) and (max-width: 1279px) {
     {block}
   }
 }

themes/lattice/source/css/_base/_vars.styl

@@ -2,6 +2,7 @@
 color-default = #646464
 color-accent = #1abc9c
 color-grey = #999
+color-grey-lite   = #eee
 color-border = #ddd
 color-link = #333
 color-dark = #000
@@ -16,7 +17,6 @@ color-facebook = #3b5998
 color-pinterest = #cb2027
 color-google = #dd4b39
 $color-theme = #6190e8
-$gainsboro    = #eee
 color-primary = $color-theme
 
 bg-primary = $color-theme

themes/lattice/source/css/_base/header.styl

@@ -66,6 +66,10 @@
             width: 30px
             line-height: 30px
             text-align: center
+            color: color-default
+        &.active
+          .mod-search-ico
+            background: color-grey-lite
         &-form
             overflow:hidden
             opacity: 0
@@ -82,11 +86,13 @@
             box-sizing: border-box
             border: 1px solid #eee
             background-color: #fcfcfc
+            outline: none
             &::-webkit-input-placeholder
                 font-size: 14px
 
     +mobile() {
         padding: 0 15px
+        box-shadow: 0 1px 2px rgba(0,0,0,.1)
         &-main {
             position: absolute
             top: 60px

themes/lattice/source/css/_base/layout.styl

@@ -17,32 +17,22 @@
     padding-top: 20px
     +mobile() {
         // background: #eaeaea
+        padding-top: 1px
     }
 
 .mod-main
     float:left
     width: 930px
     margin-right: 20px
-    +mobile() {
-        float: none
-        margin-right: 0
-        width: 100%
-    }
     +desktop-large() {
         width: 1230px
     }
     +desktop() {
         width: 730px
     }
-
- .mod-side
-    float: left
-    width: 240px
-    box-sizing: border-box
-    padding: 20px 15px
     +mobile() {
-        border-top: 1px solid #eee
         float: none
+        margin-right: 0
         width: 100%
     }
 

themes/lattice/source/css/_base/sidebar.styl

@@ -1,5 +1,9 @@
 .mod-side
     background: #fff
+    float: left
+    width: 240px
+    box-sizing: border-box
+    padding: 20px 0 20px 15px
     &-sec
         margin-bottom: 30px
         &:last-child
@@ -22,6 +26,8 @@
         &-bd
           padding: 10px 15px
     +mobile() {
+        float: none
+        width: 100%
         margin-top: 20px
         border-top: 1px solid #ddd 
     }
@@ -52,8 +58,4 @@
         max-width: 224px
         margin: 0 auto 10px
     &-slogan
-      text-align: center
-
-      
-      
-  
+      text-align: center

themes/lattice/source/css/_index/cates.styl

@@ -51,6 +51,6 @@
                 a
                     color: $color-theme
         font-size: 14px
-        box-shadow: 0 1px 2px rgba(0,0,0,0.2)
+        box-shadow: 0 1px 2px rgba(0,0,0,0.1)
 
 

themes/lattice/source/css/_post/post.styl

@@ -6,11 +6,11 @@
     word-wrap: break-word
     &-hd
         padding: 20px 0
-        h2
-            margin-bottom: 5px
-            color: #333
-            font-size: 28px
-            font-weight: 300
+    &-tit
+        margin-bottom: 5px
+        color: #333
+        //font-size: 28px
+        font-weight: 300
     &-meta
         font-size: 12px
         overflow: hidden
@@ -40,9 +40,13 @@
         top: 0
 
     &-cover
-        margin: 0 0 20px
+        padding-top: 20px
         img
             display: block
+            +mobile()
+              width: 100%
+        +mobile()
+          padding-top: 0
 
     &-revision
         font-size: 12px
@@ -71,7 +75,7 @@
               border-bottom: none
 
     &-content
-        padding: 20px 0
+        padding: 0 0 20px 0
         & a
             vertical-align: top
         & img

themes/lattice/source/js/mods/common.js

@@ -27,6 +27,7 @@
 
   var search = {
         init: function (){
+            this.$el = $('#J_search');
             this.$form = $('#J_searchForm');
             this.$input = $('#J_searchInput');
             this.$trigger = $('#J_searchTrigger');
@@ -41,12 +42,14 @@
             });
 
             this.$trigger.on('click', function(e){
-                var isShowed = $(this).data('show');
+                var $this = $(this),
+                    isShowed = $(this).data('show');
                 if (!isShowed) {
                     self.$input.focus();
                 }
                 self.$form.toggleClass('show');
-                $(this).data('show', !isShowed);
+                self.$el.toggleClass('active');
+                $this.data('show', !isShowed);
             });
         }
     };