Merge pull request #494 from algolia/website-upgrade

fix(website): space bg fadeIn
algolia · Nov 6, 2015 · d8996cd · d8996cd
2 parents e05cbef + 5e09844
commit d8996cd
Show file tree

Hide file tree

Showing 13 changed files with 349 additions and 311 deletions.
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
@@ -1,13 +1,13 @@
 <div class="spacer100 bg-white"></div>
 <footer class="site-footer">
   <p>
-    Designed and built with <i class="fa fa-heart"></i> by <a href="https://www.algolia.com"><img src="{{site.baseurl}}/img/logo-algolia-dark.png" alt="Algolia"></a>
+    Designed and built with <i class="fa fa-heart"></i> by <a href="https://www.algolia.com"><img src="{{site.baseurl}}/img/logo-algolia-dark.png" alt="Algolia" height="20"></a>
   </p>
   <div class="spacer50"></div>
   <ul class="list-inline">
     <li>Currently v{{ site.version }}</li>
     <li>•</li>
-    Code licensed under <a href="https://github.com/algolia/instantsearch.js/blob/master/LICENSE">MIT</a>
+    <li>Code licensed under <a href="https://github.com/algolia/instantsearch.js/blob/master/LICENSE">MIT</a></li>
     <li>•</li>
     <li><a href="http://github.com/algolia/instantsearch.js">GitHub</a></li>
     <li>•</li>

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://maxcdn.bootstrapcdn.com/font-awesome/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://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/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
@@ -12,7 +12,8 @@
   height: 100%
   overflow-y: auto
   padding: 0
-  font-size: 1.3em
+  font-size: 1.2em
+  font-weight: bold
   > ul
     line-height: 2em
     list-style: none
@@ -32,13 +33,11 @@
         color: $brand-primary
         text-decoration: none
     ul
-      font-size: .80em
+      font-size: .85em
       padding: 0 0 5px 10px
       line-height: 1.7em
       list-style: none
 
-// Main Content
-
 // Left panel
 .widget-description
   padding-right: 0
@@ -208,6 +207,7 @@
       color: $brand-primary
       background-color: #0A1724
       border: none
+      transition: all .2s
       &:hover
         color: #fff
       &:active, &:focus
@@ -216,22 +216,27 @@
         font-weight: bolder
         background: #163350
   .copy-btn
+    display: block
     position: absolute
     right: 5px
     top: 5px
-    display: none
-    color: $brand-primary
-    background-color: #0A1724
-    border-color: $brand-primary
+    opacity: 0
+    font-size: .9em
+    background-color: rgba($brand-primary,.1)
+    border: none
+    text-transform: uppercase
+    color: rgba(white,.4)
+    transition: opacity .2s
     &:active, &:focus
-      outline: 0px
+      outline: 0
     &:active
+      color: white !important
+      background-color: rgba($brand-primary,.4)
       color: #0A1724
-      background-color: $brand-primary
-      border-color: #0A1724
   &:hover
     .copy-btn
       display: block
+      opacity: 1
   .jsdoc
     border: none
     color: #A3B6CB
@@ -287,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
@@ -304,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