add Scrimba links for preview

Author: yyx990803

src/v2/guide/index.md

@@ -32,8 +32,12 @@ or:
 
 The [Installation](installation.html) page provides more options of installing Vue. Note: We **do not** recommend that beginners start with `vue-cli`, especially if you are not yet familiar with Node.js-based build tools.
 
+If you prefer something more interactive, you can also check out [this tutorial series on Scrimba](https://scrimba.com/playlist/pXKqta), which gives you a mix of screencast and code playground that you can pause and play around with anytime.
+
 ## Declarative Rendering
 
+<div class="scrimba"><a href="https://scrimba.com/p/pXKqta/cQ3QVcr" target="_blank">Try this lesson on Scrimba</a></div>
+
 At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:
 
 ``` html
@@ -105,6 +109,8 @@ If you open up your JavaScript console again and enter `app2.message = 'some new
 
 ## Conditionals and Loops
 
+<div class="scrimba"><a href="https://scrimba.com/p/pXKqta/cEQe4SJ" target="_blank">Try this lesson on Scrimba</a></div>
+
 It's easy to toggle the presence of an element, too:
 
 ``` html
@@ -189,6 +195,8 @@ In the console, enter `app4.todos.push({ text: 'New item' })`. You should see a
 
 ## Handling User Input
 
+<div class="scrimba"><a href="https://scrimba.com/p/pXKqta/czPNaUr" target="_blank">Try this lesson on Scrimba</a></div>
+
 To let users interact with your app, we can use the `v-on` directive to attach event listeners that invoke methods on our Vue instances:
 
 ``` html
@@ -265,6 +273,8 @@ var app6 = new Vue({
 
 ## Composing with Components
 
+<div class="scrimba"><a href="https://scrimba.com/p/pXKqta/cEQVkA3" target="_blank">Try this lesson on Scrimba</a></div>
+
 The component system is another important concept in Vue, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:
 
 ![Component Tree](/images/components.png)

themes/vue/source/css/_scrimba.styl

@@ -0,0 +1,31 @@
+.scrimba
+  background-color #e7ecf3
+  padding 1em 1.25em
+  border-radius 2px
+  color #486491
+  position relative
+  a
+    color #486491 !important
+    position relative
+    padding-left 36px
+    &:before
+      content ''
+      position absolute
+      display block
+      width 30px
+      height 30px
+      top -5px
+      left -4px
+      border-radius 50%
+      background-color #73abfe
+    &:after
+      content ''
+      position absolute
+      display block
+      width 0
+      height 0
+      top 5px
+      left 8px
+      border-top 5px solid transparent
+      border-bottom 5px solid transparent
+      border-left 8px solid #fff

themes/vue/source/css/page.styl

@@ -12,6 +12,7 @@
 @import "_team"
 @import "_style-guide"
 @import "_modal"
+@import "_scrimba"
 
 #header
   box-shadow: 0 0 1px rgba(0,0,0,.25)
@@ -255,4 +256,4 @@
     &.tip
       background-color: rgb(255,255,255)
       border: 2px solid #e8e8e8
-      border-left: 4px solid $red
+      border-left: 4px solid $red