Website index page update

Tagline effects and refactoring, fonts & sizes, better descriptions,
icons

website/_config.yml

@@ -14,12 +14,14 @@ logo_medium: /images/uppy.svg
 logo_icon: /images/uppy.png
 description: >
   Uppy is (going to be) a JavaScript file uploader that fetches files from Dropbox, Instagram, local disk, remote URLs, and other exciting locations.
-  It has a Plugin-based architecture, first-class support for resumable uploads via <a href="http://tus.io">tus.io</a>
-  and custom encoding backends, making it very extensible and robust.<br />
-  <br />
-  Uppy is brought to you by the people behind <a href="https://transloadit.com">Transloadit</a> and as such has first class
-  support for adding their uploading and encoding backend, but this is opt-in, and you can just as easily
-  roll your own. Uppy is in the early stages of development and should not be used for anything serious yet.
+  It has a plugin-based architecture, first-class support for resumable uploads via <a href="http://tus.io">tus.io</a>
+  and custom encoding backends, making it very extensible and robust. Uppy is in the early stages of development
+  and should not be used for anything serious yet.
+descriptionWho: >
+  Uppy is brought to you by the people
+  behind <a href="https://transloadit.com">Transloadit</a> and as such has first class support
+  for adding their uploading and encoding backend, but this is opt-in,
+  and you can just as easily roll your own.
 author: Transloadit
 email: uppybot@uppy.io
 language: English

website/src/_data/taglines.yml

@@ -1,25 +1,25 @@
- - won't chew on your shoes.
- - is fully housebroken.
- - just wants to play with you.
- - doesn't hump your leg.
- - also accepts cat pictures.
- - loves you unconditionally.
- - doesn’t knock over your recycle bin.
- - you don’t have to keep on a leash.
- - won't pees on your rug.
- - loves to play fetch.
- - doesn’t bite.
- - won’t bark at the mailman.
- - is great with the kids.
- - likes to go on a trip with you.
- - can digest anything, even chocolate cake.
- - will never run away.
- - already has all its own toys.
- - doesn’t jump on the couch.
- - never howls when left alone.
- - is always happy to see you.
- - isn’t afraid of fireworks.
- - is allowed everywhere.
- - always loves to meet new people.
- - doesn’t chase your cat.
- - your mother isn’t allergic to.
+ - won't chew on your shoes
+ - is fully housebroken
+ - just wants to play with you
+ - doesn't hump your leg
+ - also accepts cat pictures
+ - loves you unconditionally
+ - doesn’t knock over your recycle bin
+ - you don’t have to keep on a leash
+ - won’t pee on your rug
+ - loves to play fetch
+ - doesn’t bite
+ - won’t bark at the mailman
+ - is great with the kids
+ - likes to go on a trip with you
+ - can digest anything, even chocolate cake
+ - will never run away
+ - already has all its own toys
+ - doesn’t jump on the couch
+ - never howls when left alone
+ - is always happy to see you
+ - isn’t afraid of fireworks
+ - is allowed everywhere
+ - always loves to meet new people
+ - doesn’t chase your cat
+ - your mother isn’t allergic to

website/src/frontpage-code-sample.ejs

@@ -2,7 +2,7 @@
 layout: false
 ---
 <!--
-You can `npm run web:update-frontpage-code-sample` to render this code snippet and
+You can `npm run web:update:frontpage:code:sample` to render this code snippet and
 save it as a layout partial
 -->
 {% include_code lang:js dragdrop/app.es6 %}

website/src/images/traffic-light.svg

@@ -0,0 +1 @@
+<svg width="91" height="120" viewBox="0 0 71 100" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1)" fill="none" fill-rule="evenodd"><path d="M68.8 39.64H54.388V29.58S71.724 14.453 68.8 8.86H54.388V5.404A5.407 5.407 0 0 0 48.98 0H20.152a5.407 5.407 0 0 0-5.406 5.405V8.86H.332c-2.923 5.593 14.414 20.72 14.414 20.72v10.06H.332c-2.923 5.593 14.414 20.72 14.414 20.72v10.06H.332c-2.923 5.594 14.414 20.72 14.414 20.72v3.455A5.407 5.407 0 0 0 20.152 100H48.98a5.407 5.407 0 0 0 5.406-5.405V91.14S71.723 76.015 68.8 70.42H54.387V60.36S71.724 45.233 68.8 39.64zM50.935 80.77c0 9.04-7.326 16.368-16.367 16.368-9.04 0-16.367-7.328-16.367-16.367V19.23c0-9.04 7.326-16.368 16.367-16.368 9.04 0 16.367 7.33 16.367 16.368v61.54z" fill="#000"/><circle fill="#000" cx="34.627" cy="80.465" r="11.111"/><circle fill="#FFDB00" cx="34.627" cy="50.06" r="11.111"/><circle fill="#000" cx="34.627" cy="19.654" r="11.111"/></g></svg>

website/themes/uppy/layout/index.ejs

@@ -1,46 +1,55 @@
 <section id="hero" class="IndexHero">
-  <header id="logo-wrap" class="IndexHero-logo">
-    <img id="logo" width="150" class="IndexHero-logoImg emoji dog" title="puppy" alt="uppy" src="<%- config.logo_large %>">
+  <header id="logo-wrap" class="IndexHero-header">
+    <img id="logo" class="IndexHero-logo" title="Uppy" alt="Uppy" src="<%- config.logo_large %>">
     <h1 class="IndexHero-title"><%- config.title %></h1>
-    <!-- <h3 class="IndexHero-subtitle">
-      <%- config.subtitle %> <img align="absmiddle" width="18" height="18" class="emoji dog" title="puppy" src="/images/emojis/dog.png">
-    </h3> -->
 
-    <p class="IndexHero-tagline">
-      The file uploader that<br> <span class="IndexHero-taglinePart js-IndexHero-taglinePart">...</span>
-    </p>
+    <h2 class="IndexHero-tagline">
+      The file uploader that <br>
+      <span class="IndexHero-taglinePart js-IndexHero-taglinePart is-visible">loves to play fetch</span>
+    </h2>
 
     <ul class="IndexHero-taglineList">
       <% site.data.taglines.forEach(function(tagline) {%>
         <li class="IndexHero-taglineItem js-IndexHero-taglineItem"><%- tagline %></li>
       <% }); %>
     </ul>
-
-    <ul class="IndexSocial">
-      <li><a href="https://twitter.com/uppy_io" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @uppy_io</a></li>
-      <li><iframe src="http://ghbtns.com/github-btn.html?user=transloadit&repo=uppy&type=watch&count=true"
-    allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe></li>
-     </li>
-      <li class="BuildBadge">
-       <span class="wrapper">
-         <a href="https://travis-ci.org/transloadit/uppy"><img src="https://travis-ci.org/transloadit/uppy.svg" alt="Build Status"></a>
-       </span>
-    </ul>
-    <a class="GetStartedBtn" href="/guide/index.html">Get Started</a>
-    <p class="IndexHero-description">
-      <%- config.description %>
-    </p>
   </header>
+
+  <ul class="IndexSocial">
+    <li><a href="https://twitter.com/uppy_io" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @uppy_io</a></li>
+    <li><iframe src="http://ghbtns.com/github-btn.html?user=transloadit&repo=uppy&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe></li>
+   </li>
+    <li class="BuildBadge">
+     <span class="wrapper">
+       <a href="https://travis-ci.org/transloadit/uppy"><img src="https://travis-ci.org/transloadit/uppy.svg" alt="Build Status"></a>
+     </span>
+  </ul>
+</section>
+
+<section class="IndexAbout">
+  <div class="IndexAbout-item">
+    <img class="IndexAbout-icon" src="/images/traffic-light.svg">
+    <h2 class="IndexSection-title">Work in progress</h2>
+    <p><%- config.description %></p>
+  </div>
+  <div class="IndexAbout-item">
+    <img class="IndexAbout-icon" src="/images/transloadit-logo.png">
+    <h2 class="IndexSection-title">Open Source</h2>
+    <p><%- config.descriptionWho %></p>
+  </div>
 </section>
 
 <section id="example" class="IndexExample">
-  <h2 class="IndexExample-title">Quick Example</h2>
+  <h2 class="IndexSection-title">Quick Example</h2>
 
   <div class="IndexExample-block"><%- partial('partials/frontpage-code-sample') %></div>
 
   <div class="sign">&raquo;</div>
 
   <div class="IndexExample-block"><img src="/images/uppy-dragdrop-screenshot.png"></div>
+
+  <a class="GetStartedBtn" href="/guide/index.html">Get Started</a>
 </section>
 
 <!-- <section id="features">

website/themes/uppy/source/css/_common.scss

@@ -177,7 +177,7 @@ a.button {
 
 .page-index .MainHeader {
   padding-top: 1.5em;
-  padding-bottom: 2.5em;
+  padding-bottom: 1.5em;
   border-top: 3px solid $color-primary;
 }
 

website/themes/uppy/source/css/_index.scss

@@ -23,67 +23,63 @@
 .IndexHero {
   text-align: center;
   position: relative;
+  max-width: 950px;
+  margin: auto;
+  padding: 0 20px;
 }
 
 .IndexHero-logo {
-  margin: 0.5em 0 0.5em;
-}
-
-.IndexHero-logoImg {
-  margin-bottom: 1em;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 130px;
 }
 
 .IndexHero-title {
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 25px;
+  padding-top: 10px;
   font-family: $fontFamily-logo;
   font-weight: 400;
-  font-size: 4em;
-  margin: 0;
-  margin-bottom: 0.2em;
-}
-
-.IndexHero-subtitle {
-  font-family: $fontFamily-logo;
-  font-size: 1.6em;
-  font-weight: 400;
+  font-size: 3.5em;
   margin: 0;
+  margin-bottom: 20px;
 }
 
 .IndexHero-tagline {
-  font-size: $fontSize-l;
-  line-height: 1.4;
-  max-width: 950px;
-  padding: 0 20px;
+  font-size: $fontSize-m;
+  line-height: 1.3;
+  font-weight: normal;
   text-align: center;
-  margin: 1.5em auto;
+  margin: 0 auto;
+  margin-top: 10px;
+  margin-bottom: 40px;
   color: $color-light;
+
+  @media #{$screen-medium} {
+    font-size: $fontSize-l;
+    line-height: 1.4;
+  }
 }
 
 .IndexHero-taglineList {
   display: none;
 }
 
-.js-IndexHero-taglinePart {
-  transition: all 0.7s;
+.IndexHero-taglinePart {
+  transition: all ease-in-out 0.6s;
   opacity: 0;
 
   &.is-visible { opacity: 1; }
 }
 
-.IndexHero-description {
-  font-size: 16px;
-  line-height: 1.4;
-  max-width: 800px;
-  padding: 0 20px;
-  text-align: center;
-  margin: 1.5em auto;
-  color: $color-light;
-}
-
 .IndexSocial {
   text-align: center;
   list-style-type: none;
-  margin: 3em auto;
   padding: 0;
+  margin: 0 auto;
+  margin-top: 2em;
+  margin-bottom: 2em;
 }
 
 .IndexSocial li {
@@ -94,6 +90,72 @@
   &.last { margin-left: -2px; }
 }
 
+.IndexAbout {
+  // @include clearfix;
+  max-width: 760px;
+  margin: 3em auto;
+  padding: 0 20px;
+  font-size: 19px;
+  line-height: 1.5;
+  text-align: center;
+
+  @media #{$screen-medium} {
+    text-align: left;
+  }
+
+  a {
+    font-weight: bold;
+    color: rgba($color-black, 0.8);
+
+    &:hover {
+      color: $color-black;
+    }
+  }
+}
+
+.IndexAbout-item {
+  position: relative;
+  margin-bottom: 80px;
+}
+
+.IndexAbout-item:first-child {
+  @media #{$screen-medium} {
+    padding-left: 130px;
+
+    .IndexAbout-icon {
+      top: 20px;
+      left: 0;
+    }
+  }
+}
+
+.IndexAbout-item:nth-child(2) {
+  @media #{$screen-medium} {
+    padding-right: 150px;
+
+    .IndexAbout-icon {
+      top: 20px;
+      right: 0;
+    }
+  }
+}
+
+.IndexAbout-icon {
+  max-width: 90px;
+
+  @media #{$screen-medium} {
+    position: absolute;
+  }
+}
+
+.IndexAbout-item h2 {
+  margin-bottom: 0.1em;
+}
+
+.IndexAbout-item p {
+  margin-top: 0;
+}
+
 .GetStartedBtn {
   font-size: 1.2em;
   text-decoration: none;
@@ -102,10 +164,11 @@
   display: inline-block;
   padding: 12px 40px;
   border-radius: 25px;
-  transition: all .15s ease;
+  transition: all .3s ease;
   background-color: $color-primary;
   color: $color-white;
-  margin-bottom: 1.5em;
+  margin-top: 3em;
+  margin-bottom: 2em;
 
   &:hover { @include zoom; }
 }
@@ -147,8 +210,8 @@
   }
 }
 
-.IndexExample-title {
-  text-align: center;
+.IndexSection-title {
+  font-size: 25px;
   margin-bottom: 1.5em;
 }
 

website/themes/uppy/source/js/common.js

@@ -201,7 +201,7 @@
 
   function IndexPage () {
     looptagLines()
-    setInterval(looptagLines, 4000)
+    setInterval(looptagLines, 3800)
   }
 
   // Loop and render
@@ -217,7 +217,7 @@
       taglinePart.innerHTML = taglineText
 
       taglinePart.classList.add('is-visible')
-    }, 1000)
+    }, 800)
   }
 
   // Search with SwiftType