add carbon cpc ads (vuejs#347)

# Conflicts:
#	themes/vue/layout/page.ejs

Author: re-fort

themes/vue/layout/page.ejs

@@ -36,5 +36,10 @@
         <% }) %>
       </div>
     <% } %>
-    <div class="footer">間違いを見つけた、またはドキュメントに貢献したいですか？<a href="https://github.com/vuejs/jp.vuejs.org/blob/lang-ja/src/<%- page.path.replace(/\.html$/, '.md') %>" target="_blank">Github 上でこのページを編集する</a> か、<a href="https://github.com/vuejs/jp.vuejs.org" target="_blank">Github からこのサイトを Fork してプルリクエストしましょう</a>！</div>
+    <div class="footer">
+      <%- partial('partials/ad-text') %>
+      間違いを見つけた、またはドキュメントに貢献したいですか？
+      <a href="https://github.com/vuejs/jp.vuejs.org/blob/lang-ja/src/<%- page.path.replace(/\.html$/, '.md') %>" target="_blank">Github 上でこのページを編集する</a> か、<a href="https://github.com/vuejs/jp.vuejs.org" target="_blank">Github からこのサイトを Fork してプルリクエストしましょう
+      </a>！
+    </div>
 </div>

themes/vue/layout/partials/ad-text.ejs

@@ -0,0 +1,13 @@
+<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
+<div class="bsa-cpc"></div>
+<script>
+  (function(){
+    if(typeof _bsa !== 'undefined' && _bsa) {
+    _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
+      target: '.bsa-cpc',
+      align: 'horizontal',
+      disable_css: 'true'
+    });
+      }
+  })();
+</script>

themes/vue/source/css/_ad.styl

@@ -0,0 +1,64 @@
+// main ad placement (bottom right)
+#ad
+  width: 125px
+  // text-align: center
+  position: fixed
+  z-index: 99
+  bottom: 10px
+  right: 10px
+  padding: 10px
+  background-color: #fff
+  border-radius: 3px
+  font-size: 13px
+  a
+    display: inline-block
+    color: $light
+    font-weight: normal
+  span
+    color: $light
+    display: inline-block
+    margin-bottom: 5px
+  img
+    width: 125px
+  .carbon-img, .carbon-text
+    display: block
+    margin-bottom: 6px
+    font-weight: normal
+    color: $medium
+  .carbon-poweredby
+    color: #aaa
+    font-weight: normal
+
+// text ad (below page title)
+.bsa-cpc
+  font-size 1em
+  background-color #f8f8f8
+  padding 10px 15px
+  margin-bottom 20px
+  a._default_
+    color #666
+    font-weight 400
+    line-height 1
+    .default-image, .default-title, .default-description
+      display inline
+      vertical-align middle
+      margin-right 6px
+    .default-image
+      img
+        height 20px
+        border-radius 3px
+        vertical-align middle
+        position relative
+        top -1px
+    .default-title
+      font-weight 600
+    .default-description:after
+      font-size .85em
+      content "Sponsored"
+      color $info
+      border 1px solid $info
+      border-radius 3px
+      padding 0 4px 1px
+      margin-left 6px
+  .default-ad
+    display none

themes/vue/source/css/_common.styl

@@ -1,5 +1,6 @@
 @import "_settings"
 @import "_syntax"
+@import "_ad"
 
 body
   font-family: $body-font
@@ -109,36 +110,6 @@ a.button
   padding: 0 60px 30px
   overflow-x: hidden
 
-#ad
-  width: 125px
-  // text-align: center
-  position: fixed
-  z-index: 99
-  bottom: 10px
-  right: 10px
-  padding: 10px
-  background-color: #fff
-  border-radius: 3px
-  font-size: 13px
-  a
-    display: inline-block
-    color: $light
-    font-weight: normal
-  span
-    color: $light
-    display: inline-block
-    margin-bottom: 5px
-  img
-    width: 125px
-  .carbon-img, .carbon-text
-    display: block
-    margin-bottom: 6px
-    font-weight: normal
-    color: $medium
-  .carbon-poweredby
-    color: #aaa
-    font-weight: normal
-
 #nav
   .nav-link
     cursor: pointer