minor design updates

Author: Evan You

source/guide/installation.md

@@ -13,9 +13,11 @@ gz_size: 14.29
 
 Simply download and include with a script tag. `Vue` will be registered as a global variable.
 
-<a class="button" href="https://raw.github.com/yyx990803/vue/v{{vue_version}}/dist/vue.js" download>Development Version</a><br><span class="light">{{dev_size}}kb, plenty of comments and debug/warning messages.</span>
+<div id="downloads">
+<a class="button" href="https://raw.github.com/yyx990803/vue/v{{vue_version}}/dist/vue.js" download>Development Version</a><span class="light info">{{dev_size}}kb, plenty of comments and debug/warning messages.</span>
 
-<a class="button" href="https://raw.github.com/yyx990803/vue/v{{vue_version}}/dist/vue.min.js" download>Production Version</a><br><span class="light">{{min_size}}kb minified / {{gz_size}}kb gzipped</span>
+<a class="button" href="https://raw.github.com/yyx990803/vue/v{{vue_version}}/dist/vue.min.js" download>Production Version</a><span class="light info">{{min_size}}kb minified / {{gz_size}}kb gzipped</span>
+</div>
 
 Also available on [cdnjs](//cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.min.js) (takes some time to sync so the latest version might not be available yet).
 

themes/vue/source/css/_common.styl

@@ -41,17 +41,22 @@ p
 
 a.button
     display inline-block
-    font-size 1.25em
-    color #fff !important
-    font-weight 400 !important
-    background-color $green
-    padding .5em 1.5em
-    border-radius 4px
-    text-shadow 0 1px 1px rgba(0,0,0,.2)
-    border-bottom 1px solid darken($green, 12%)
-    transition all .2s ease-out
+    font-size 1.2em
+    color $green //!important
+    font-weight 700 //!important
+    background-color #fff//$green
+    // border 1px solid $green
+    padding 12px 24px
+    border-radius 24px
+    border 2px solid $green
+    // text-shadow 0 1px 1px rgba(0,0,0,.2)
+    // border-bottom 1px solid darken($green, 12%)
+    transition all .15s ease
     &:hover
-        background-color lighten($green, 10%)
+        color #fff
+        -webkit-transform scale(1.03)
+        transform scale(1.03)
+        background-color $green
 
 .highlight
     overflow-x auto

themes/vue/source/css/index.styl

@@ -196,10 +196,15 @@ html, body
         padding 0
         list-style-type none
         li:before
-            content "✓"
-            font-weight bold
-            margin-right .75em
-            font-size 1.2em
+            content ""
+            display inline-block
+            width 24px
+            height 24px
+            background url(../images/check.png) center center no-repeat
+            background-size 24px 24px
+            margin-right 10px
+            position relative
+            top 4px
 
 #footer
     text-align center
@@ -218,10 +223,10 @@ html, body
             text-decoration none
             text-transform uppercase
             letter-spacing 1px
-            border 2px solid #fff
+            border 1px solid #fff
             display inline-block
-            padding 8px 16px
-            border-radius 4px
+            padding 12px 20px
+            border-radius 25px
             transition all .15s ease
             margin-bottom 2em
             &:hover
@@ -278,10 +283,10 @@ html, body
         width 250px
     #why
         ul
-            width 250px
+            width 280px
             font-size 1.1em
         h2
-            font-size 1.35em
+            font-size 1.4em
     #ad
         position static
         .carbon-img, .carbon-text, .carbon-poweredby

themes/vue/source/css/page.styl

@@ -121,12 +121,21 @@ $header-height = 40px
             padding-left 1.25em
             color $light
     a.button
-        font-size 1.2em
+        font-size 1.1em
         margin .2em 0
         width 180px
         text-align center
+        padding 10px 24px
+        display inline-block
+        vertical-align middle
     span.light
         color $light
+    span.info
+        font-size .85em
+        display inline-block
+        vertical-align middle
+        width 280px
+        margin-left 20px
     h1
         margin 0 0 1em
     h2
@@ -212,6 +221,14 @@ $header-height = 40px
             bottom 0
             left 145px
 
+@media screen and (max-width: 560px)
+    #downloads
+        text-align center
+        margin-bottom 25px
+        .info
+            margin-top 5px
+            margin-left 0
+
 @media screen and (max-width: 720px)
     body
         -webkit-text-size-adjust none