Add @AJvanLoon's taglines to the Uppy homepage. Still needs polish tho

CHANGELOG.md

@@ -15,6 +15,8 @@ In the current stage we aim to release a new version on the first Tuesday of eve
 
 Ideas that will be planned into a release at one point
 
+- [ ] website: Remove a few of the less favorite taglines. 10-15 items can likely remain.
+- [ ] website: Make cycling through taglines pretty (in terms of code and a nice animation or sth)
 - [ ] instagram: Add basic Instagram plugin example (#21)
 - [ ] presets: Add basic preset that mimics Transloadit's jQuery plugin (#28)
 - [ ] tus: Add support tus 1.0 uploading capabilities (#3)

website/_config.yml

@@ -19,12 +19,12 @@ subtitle: "Almost as cute as a puppy"
 logo_large: /images/uppy.svg
 logo_medium: /images/uppy.svg
 logo_icon: /images/uppy.png
-description_primary: >
+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.
-description_secondary: >
-  Uppy (almost as cute as a puppy) is brought to you by the people behind <a href="https://transloadit.com">Transloadit</a> and as such has first class
+  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.
 author: Transloadit

website/src/_data/taglines.yml

@@ -0,0 +1,26 @@
+ - 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.
+ - doesn’t lick its own balls.

website/themes/uppy/layout/index.ejs

@@ -6,7 +6,9 @@
       <%- config.subtitle %> <img align="absmiddle" width="18" height="18" class="emoji dog" title="puppy" src="/images/emojis/dog.png">
     </h3> -->
 
-    <p class="IndexHero-descPrimary"><%- config.description_primary %></p>
+    <p class="IndexHero-tagline">
+      ...
+    </p>
     <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"
@@ -18,8 +20,9 @@
        </span>
     </ul>
     <a class="GetStartedBtn" href="/guide/index.html">Get Started</a>
-    <p class="IndexHero-descSecondary"><%- config.description_secondary %></p>
-
+    <p class="IndexHero-description">
+      <%- config.description %>
+    </p>
   </header>
 </section>
 
@@ -64,3 +67,28 @@
 
 <!-- Twitter follow button script -->
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+
+
+<!-- Cycle through taglines -->
+<!-- @todo someone put this in the right place and make it pretty please : ) -->
+<script>
+  // Pick random item
+  function pickRandom(items){
+    return items[Math.floor(Math.random() * items.length)];
+  }
+
+  // Loop and render
+  function looptagLines (taglines) {
+    document.querySelector(".IndexHero-tagline").innerHTML = 'The file uploader that ' + pickRandom(taglines);
+    setTimeout(looptagLines.bind(this, taglines), 2000);
+  }
+
+  // Build array
+  var taglines = [];
+  <% site.data.taglines.forEach(function(tagline) {%>
+    taglines.push("<%- tagline %>");
+  <% }); %>
+
+  // Start
+  looptagLines(taglines);
+</script>

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

@@ -48,7 +48,7 @@
   margin: 0;
 }
 
-.IndexHero-descPrimary {
+.IndexHero-tagline {
   font-size: $fontSize-l;
   line-height: 1.4;
   max-width: 950px;
@@ -58,7 +58,7 @@
   color: $color-light;
 }
 
-.IndexHero-descSecondary {
+.IndexHero-description {
   font-size: 16px;
   line-height: 1.4;
   max-width: 800px;