tweak button

Author: yyx990803

themes/vue/layout/partials/sidebar.ejs

@@ -18,5 +18,11 @@
                 </li>
             <% }) %>
         </ul>
+        <div id="donate">
+            <span class="wrapper" style="width: 110px">
+              <img src="/images/paypal.png">
+              <a href="https://www.paypal.me/evanyou" target="_blank">Buy Me Coffee</a>
+            </span>
+        </div>
     </div>
 </div>

themes/vue/source/css/_common.styl

@@ -164,3 +164,34 @@ a.button
         border-left 4px solid transparent
         border-right 4px solid transparent
         border-top 5px solid #ccc
+
+#donate
+    height 24px
+    .wrapper
+        vertical-align top
+        height 20px
+        border 1px solid #d4d4d4
+        display inline-block
+        box-sizing border-box
+        line-height 16px
+        border-radius 3px
+        cursor pointer
+        background-image linear-gradient(to bottom,#fcfcfc 0,#eee 100%)
+        position relative
+        width 72px
+        &:hover
+            border-color #ccc
+            background-image linear-gradient(to bottom,#eee 0,#ddd 100%)
+        img
+            width 14px
+            height 14px
+            position absolute
+            top 3px
+            left 5px
+        a
+            font 700 11px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif
+            color #333333
+            text-shadow 0 1px 0 #fff
+            position absolute
+            top 2px
+            left 24px

themes/vue/source/css/index.styl

@@ -251,36 +251,7 @@ html, body
     display none
 
 #donate
-    height 24px
     margin-left -2px !important
-    .wrapper
-       vertical-align top
-       height 20px
-       border 1px solid #d4d4d4
-       display inline-block
-       box-sizing border-box
-       line-height 16px
-       border-radius 3px
-       cursor pointer
-       background-image linear-gradient(to bottom,#fcfcfc 0,#eee 100%)
-       position relative
-       width 72px
-       &:hover
-            border-color #ccc
-            background-image linear-gradient(to bottom,#eee 0,#ddd 100%)
-        img
-            width 14px
-            height 14px
-            position absolute
-            top 3px
-            left 5px
-        a
-            font 700 11px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif
-            color #333333
-            text-shadow 0 1px 0 #fff
-            position absolute
-            top 2px
-            left 24px
 
 @media screen and (max-width: 480px)
     body

themes/vue/source/css/page.styl

@@ -275,6 +275,9 @@ $header-height = 40px
             bottom 0
             left 145px
 
+#donate
+    margin-top 15px
+
 @media screen and (max-width: 560px)
     #downloads
         text-align center