redesign

vuejs-kr · Jan 16, 2014 · 8248cbf · 8248cbf
1 parent 136ff8f
commit 8248cbf
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 66 deletions.
diff --git a/source/index.md b/source/index.md
@@ -1,8 +1,6 @@
 index: true
 ---
 
-## Quick Example
-
 **HTML**
 
 ``` html

diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
@@ -10,9 +10,10 @@
         <%- partial('partials/ga') %>
     </head>
     <body>
-        <%- partial('partials/header') %>
         <% if (page.index) { %>
             <%- partial('partials/landing') %>
+        <% } else { %>
+            <%- partial('partials/header') %>
         <% } %>
         <div id="main">
             <%- body %>

diff --git a/themes/vue/layout/partials/header.ejs b/themes/vue/layout/partials/header.ejs
@@ -1,7 +1,7 @@
 <div id="header">
     <a id="logo" href="/">
         <img src="/images/logo.png">
-        <span>vue.js</span>
+        <span>Vue.js</span>
     </a>
     <ul id="nav">
         <li><a href="/guide/" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>

diff --git a/themes/vue/layout/partials/landing.ejs b/themes/vue/layout/partials/landing.ejs
@@ -1,11 +1,20 @@
 <div id="hero">
-    <h1>Simple, Fast and Composable MVVM</h1>
-    <p>Vue.js is still under development so the API might change.</p>
+    <ul id="nav">
+        <li><a href="/guide/" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
+        <li><a href="/api/" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API Reference</a></li>
+        <li><a href="/examples/" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
+        <li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>
+    </ul>
+    <img id="logo" src="/images/logo-large.png">
+    <h1>Vue.js</h1>
+    <p class="sub">Simple, Fast and Composable MVVM</p>
     <p>
         <a href="/guide/#Installation" class="button">Get Vue.js v0.7.5</a>
         <a href="https://github.com/yyx990803/vue" target="_blank" class="button">Source on GitHub</a>
     </p>
+    <p>Vue.js is still under development so the API might change.</p>
 </div>
+<p class="divider"><span>What's Cool</span></p>
 <div id="features">
     <div class="feat">
         <h2>Simple</h2>
@@ -37,4 +46,5 @@
         <p><img src="/images/modules.png" style="height:80px"></p>
         <p>Component, Browserify or Bower - leverage your favorite eco system!</p>
     </div>
-</div>
+</div>
+<p class="divider"><span>A Quick Example</span></p>
diff --git a/themes/vue/source/css/_common.styl b/themes/vue/source/css/_common.styl
@@ -55,60 +55,7 @@ p
             border-top-right-radius $radius
             border-bottom-right-radius $radius
 
-$header-height = 40px
-
-#header
-    background-color #fff
-    box-shadow 0 0 4px rgba(0,0,0,.25)
-    padding 25px 60px
-
-#nav
-    list-style-type none
-    margin 0
-    padding 0
-    position absolute
-    right 60px
-    top 25px
-    height $header-height
-    line-height $header-height
-    li
-        display inline-block
-        margin-left 1.2em
-        &:first-child
-            margin-left 0 !important
-.nav-link
-    padding-bottom 3px
-    &:hover, &.current
-        border-bottom 3px solid $green
-
-#logo
-    display inline-block
-    font-size 1.85em
-    line-height $header-height
-    color $dark
-    img
-        vertical-align middle
-        margin-right 6px
-        width $header-height
-        height $header-height
-
 #main
     position relative
     z-index 1
-    padding 0 60px 30px
-
-@media screen and (max-width: 720px)
-    body
-        font-size 14px
-    #header
-        text-align center
-        padding 18px 0
-    #nav
-        position static
-        margin-top .4em
-    #logo
-        display block
-    #main
-        padding 0 1.4em
-    .highlight pre
-        padding 1.2em 1em
+    padding 0 60px 30px
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
@@ -1,8 +1,30 @@
 @import "_common"
 
+#nav
+    list-style-type none
+    text-align center
+    margin 5em 0
+    padding 0
+    li
+        display inline-block
+
+.nav-link
+    color $light
+    padding-bottom 3px
+    margin 0 1em
+    &:hover, &.current
+        border-bottom 3px solid $green
+
+#logo
+    display block
+    margin 0 auto
+
 #hero
-    margin 5em 2em
+    margin 5em 0 8em
     text-align center
+    .sub
+        color $light
+        font-size 1.5em
     a.button
         width 180px
 
@@ -12,7 +34,7 @@ h1
 a.button
     display inline-block
     margin .5em
-    font-size 1.5em
+    font-size 1.25em
     color #fff !important
     font-weight 400 !important
     background-color $green
@@ -34,7 +56,7 @@ a.button
         display inline-block
         vertical-align top
         width 200px
-        margin 15px 30px
+        margin .5em 2em
         p
             color $light
 
@@ -71,6 +93,20 @@ a.button
     &.composable
         background-position -320px 0
 
+.divider
+    font-size 1.5em
+    font-weight bold
+    max-width 800px
+    margin 2.5em auto
+    text-align center
+    border-top 1px solid $border
+    span
+        display inline-block
+        padding 0 1em
+        position relative
+        background-color #fff
+        top -.65em
+
 #demo
     border 1px solid #eee
     box-shadow 0 2px 6px rgba(0,0,0,.1)
@@ -89,13 +125,28 @@ a.button
             text-decoration line-through
 
 @media screen and (max-width: 420px)
+    body
+        font-size 14px
+    #nav
+        margin 2em 0
+    #logo
+        width 100px
+    .nav-link
+        font-size .85em
+        margin 0 .5em
+    .divider
+        font-size 1.2em
+        margin 2.5em 1em
     #hero
-        margin 3em 0 1em
+        margin 2em 1em 5em
         h1
             font-size 2em
         a.button
-            font-size 1.2em
+            font-size 1em
             margin .5em 0
+    #main
+        margin 0 auto
+        padding 0 1.4em
 
 @media screen and (max-width: 860px)
     #features, #hero

diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
@@ -1,5 +1,42 @@
 @import "_common"
 
+$header-height = 40px
+
+#header
+    background-color #fff
+    box-shadow 0 0 4px rgba(0,0,0,.25)
+    padding 25px 60px
+
+#nav
+    list-style-type none
+    margin 0
+    padding 0
+    position absolute
+    right 60px
+    top 25px
+    height $header-height
+    line-height $header-height
+    li
+        display inline-block
+        margin-left 1.2em
+        &:first-child
+            margin-left 0 !important
+.nav-link
+    padding-bottom 3px
+    &:hover, &.current
+        border-bottom 3px solid $green
+
+#logo
+    display inline-block
+    font-size 1.5em
+    line-height $header-height
+    color $dark
+    img
+        vertical-align middle
+        margin-right 6px
+        width $header-height
+        height $header-height
+
 .sidebar
     position absolute
     top 0
@@ -61,6 +98,22 @@
             position fixed
 
 @media screen and (max-width: 720px)
+    body
+        font-size 14px
+    #header
+        text-align center
+        padding 18px 0
+    #nav
+        position static
+        margin-top .4em
+    #logo
+        display block
+        span
+            display none
+    #main
+        padding 0 1.4em
+    .highlight pre
+        padding 1.2em 1em
     .sidebar
         position static
         width auto

diff --git a/themes/vue/source/images/logo-large.png b/themes/vue/source/images/logo-large.png