chore(website): Home animation improvements

algolia · Nov 6, 2015 · 8cb944a · 8cb944a
1 parent 537dfe5
commit 8cb944a
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 121 deletions.
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
@@ -1,27 +1,29 @@
 <header class="site-header">
-
   <nav class="navbar navbar-default  navbar-inverse">
     <div class="container-fluid">
       <div class="navbar-header">
+        <button type="button" class="text-white navbar-toggle collapsed" data-toggle="collapse" data-target="#instant-search-nav" aria-expanded="false">
+          Menu <i class="fa fa-bars m-l"></i>
+        </button>
         <a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a>
       </div>
-
-      <ul class="nav navbar-nav">
-        {% assign url = page.url | remove: 'index.html' %}
-        {% for link in site.navigation %}
-          <li {% if url == link.url %}class="active"{% endif %}>
-            <a href="{{ site.baseurl }}{{ link.url }}" title="{{ link.title }}">{{ link.text }}</a>
-          </li>
-        {% endfor %}
-          <li>
-            <a
-              href="http://github.com/algolia/instantsearch.js"
-              title="See more, open issues and get answers in our Github repository">
-                <i class="fa fa-github"></i>
-            </a>
-          </li>
-      </ul>
+      <div id="instant-search-nav" class="navbar-collapse collapse">
+        <ul class="nav navbar-nav">
+          {% assign url = page.url | remove: 'index.html' %}
+          {% for link in site.navigation %}
+            <li {% if url == link.url %}class="active"{% endif %}>
+              <a href="{{ site.baseurl }}{{ link.url }}" title="{{ link.title }}">{{ link.text }}</a>
+            </li>
+          {% endfor %}
+            <li>
+              <a
+                href="http://github.com/algolia/instantsearch.js"
+                title="See more, open issues and get answers in our Github repository">
+                  <i class="fa fa-github"></i>
+              </a>
+            </li>
+        </ul>
+      </div>
     </div>
   </nav>
-
 </header>
diff --git a/docs/_includes/newsletter-mc.html b/docs/_includes/newsletter-mc.html
@@ -19,5 +19,4 @@ <h3>Signup for our newsletter</h3>
       </div>
   </form>
 </div>
-<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
 <!--End mc_embed_signup-->
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -9,17 +9,9 @@
     <meta name="description" content="{{ site.description }}">
 
     <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.4.0/css/font-awesome.min.css" />
     <link rel="stylesheet" href="{{ "/css/default-theme.css" | prepend: site.baseurl}}" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.4.0/css/font-awesome.min.css" />
 
-    <script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gsap/1.11.8/TweenMax.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/scrollmagic/2.0.5/ScrollMagic.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/scrollmagic/2.0.5/plugins/animation.gsap.min.js"></script>
-{% if site.env == 'development' %}
-    <script src="https://cdn.jsdelivr.net/scrollmagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
-    <script src="http://localhost:35730/livereload.js"></script>
-{% endif %}
     <link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Raleway:300,800" />
     <link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600" />
 
@@ -33,10 +25,22 @@
 
     {{ content }}
 
-    {%if page.noFooter == null %}
-      {% include footer.html %}
-      {% contentblock site-footer %}
-    {% endif %}
+{%if page.noFooter == null %}
+    {% include footer.html %}
+{% endif %}
+
+    <script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gsap/1.11.8/TweenMax.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gsap/1.11.8/TimelineMax.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/scrollmagic/2.0.5/ScrollMagic.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/scrollmagic/2.0.5/plugins/animation.gsap.min.js"></script>
+{% if site.env == 'development' %}
+    <script src="https://cdn.jsdelivr.net/scrollmagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
+    <script src="http://localhost:35730/livereload.js"></script>
+{% endif %}
+
+  {% contentblock site-footer %}
   </body>
 
 </html>
diff --git a/docs/css/_documentation.sass b/docs/css/_documentation.sass
@@ -38,8 +38,6 @@
       line-height: 1.7em
       list-style: none
 
-// Main Content
-
 // Left panel
 .widget-description
   padding-right: 0
@@ -294,12 +292,14 @@
     z-index: 11
     border: none
   > [class^=ais-]
+    padding: 4px
     outline: 1px solid #660000
     &:before
       content: "." attr(class)
       text-align: right
       white-space: nowrap
-      font-size: 11px
+      font-size: 12px
+      font-weight: bold
       z-index: 10
       position: absolute
       top: 0
@@ -311,13 +311,15 @@
       color: #660000
   [class^=ais-]
     cursor: pointer
+    padding: 4px
     &:hover
       outline: 1px solid #660000
       &:before
         content: "." attr(class)
         text-align: right
         white-space: nowrap
-        font-size: 11px
+        font-size: 12px
+        font-weight: bold
         z-index: 10
         position: absolute
         top: 0

diff --git a/docs/css/_footer.sass b/docs/css/_footer.sass
@@ -1,6 +1,10 @@
 footer.site-footer
   padding-top: 2em
+  margin-top: 0
   border-top: 1px solid $gray-lighter
+  background-color: white
   text-align: center
+  .fa.fa-heart
+    color: #E61870
   .input-group-addon
     background-color: transparent
diff --git a/docs/css/_header.sass b/docs/css/_header.sass
@@ -1,4 +1,8 @@
 header.site-header
+  position: fixed
+  top: 0
+  width: 100%
+  z-index: 99
   nav.navbar
     margin-bottom: 0
     .navbar-brand
@@ -7,4 +11,4 @@ header.site-header
       font-size: 160%
 
 .main-content
-  margin-top: $navbar-height
+  margin-top: $navbar-height
diff --git a/docs/css/_helper.sass b/docs/css/_helper.sass
@@ -314,3 +314,6 @@ sub
 
 .text-white
   color: #FFFFFF
+
+.bg-white
+  background-color: white
diff --git a/docs/css/_home.sass b/docs/css/_home.sass
@@ -8,42 +8,62 @@ html, body
   svg
     height: 70px
 
-.fa.fa-heart
-  color: #E61870
-
-// scroll down
-#space-overlay:after
-  animation: arrow 1s ease-in-out infinite alternate
-  background: transparent url("../img/arrow.svg") no-repeat center bottom
-  background-size: contain
-  bottom: 24px
-  height: 19px
-  content: ''
-  display: block
-  left: 50%
-  margin-left: -32px
-  position: fixed
-  width: 64px
-  z-index: 99
-
+.navbar
+  background-color: #0B1724
+  border-radius: 0
 .navbar-brand
   color: white !important
 .navbar-nav > .active > a
   color: #1D96C7 !important
 
 
-footer.site-footer
-  background-color: white
-  margin-top: 0
+.presented-by
+  color: rgba(white,.5)
+  font-size: .9em
+  img
+    position: relative
+    top: -5px
+    margin-right: 4px
+
+#space
+  position: fixed
+  top: 0
+  left: 0
+  z-index: -1
+  opacity: 0
+  animation: fadeIn 3s ease-in-out
+
+#space-overlay
+  position: fixed
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  z-index: -2
+  background: linear-gradient(-30deg, rgba(#182848,0.4) 0%, rgba(#182848,1) 90%) #1D96C7
+  &:after // scroll down
+    animation: arrow 1s ease-in-out infinite alternate
+    background: transparent url("../img/arrow.svg") no-repeat center bottom
+    background-size: contain
+    bottom: 24px
+    height: 19px
+    content: ''
+    display: block
+    left: 50%
+    margin-left: -32px
+    position: fixed
+    width: 64px
+    z-index: 99
+
 
 .window
   padding: 400px 0 200px
   width: 100%
   display: block
   color: white
-.hero
-  padding-top: 100px
-  opacity: 1
+  &.hero
+    padding-top: 100px
+    opacity: 1
 
 .vp
   font-size: 1.4em
@@ -55,43 +75,13 @@ footer.site-footer
     &:hover
     text-decoration: none
 
-.navbar
-  background-color: #0B1724
-  border-radius: 0
-
-#space
-  position: fixed
-  top: 0
-  left: 0
-  z-index: -1
-
-#space-overlay
-  position: fixed
-  top: 0
-  left: 0
-  width: 100%
-  height: 100%
-  z-index: -2
-  background-image: linear-gradient(-30deg, rgba(#182848,0.4) 0%, rgba(#182848,1) 90%)
-  background-color: #1D96C7
 
 #curveUpColor
   z-index: 99
   display: block
   path
     fill: white
 
-.presented-by
-  color: rgba(white,.5)
-  font-size: .9em
-  img
-    position: relative
-    top: -5px
-    margin-right: 4px
-
-.bg-white
-  background-color: white
-
 h2
   font-size: 1.8em
   font-weight: normal
@@ -112,17 +102,6 @@ h2
   color: white
   pointer-events: none
 
-.path
-  stroke-dasharray: 10
-  animation: dash 20s linear infinite reverse
-
-.path2
-  stroke-dasharray: 10
-  animation: dash 20s linear infinite
-
-@keyframes dash
-  to
-    stroke-dashoffset: 1000
 
 #anim-overlay
   position: absolute
@@ -150,12 +129,18 @@ h2
   .w-4
     top: 140px
     left: 450px
-  .illus-sync
-    opacity: 0
-    position: absolute
-    top: 350px
-    left: 350px
 
+.illus-sync
+  opacity: 0
+  position: absolute
+  top: 350px
+  left: 350px
+  .path
+    stroke-dasharray: 10
+    animation: dash 20s linear infinite reverse
+  .path2
+    stroke-dasharray: 10
+    animation: dash 20s linear infinite
 
 
 .screen
@@ -240,14 +225,40 @@ h2
   top: 350px
   right: 60px
 
-footer.site-footer
-  text-align: center
 
 
+
+
+//keyframes
+
+@keyframes fadeIn
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+@keyframes fadeOut
+  0%
+    opacity: 1
+  100%
+    opacity: 0
+
+@keyframes fadeInUp
+  0%
+    opacity: 0
+    transform: translateY(20px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
 @keyframes arrow
   0%
     opacity: 0
     transform: translateY(-16px)
   100%
     opacity: 1
     transform: translateY(0)
+
+@keyframes dash
+  100%
+    stroke-dashoffset: 700