Refactoring, style changes, simplifications

website/themes/uppy/layout/index.ejs

@@ -1,43 +1,31 @@
-<div id="hero">
-  <div class="inner">
-    <ul id="nav">
-      <li><a href="/guide/" class="nav-link">Guide</a></li>
-      <li><a href="/api/" class="nav-link">API</a></li>
-      <li><a href="/examples/" class="nav-link">Examples</a></li>
-      <!-- <li><a href="/blog" class="nav-link">Blog</a></li> -->
-      <%- partial('partials/community_dropdown') %>
-    </ul>
-    <div id="logo-wrap">
-      <img id="logo" width="200" class="emoji dog" title="puppy" src="<%- config.logo_large %>">
-      <h1><%- config.title %></h1>
-    </div>
-    <p class="desc">
-      <strong>
-        <%- config.subtitle %> <img align="absmiddle" width="18" height="18" class="emoji dog" title="puppy" src="/images/emojis/dog.png">
-      </strong>
-      <br />
-      <br />
-      <%- config.description %>
-    </p>
-    <p class="buttons">
-      <a href="/guide/installation.html" class="button">Install v<%- config.uppy_version %></a>
-    </p>
-    <ul id="social">
-      <li><a href="https://twitter.com/uppyjs" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @uppyjs</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>
+<section id="hero" class="IndexHero">
+  <header id="logo-wrap" class="IndexHero-logo">
+    <img id="logo" width="200" class="IndexHero-logoImg emoji dog" title="puppy" alt="uppy" src="<%- config.logo_large %>">
+    <h1 class="indexHero-title"><%- config.title %></h1>
+  </header>
 
-      <li id="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>
-      </li>
-    </ul>
+  <div class="IndexHero-desc">
+    <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><%- config.description %></p>
   </div>
-  <!-- <div class="down"><img src="/images/down.png"></div> -->
-</div>
 
-<div id="example">
+  <a href="/guide/installation.html" class="IndexHero-installBtn button">Install v<%- config.uppy_version %></a>
+
+  <ul id="social" class="IndexSocial">
+    <li><a href="https://twitter.com/uppyjs" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @uppyjs</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 id="buildbadge" 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>
+    </li>
+  </ul>
+</section>
+
+<section id="example" class="IndexExample">
   <h2>10 Second Example</h2>
 
   <div class="block"><%- partial('partials/example1') %></div>
@@ -46,8 +34,9 @@
 
   <div class="block"><%- partial('partials/example2') %></div>
 
-</div>
-<div id="features">
+</section>
+
+<section id="features">
   <div class="feats">
     <% for (var k in site.data.features) { var v = site.data.features[k]; %>
       <div class="feat">
@@ -56,8 +45,9 @@
       </div>
     <% } %>
   </div>
-</div>
-<div id="design_goals">
+</section>
+
+<section id="design_goals">
   <h2>Design Goals:</h2>
   <ul>
     <% for (var k in site.data.design_goals) { var v = site.data.design_goals[k]; %>
@@ -66,14 +56,15 @@
     </li>
     <% } %>
   </ul>
-</div>
-<div id="footer">
+</section>
+
+<footer id="footer">
   <a class="start" href="/guide/index.html">Get Started</a>
   <p>Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT License</a></p>
   <p>This site borrows heavily from Evan You's excellent <a href="https://github.com/vuejs/vuejs.org">Vue.js</a> (<a href="https://github.com/transloadit/uppy/blob/master/website/VUEORG_LICENSE">LICENSE</a>) (he <a href="https://twitter.com/youyuxi/status/672441843183960067">approves</a>)</p>
   <p>Puppy icon by <a href="https://thenounproject.com/2y2"></a>Jorge Fernandez del Castillo Gomez</a> from the Noun Project.</p>
   <p>Copyright (c) <%- date(Date.now(), 'YYYY') %> <a href="https://transloadit.com" target="_blank">Transloadit</a></p>
-</div>
+</footer>
 
 <!-- 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>

website/themes/uppy/layout/layout.ejs

@@ -1,38 +1,46 @@
 <% var isIndex = page.path === 'index.html' %>
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title><%- page.title ? page.title + ' - ' : '' %><%- config.title %></title>
-        <meta charset="utf-8">
-        <meta name="description" content="<%- config.title %> - <%- config.subtitle %>">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono' rel='stylesheet' type='text/css'>
-        <link href='http://fonts.googleapis.com/css?family=Dosis:300,500&text=Uppy' rel='stylesheet' type='text/css'>
-        <link rel="icon" href="<%- config.logo_icon %>" type="image/x-icon">
-        <script>
-            window.PAGE_TYPE = "<%- page.type %>"
-        </script>
-        <%- css('css/main') %>
-        <%- partial('partials/ga') %>
-    </head>
-    <body class="<%= isIndex ? 'index' : 'page' %>">
-        <div id="mobile-bar">
-            <a class="menu-button"></a>
-            <a class="logo" href="/"></a>
-        </div>
-        <% if (!isIndex) { %>
-            <%- partial('partials/header') %>
-            <div id="main">
-                <% if (page.blog_index) { %>
-                    <%- partial('partials/blog') %>
-                <% } else { %>
-                    <%- body %>
-                <% } %>
-            </div>
-            <script src="/js/smooth-scroll.min.js"></script>
-            <script src="/js/common.js"></script>
-        <% } else { %>
-            <%- body %>
-        <% } %>
-    </body>
+  <head>
+    <title><%- page.title ? page.title + ' - ' : '' %><%- config.title %></title>
+    <meta charset="utf-8">
+    <meta name="description" content="<%- config.title %> - <%- config.subtitle %>">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Dosis:300,500&text=Uppy' rel='stylesheet' type='text/css'>
+    <link rel="icon" href="<%- config.logo_icon %>" type="image/x-icon">
+    <script>
+      window.PAGE_TYPE = "<%- page.type %>"
+    </script>
+    <%- css('css/main') %>
+    <%- partial('partials/ga') %>
+  </head>
+  <body class="<%= isIndex ? 'page-index' : 'page-inner' %>">
+    <nav id="mobile-bar">
+      <a class="menu-button"></a>
+      <a class="logo" href="/"></a>
+    </nav>
+
+    <header id="header" class="MainHeader">
+      <a id="logo" class="MainLogo" href="/">
+        <img src="<%- config.logo_medium %>">
+        <span><%- config.title %></span>
+      </a>
+
+      <nav>
+        <ul id="nav" class="MainMenu">
+          <%- partial('partials/main_menu') %>
+        </ul>
+      </nav>
+    </header>
+
+    <main id="main">
+      <%- body %>
+    </main>
+
+    <% if (!isIndex) { %>
+      <script src="/js/smooth-scroll.min.js"></script>
+      <script src="/js/common.js"></script>
+    <% } %>
+  </body>
 </html>

website/themes/uppy/layout/partials/header.ejs

@@ -1,9 +1 @@
-<div id="header">
-    <a id="logo" href="/">
-        <img src="<%- config.logo_medium %>">
-        <span><%- config.title %></span>
-    </a>
-    <ul id="nav">
-        <%- partial('partials/main_menu') %>
-    </ul>
-</div>
+

website/themes/uppy/layout/partials/main_menu.ejs

@@ -1,10 +1,13 @@
 <li>
-  <form id="search-form">
+  <form id="search-form" class="MainMenu-search">
     <input type="text" id="search-query" class="st-default-search-input">
   </form>
 </li>
 <li><a href="/guide/" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
 <li><a href="/api/" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API</a></li>
 <li><a href="/examples/" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
-<!-- <li><a href="/blog/" class="nav-link<%- page.path.match(/blog/) ? ' current' : '' %>">Blog</a></li> -->
+<li><a href="https://github.com/transloadit/uppy" class="nav-link">Github</a></li>
+<!--
+<li><a href="/blog/" class="nav-link<%- page.path.match(/blog/) ? ' current' : '' %>">Blog</a></li>
 <%- partial('partials/community_dropdown') %>
+-->

website/themes/uppy/layout/partials/sidebar.ejs

@@ -1,22 +1,22 @@
 <div class="sidebar">
-    <ul class="main-menu">
-        <%- partial('partials/main_menu') %>
+  <ul class="main-menu">
+    <%- partial('partials/main_menu') %>
+  </ul>
+  <div class="list">
+    <h2>
+      <%- type === 'api' ? 'API' : (type.charAt(0).toUpperCase() + type.slice(1)) %>
+    </h2>
+    <ul class="menu-root">
+      <% site.pages.find({type: type}).sort('order').each(function (p) { %>
+        <li>
+          <a href="/<%- p.path %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %><%- p.is_new ? ' new' : '' %>"><%- p.title %></a>
+        </li>
+      <% }) %>
     </ul>
-    <div class="list">
-        <h2>
-          <%- type === 'api' ? 'API' : (type.charAt(0).toUpperCase() + type.slice(1)) %>
-        </h2>
-        <ul class="menu-root">
-            <% site.pages.find({type: type}).sort('order').each(function (p) { %>
-                <li>
-                    <a href="/<%- p.path %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %><%- p.is_new ? ' new' : '' %>"><%- p.title %></a>
-                </li>
-            <% }) %>
-        </ul>
-        <div id="buildbadge">
-            <span class="wrapper" style="width: 110px">
-              <a href="https://travis-ci.org/transloadit/uppy"><img src="https://travis-ci.org/transloadit/uppy.svg" alt="Build Status"></a>
-            </span>
-        </div>
+    <div id="buildbadge" class="BuildBadge">
+      <span class="wrapper" style="width: 110px">
+        <a href="https://travis-ci.org/transloadit/uppy"><img src="https://travis-ci.org/transloadit/uppy.svg" alt="Build Status"></a>
+      </span>
     </div>
+  </div>
 </div>

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

@@ -1,7 +1,3 @@
-body {
-  // background-image: svg('uppy.svg', '[fill]: black');
-}
-
 body {
   font-family: $body-font;
   font-size: $body-font-size;
@@ -13,12 +9,10 @@ body {
 
 a {
   text-decoration: none;
-  color: $medium
+  color: $medium;
 }
 
-img {
-  border: none;
-}
+img { border: none; }
 
 h1, h2, h3, h4, strong {
   font-weight: 600;
@@ -41,13 +35,9 @@ code {
   white-space: nowrap;
 }
 
-em {
-  color: $light;
-}
+em { color: $light; }
 
-p {
-  word-spacing: 0.05em;
-}
+p { word-spacing: 0.05em; }
 
 a.button {
   display: inline-block;
@@ -114,14 +104,17 @@ a.button {
 
 }
 
-#main {
+.page-index .BuildBadge { margin-left: -2px !important; }
+.page-inner .BuildBadge { margin-top: 15px; }
+
+.page-inner #main {
   position: relative;
   z-index: 1;
   padding: 0 60px 30px;
   overflow-x: hidden;
 }
 
-#nav {
+.MainMenu {
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -138,30 +131,30 @@ a.button {
     }
   }
 
-  .nav-dropdown {
-    display: none;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    background-color: #fff;
-    padding: 10px 0;
-    border: 1px solid #ddd;
-    border-bottom-color: #ccc;
-    text-align: left;
-    border-radius: 4px;
-
-    li {
-      line-height: 1.8em;
-      margin: 0;
-      display: block;
-    }
-
-    a {
-      color: $light;
-      font-size: .9em;
-      display: block;
-      padding: 0 30px 0 20px;
-      &:hover { color: $primary; }
-    }
-  }
+  // .nav-dropdown {
+  //   display: none;
+  //   position: absolute;
+  //   top: 100%;
+  //   left: 0;
+  //   background-color: #fff;
+  //   padding: 10px 0;
+  //   border: 1px solid #ddd;
+  //   border-bottom-color: #ccc;
+  //   text-align: left;
+  //   border-radius: 4px;
+  //
+  //   li {
+  //     line-height: 1.8em;
+  //     margin: 0;
+  //     display: block;
+  //   }
+  //
+  //   a {
+  //     color: $light;
+  //     font-size: .9em;
+  //     display: block;
+  //     padding: 0 30px 0 20px;
+  //     &:hover { color: $primary; }
+  //   }
+  // }
 }

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

@@ -1,147 +0,0 @@
-@import "_settings"
-@import "_syntax"
-
-body
-    font-family $body-font
-    font-size $body-font-size
-    -webkit-font-smoothing antialiased
-    -moz-osx-font-smoothing grayscale
-    color $medium
-    margin 0
-
-a
-    text-decoration none
-    color $medium
-
-img
-    border none
-
-h1, h2, h3, h4, strong
-    font-weight 600
-    color $dark
-
-code, pre
-    font-family $code-font
-    font-size $code-font-size
-    background-color $codebg
-    -webkit-font-smoothing initial
-    -moz-osx-font-smoothing initial
-
-code
-    color #e96900
-    padding 3px 5px
-    margin 0 2px
-    border-radius 2px
-    white-space nowrap
-
-em
-    color $light
-
-p
-    word-spacing 0.05em
-
-a.button
-    display inline-block
-    font-family $code-font
-    font-weight 700
-    color #fff
-    background-color lighten($primary, 8%)
-    border-bottom 2px solid darken($primary, 12%)
-    padding 12px 14px
-    border-radius 4px
-    transition all .15s ease
-    &:hover
-        background-color lighten($primary, 15%)
-        -webkit-transform translate(0, -2px)
-        transform translate(0, -2px)
-
-.highlight
-    overflow-x auto
-    position relative
-    padding 0
-    background-color $codebg
-    padding .8em .8em .4em
-    line-height 1.1em
-    border-radius $radius
-    table, tr, td
-        width 100%
-        border-collapse collapse
-        padding 0
-        margin 0
-    .gutter
-        width 1.5em
-    .code
-        pre
-            padding 1.2em 1.4em
-            line-height 1.5em
-            margin 0
-    &.html, &.js, &.bash, &.css
-        .code:after
-            position absolute
-            top 0
-            right 0
-            color #ccc
-            text-align right
-            font-size .75em
-            padding 5px 10px 0
-            line-height 15px
-            height 15px
-            font-weight 600
-    &.html .code:after
-        content 'HTML'
-    &.js .code:after
-        content 'JS'
-    &.bash .code:after
-        content 'Shell'
-    &.css .code:after
-        content 'CSS'
-
-#main
-    position relative
-    z-index 1
-    padding 0 60px 30px
-    overflow-x hidden
-
-#nav
-    .nav-link
-        cursor pointer
-    .nav-dropdown-container
-        .nav-link
-            &:hover
-                border-bottom none
-        &:hover
-            .nav-dropdown
-                display block
-    .nav-dropdown
-        display none
-        position absolute
-        top 100%
-        left 0
-        background-color #fff
-        padding 10px 0
-        border 1px solid #ddd
-        border-bottom-color #ccc
-        text-align left
-        border-radius 4px
-        li
-            line-height 1.8em
-            margin 0
-            display block
-        a
-            color $light
-            font-size .9em
-            display block
-            padding 0 30px 0 20px
-            &:hover
-                color $primary
-    .arrow
-        display inline-block
-        vertical-align middle
-        margin-top -1px
-        margin-left 6px
-        margin-right -14px
-        width 0
-        height 0
-        border-left 4px solid transparent
-        border-right 4px solid transparent
-        border-top 5px solid #ccc

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

@@ -6,7 +6,7 @@ html, body {
   height: 100%;
 }
 
-#nav, #translations {
+.page-index .MainMenu {
   list-style-type: none;
   text-align: center;
   padding: 0;
@@ -16,24 +16,24 @@ html, body {
     display: inline-block;;
     position: relative;
     line-height: 40px;
-    &:last-child {
-      .nav-link { margin-right: 0; }
+    &:last-child .nav-link {
+       margin-right: 0;
     }
   }
 }
 
-#translations {
-  margin-bottom: 3em;
-
-  .delimiter {
-    color: $light;
-    margin: 0 5px;
-  }
-
-  .nav-link {
-    margin: 0;
-  }
-}
+// #translations {
+//   margin-bottom: 3em;
+//
+//   .delimiter {
+//     color: $light;
+//     margin: 0 5px;
+//   }
+//
+//   .nav-link {
+//     margin: 0;
+//   }
+// }
 
 .nav-link {
   color: $light;
@@ -44,71 +44,70 @@ html, body {
   &:hover, &.current { border-bottom: 3px solid $primary; }
 }
 
-#logo {
+.page-index .MainLogo {
+  display: none;
+}
+
+.page-index .MainMenu-search {
+  display: none;
+}
+
+.MainLogo {
   display: block;
   margin: 0 auto;
   width: 200px;
 }
 
-#logo-wrap {
-  margin: 2em 0 2em;
-}
-
-#hero {
+.IndexHero {
   text-align: center;
   position: relative;
 
-  .inner { padding-top: 20px; }
-
-  h1 {
-    font-family: $logo-font;
-    font-weight: 300;
-    font-size: 4em;
-    margin: 0;
-  }
-
   .warning {
     color: $light;
   }
+}
 
-  .desc {
-    max-width: 800px;
-    padding: 0 20px;
-    text-align: center;
-    margin: 1.5em auto;
-    color: $light;
-  }
+.IndexHero-installBtn {
+  width: 280px;
+  margin: .5em;
+}
 
-  .down {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    left: 0;
-    padding: 1.5em 0;
-  }
+.IndexHero-logo {
+  margin: 2em 0 2em;
+}
 
-  a.button {
-    width: 280px;
-    margin: .5em;
-  }
+.IndexHero-title {
+  font-family: $logo-font;
+  font-weight: 300;
+  font-size: 4em;
+  margin: 0;
 }
 
-#social {
+.IndexHero-desc {
+  max-width: 800px;
+  padding: 0 20px;
+  text-align: center;
+  margin: 1.5em auto;
+  color: $light;
+}
+
+.IndexSocial {
   text-align: center;
   list-style-type: none;
   margin: 0 auto;
   padding: 0;
   margin: 1.5em auto;
+}
 
-  li {
-    display: inline-block;
-    margin: 0 5px;
-    vertical-align: middle;
-    &.last { margin-left: -2px; }
-  }
+.IndexSocial li {
+  display: inline-block;
+  margin: 0 5px;
+  vertical-align: middle;
+
+  &.last { margin-left: -2px; }
 }
 
-#example {
+.IndexExample {
   text-align: center;
   padding: 20px;
   max-width: 1200px;
@@ -289,9 +288,6 @@ html, body {
   p { margin: .3em 0; }
 }
 
-// #main { display: none; }
-#buildbadge { margin-left: -2px !important; }
-
 @media screen and (max-width: 480px) {
   body {
     font-size: 14px;

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

@@ -6,7 +6,7 @@
   z-index: 2;
 }
 
-.page #nav {
+.page-inner #nav {
   position: absolute;
   right: 60px;
   top: 25px;
@@ -41,7 +41,7 @@
   &:focus { border-color: $primary; }
 }
 
-#logo {
+.MainLogo {
   display: inline-block;
   font-size: 1.5em;
   line-height: $header-height;
@@ -309,10 +309,6 @@
   }
 }
 
-#buildbadge {
-  margin-top: 15px;
-}
-
 @media screen and (max-width: 560px) {
   #downloads {
     text-align: center;

website/themes/uppy/source/css/_settings.styl

@@ -1,22 +0,0 @@
-// font faces
-$body-font = 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
-$logo-font = 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
-$code-font = 'Roboto Mono', Monaco, courier, monospace
-
-// font sizes
-$body-font-size = 15px
-$code-font-size = .8em
-
-// colors
-$blue     = #01A5E1
-$dark     = #2c3e50
-$medium   = #34495e
-$light    = #7f8c8d
-$green    = #42b983
-$border   = #dddddd
-$codebg   = #f8f8f8
-$red      = #ff6666
-$darkgray = #34393A
-$primary  = $blue
-
-$radius = 2px

website/themes/uppy/source/css/_syntax.styl

@@ -1,77 +0,0 @@
-.gutter pre
-  color #999
-
-pre
-  color: #525252
-  .function .keyword,
-  .constant
-    color: #0092db
-  .keyword,
-  .attribute
-    color: #e96900
-  .number,
-  .literal
-    color: #AE81FF
-  .tag,
-  .tag .title,
-  .change,
-  .winutils,
-  .flow,
-  .lisp .title,
-  .clojure .built_in,
-  .nginx .title,
-  .tex .special
-    color: #2973b7
-  .class .title
-    color: white
-  .symbol,
-  .symbol .string,
-  .value,
-  .regexp
-    color: $green
-  .title
-    color: #A6E22E
-  .tag .value,
-  .string,
-  .subst,
-  .haskell .type,
-  .preprocessor,
-  .ruby .class .parent,
-  .built_in,
-  .sql .aggregate,
-  .django .template_tag,
-  .django .variable,
-  .smalltalk .class,
-  .javadoc,
-  .django .filter .argument,
-  .smalltalk .localvars,
-  .smalltalk .array,
-  .attr_selector,
-  .pseudo,
-  .addition,
-  .stream,
-  .envvar,
-  .apache .tag,
-  .apache .cbracket,
-  .tex .command,
-  .prompt
-    color: $green
-  .comment,
-  .java .annotation,
-  .python .decorator,
-  .template_comment,
-  .pi,
-  .doctype,
-  .deletion,
-  .shebang,
-  .apache .sqbracket,
-  .tex .formula
-    color: #b3b3b3
-  .coffeescript .javascript,
-  .javascript .xml,
-  .tex .formula,
-  .xml .javascript,
-  .xml .vbscript,
-  .xml .css,
-  .xml .cdata
-    opacity: 0.5

website/themes/uppy/source/css/index.styl

@@ -1,324 +0,0 @@
-@import "_common"
-
-zoom()
-    -webkit-transform scale(1.05)
-    -moz-transform scale(1.05)
-    -ms-transform scale(1.05)
-    transform scale(1.05)
-
-html, body
-    height 100%
-
-#nav, #translations
-    list-style-type none
-    text-align center
-    padding 0
-    margin 0
-    li
-        display inline-block
-        position relative
-        line-height 40px
-        &:last-child .nav-link
-            margin-right 0
-
-#translations
-    margin-bottom 3em
-    .delimiter
-        color $light
-        margin 0 5px
-    .nav-link
-        margin 0
-
-.nav-link
-    color $light
-    padding-bottom 3px
-    margin 0 1.5em
-    &:first-child
-        margin-left 0
-    &:hover, &.current
-        border-bottom 3px solid $primary
-
-#logo
-    display block
-    margin 0 auto
-    width 200px
-
-#logo-wrap
-    margin 2em 0 2em
-
-#hero
-    text-align center
-    // height 100%
-    // min-height 720px
-    position relative
-    .inner
-        padding-top: 20px
-        // height 640px
-        // width 100%
-        // position absolute
-        // top 50%
-        // margin-top -340px
-        // left 0
-    h1
-        font-family $logo-font
-        font-weight 300
-        font-size 4em
-        margin 0
-    .warning
-        color $light
-    .desc
-        max-width 800px
-        padding 0 20px
-        text-align center
-        margin 1.5em auto
-        color $light
-    .down
-        position absolute
-        bottom 0
-        width 100%
-        left 0
-        padding 1.5em 0
-        img
-            width 20px
-    a.button
-        width 280px
-        margin .5em
-
-#social
-    text-align center
-    list-style-type none
-    margin 0 auto
-    padding 0
-    margin 1.5em auto
-    li
-        display inline-block
-        margin 0 5px
-        vertical-align middle
-        &.last
-            margin-left -2px
-
-#example
-    //background-color #f3f3f3
-    text-align center
-    padding 20px
-    max-width 1200px
-    margin 0 auto 3em
-    h2
-        margin-bottom 1.5em
-    code, pre
-        padding 0
-        margin 0
-        background-color transparent
-        white-space pre
-        font-family: 'Roboto Mono', Monaco, courier, monospace;
-        font-size: 12px;
-        height: auto;
-        line-height: 18px;
-    figure.highlight
-        margin 0
-        box-shadow none
-        background-color transparent
-    .sign
-        display inline-block
-        height 10em
-        line-height 9em
-        padding 0 .5em
-        font-weight 600
-        color $light
-    .block
-        padding 7px
-        text-align left
-        display inline-block
-        width 43%
-        height 12em
-        vertical-align top
-        background-color #f9f9f9
-        border-radius 2px
-        box-shadow 0 1px 2px rgba(0,0,0,.125)
-        overflow-x scroll
-
-#features
-    padding 3em 0
-    text-align center
-    background-color #f9f9f9
-    .cool
-        font-size 1.8em
-        text-align center
-        margin-top 1em
-        color $light
-    .feats
-        max-width 1200px
-        margin 0 auto
-    .feat
-        box-sizing border-box
-        -moz-box-sizing border-box
-        display inline-block
-        text-align left
-        vertical-align top
-        width 280px
-        margin 40px
-        h2
-            color $medium
-            line-height 40px
-            margin-bottom 0
-        p
-            color $light
-            padding-left 52px
-            margin .4em 0
-        a
-            color $primary
-            font-weight 600
-    .icon
-        display inline-block
-        vertical-align middle
-        position relative
-        top -3px
-        width 40px
-        height 40px
-        margin-right 12px
-        background url(../images/icons.png)
-        background-size 240px 40px
-        &.fast
-            background-position -40px 0
-        &.compact
-            background-position -80px 0
-        &.powerful
-            background-position -120px 0
-        &.composable
-            background-position -160px 0
-        &.module
-            background-position -200px 0
-
-#design_goals
-    padding 4em 0
-    background-color $primary
-    color #fff
-    h2
-        margin-top 0
-        color #fff
-        font-size 1.5em
-        text-align center
-    ul
-        line-height 1.8em
-        font-size 1.15em
-        width 640px
-        margin 0 auto
-        padding 0
-        list-style-type none
-        li:before
-            content ""
-            display inline-block
-            width 24px
-            height 24px
-            background url(../images/check.png) center center no-repeat
-            background-size 24px 24px
-            margin-right 10px
-            position relative
-            top 4px
-
-#footer
-    text-align center
-    color #fff
-    padding 4em 0
-    background-color $darkgray
-    .avatar
-        width 100px
-        border-radius 100%
-        margin 2.5em 0 1em
-    a
-        color #fff
-        text-decoration underline
-        &.start
-            font-size 1.2em
-            text-decoration none
-            text-transform uppercase
-            letter-spacing 1px
-            border 1px solid #fff
-            display inline-block
-            padding 12px 20px
-            border-radius 25px
-            transition all .15s ease
-            margin-bottom 2em
-            &:hover
-                background-color #fff
-                color #7f8c8d
-                zoom()
-    p
-        margin .3em 0
-
-#main
-    display none
-
-#buildbadge
-    margin-left -2px !important
-
-@media screen and (max-width: 480px)
-    body
-        font-size 14px
-    #nav
-        margin 2em 1.8em 0
-    #translations
-        margin-bottom 2em
-    #logo
-        width 120px
-    .nav-link
-        font-size .85em
-        margin 0 .5em
-    .divider
-        font-size 1.2em
-        margin 2.5em 1em
-    #hero
-        // min-height 560px
-        .inner
-            // height 600px
-            // margin-top -300px
-        h1
-            font-size 2em
-            font-weight 400
-        .buttons
-            max-width 300px
-            margin 1em auto
-        a.button
-            width 260px
-            font-size .8em
-            margin .5em 0
-        .desc
-            max-width 300px
-        .warning, .desc
-            font-size .85em
-            margin 1em auto
-            br
-                display none
-        .down
-            display none
-    #social
-        max-width 340px
-        margin 1.2em auto
-    .cool
-        margin-top 0
-    #features .feat
-        font-size 14px
-        margin .8em 0
-        width 250px
-    #design_goals
-        ul
-            width 280px
-            font-size 1.1em
-        h2
-            font-size 1.4em
-
-@media screen and (max-width: 860px)
-    #features, #hero
-        font-size 16px
-    #example
-        .block
-            display block
-            width auto
-            height auto
-        #demo
-            padding 5px 20px 20px
-        .sign
-            display block
-            height 1em
-            line-height 1em
-            padding .5em 0

website/themes/uppy/source/css/page.styl

@@ -1,313 +0,0 @@
-@import "_common"
-
-$header-height = 40px
-
-#header
-    background-color #fff
-    box-shadow 0 0 4px rgba(0,0,0,.25)
-    padding 25px 60px
-    position relative
-    z-index 2
-
-#nav
-    list-style-type none
-    margin 0
-    padding 0
-    position absolute
-    right 60px
-    top 25px
-    height $header-height
-    line-height $header-height
-    .break
-        display none
-    li
-        display inline-block
-        position relative
-        margin 0 .6em
-
-.nav-link
-    padding-bottom 3px
-    &:hover, &.current
-        border-bottom 3px solid $primary
-
-#search-query
-    height 30px
-    line-height 30px
-    box-sizing border-box
-    padding 0 15px 0 30px
-    border 1px solid #e3e3e3
-    outline none
-    border-radius 15px
-    margin-right 10px
-    transition border-color .2s ease
-    background #fff url(/images/search.png) 8px 5px no-repeat
-    background-size 20px
-    &:focus
-        border-color $primary
-
-#logo
-    display inline-block
-    font-size 1.5em
-    line-height $header-height
-    color $dark
-    font-family $logo-font
-    font-weight 500
-    img
-        vertical-align middle
-        margin-right 6px
-        width $header-height
-        height $header-height
-
-#mobile-bar
-    position fixed
-    top 0
-    left 0
-    width 100%
-    height 40px
-    background-color #fff
-    z-index 9
-    display none
-    box-shadow 0 0 4px rgba(0,0,0,.25)
-    .menu-button
-        position absolute
-        width 24px
-        height 24px
-        top 8px
-        left 12px
-        background url(../images/menu.png) center center no-repeat
-        background-size 24px
-    .logo
-        position absolute
-        width 30px
-        height 30px
-        background url(../images/cute-puppy-2.png) center center no-repeat
-        top 5px
-        left 50%
-        margin-left -15px
-        background-size 30px
-
-.sidebar
-    position absolute
-    z-index 10
-    top 0
-    left 60px
-    bottom 0
-    padding 2.2em 0
-    width 260px
-    margin-right 20px
-    overflow-x hidden
-    overflow-y auto
-    -webkit-overflow-scrolling touch
-    -ms-overflow-style none
-    &::-webkit-scrollbar
-        width: 0 !important
-    h2
-        margin-top .2em
-    ul
-        list-style-type none
-        margin 0
-        line-height 1.8em
-        padding-left 1em
-    .version-select
-        vertical-align middle
-        margin-left 5px
-    .menu-root
-        padding-left 0
-    .menu-sub
-        font-size .85em
-    .sidebar-link
-        color $light
-        &.current
-            font-weight 600
-            color $primary
-        &.new
-            &:after
-                content "NEW"
-                display inline-block
-                font-size 10px
-                font-weight 600
-                color #fff
-                background-color $primary
-                line-height 14px
-                padding 0 4px
-                border-radius 3px
-                margin-left 5px
-                vertical-align middle
-                position relative
-                top -1px
-        &:hover
-            border-bottom 2px solid $primary
-    .section-link
-        &.active
-            font-weight bold
-            color $primary
-    .main-menu
-        margin-bottom 20px
-        display none
-        padding-left 0
-
-.content
-    padding 2.2em 0
-    max-width 600px
-    margin 0 auto
-    &.api
-        ul
-            padding-left 1.25em
-            line-height 1.4em
-            ul, p
-                margin .6em 0
-    a.button
-        font-size .9em
-        color #fff
-        margin .2em 0
-        width 180px
-        text-align center
-        padding 12px 24px
-        display inline-block
-        vertical-align middle
-    img
-        max-width 100%
-    span.light
-        color $light
-    span.info
-        font-size .85em
-        display inline-block
-        vertical-align middle
-        width 280px
-        margin-left 20px
-    h1
-        margin 0 0 1em
-    h2
-        margin 2em 0 .8em
-        padding-bottom .7em
-        border-bottom 1px solid $border
-    h3
-        margin 3em 0 1.2em
-        position relative
-        &:before
-            content "#"
-            color $primary
-            position absolute
-            left -0.7em
-            top -2px
-            font-size 1.2em
-            font-weight bold
-    figure, p, ul, ol
-        margin 1.2em 0
-    p, ul, ol
-        line-height 1.6em
-    ul, ol
-        padding-left 1.5em
-    a
-        color $primary
-        font-weight 600
-    blockquote
-        margin 2em 0
-        padding-left 20px
-        border-left 4px solid $primary
-        p
-            font-weight 600
-            margin-left 0
-    iframe
-        margin 1em 0
-    p.tip
-        padding 12px 24px 12px 30px
-        margin 2em 0
-        border-left 4px solid $red
-        background-color $codebg
-        position relative
-        border-bottom-right-radius $radius
-        border-top-right-radius $radius
-        &:before
-            position absolute
-            top 14px
-            left -12px
-            background-color $red
-            color #fff
-            content "!"
-            width 20px
-            height 20px
-            border-radius 100%
-            text-align center
-            line-height 20px
-            font-weight bold
-            font-family $logo-font
-            font-size 14px
-
-.guide-links
-    margin-top 2em
-    height 1em
-
-.footer
-    color $light
-    margin-top 2em
-    padding-top 2em
-    border-top 1px solid #e5e5e5
-    font-size .9em
-
-@media screen and (min-width: 720px)
-    #main.fix-sidebar
-        .sidebar
-            position fixed
-
-@media screen and (max-width: 1200px)
-    .content.with-sidebar
-        margin-left 280px
-
-#buildbadge
-    margin-top 15px
-
-@media screen and (max-width: 560px)
-    #downloads
-        text-align center
-        margin-bottom 25px
-        .info
-            margin-top 5px
-            margin-left 0
-    iframe
-        margin: 0 !important
-
-@media screen and (max-width: 720px)
-    body
-        -webkit-text-size-adjust none
-        font-size 14px
-    #header
-        display none
-    #logo
-        display none
-    .nav-link
-        padding-bottom 1px
-        &:hover, &.current
-            border-bottom 2px solid $primary
-    #search-query
-        width 200px
-        margin-bottom 10px
-    #mobile-bar
-        display block
-    #main
-        padding 2em 1.4em 0
-    .highlight pre
-        padding 1.2em 1em
-    .sidebar
-        position fixed
-        background-color #f9f9f9
-        height 100%
-        top 0
-        left 0
-        padding 60px 30px 20px
-        box-shadow 0 0 10px rgba(0,0,0,.2)
-        box-sizing border-box
-        transition all .4s cubic-bezier(0.4, 0, 0, 1)
-        -webkit-transform translate(-280px, 0)
-        transform translate(-280px, 0)
-        .main-menu
-            display block
-        &.open
-            -webkit-transform translate(0, 0)
-            transform translate(0, 0)
-    .content
-        &.with-sidebar
-            margin-left 0
-    .footer
-        margin-left 0
-        text-align center