tweak index

yyx990803 · yyx990803 · commit 40644a3c578e · 2016-09-29T22:32:56.000-04:00
diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
@@ -24,22 +24,22 @@
 <div id="highlights">
   <div class="inner">
     <div class="point">
-      <h2>Performant</h2>
-      <p>
-        16kb min+gzip Runtime<br>
-        Blazing Fast Virtual DOM<br>
-        Minimal Optimization Efforts
-      </p>
+      <h2>Approachable</h2>
+      <p>Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!</p>
     </div>
 
     <div class="point">
       <h2>Versatile</h2>
-      <p>Lean, minimal core with a feature-rich, incrementally adoptable ecosystem.</p>
+      <p>Simple, minimal core with an incrementally adoptable stack that can handle apps of any scale.</p>
     </div>
 
     <div class="point">
-      <h2>Approachable</h2>
-      <p>Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!</p>
+      <h2>Performant</h2>
+      <p>
+        16kb min+gzip Runtime<br>
+        Blazing Fast Virtual DOM<br>
+        Minimal Optimization Efforts
+      </p>
     </div>
   </div>
 </div>
@@ -60,3 +60,15 @@
 
 <script src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
 <script src="/js/common.js"></script>
+<script>
+var topScrolled = false
+window.addEventListener('scroll', function () {
+  if (window.pageYOffset > 165 && !topScrolled) {
+    topScrolled = true
+    document.getElementById('mobile-bar').classList.remove('top')
+  } else if (window.pageYOffset <= 165 && topScrolled) {
+    topScrolled = false
+    document.getElementById('mobile-bar').classList.add('top')
+  }
+})
+</script>
diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
@@ -18,7 +18,7 @@
         <script src="/js/vue.js"></script>
     </head>
     <body>
-        <div id="mobile-bar">
+        <div id="mobile-bar" <%- isIndex ? 'class="top"' : '' %>>
             <a class="menu-button"></a>
             <a class="logo" href="/"></a>
         </div>
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
@@ -9,6 +9,22 @@ $space = 50px
 body
     background-color darken($light, 10%)
 
+#logo
+    span
+        font-size 1.2em
+    img
+        display none
+
+.sidebar
+    display none
+
+#mobile-bar
+    &.top
+        background-color transparent
+        box-shadow none
+        .logo
+            display none
+
 #hero
     padding $space 40px
     background-color #fff
@@ -116,6 +132,8 @@ body
     body
         -webkit-text-size-adjust none
         font-size 14px
+    .sidebar
+        display block
     #header
         display none
     #mobile-bar
