Styles, mobile, refactoring

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

@@ -5,13 +5,24 @@
 html { box-sizing: border-box; }
 *, *:after, *:before { box-sizing: inherit; }
 
+html, body { height: 100%; }
+
 body {
   font-family: $fontFamily-body;
-  font-size: $fontSize-body;
+  font-size: $fontSize-s;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: $color-medium;
   margin: 0;
+  background-color: $color-primary;
+
+  @media #{$screen-medium} {
+    font-size: $fontSize-body;
+  }
+}
+
+.page {
+  background-color: $color-white;
 }
 
 a {
@@ -89,12 +100,10 @@ a.button {
 
   .gutter { width: 1.5em; }
 
-  .code {
-    pre {
-      padding: 1.2em 1.4em;
-      line-height: 1.5em;
-      margin: 0;
-    }
+  .code pre {
+    padding: 1.2em 1.4em;
+    line-height: 1.5em;
+    margin: 0;
   }
 
   &.html, &.js, &.bash, &.css {
@@ -116,65 +125,59 @@ a.button {
   &.js .code:after { content: 'JS'; }
   &.bash .code:after { content: 'Shell'; }
   &.css .code:after { content: 'CSS'; }
-
 }
 
 .page-index .BuildBadge { margin-left: -2px !important; }
 .page-inner .BuildBadge { margin-top: 15px; }
 
+.MainLogo {
+  display: block;
+  margin: 0 auto;
+  width: 120px;
+
+  @media #{$screen-medium} {
+    width: 150px;
+  }
+}
+
 .MainHeader {
   background-color: $color-white;
-  // box-shadow: 0 0 4px rgba(0,0,0,.25);
   padding: 25px 60px;
   position: relative;
   z-index: 2;
   border-top: 6px solid $color-primary;
 }
 
+
+ .page-inner .MainHeader {
+    display: none;
+  }
+
 .MainMenu {
   text-transform: uppercase;
   letter-spacing: 2px;
-  font-size: $fontSize-s;
   list-style-type: none;
-  margin: 0;
+  margin: 2em 1.8em 0;
   padding: 0;
 
-  .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: $color-light;
-  //     font-size: .9em;
-  //     display: block;
-  //     padding: 0 30px 0 20px;
-  //     &:hover { color: $color-primary; }
-  //   }
-  // }
+  @media #{$screen-medium} {
+    margin: 0;
+    font-size: $fontSize-s;
+  }
+}
+
+.nav-link {
+  color: $color-light;
+  padding-bottom: 3px;
+  font-size: .85em;
+  margin: 0 .5em;
+  cursor: pointer;
+
+  &:first-child { margin-left: 0; }
+  &:hover, &.current { border-bottom: 3px solid $color-primary; }
+
+  @media #{$screen-medium} {
+    margin: 0 1.5em;
+    font-size: 1em;
+  }
 }

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

@@ -1,18 +1,13 @@
-// html, body {
-//   height: 100%;
-// }
-
 .page-index .MainMenu {
   text-align: center;
-  // padding: 0;
-  // margin: 0;
 
   li {
     display: inline-block;;
     position: relative;
     line-height: 40px;
+
     &:last-child .nav-link {
-       margin-right: 0;
+      margin-right: 0;
     }
   }
 }
@@ -25,35 +20,11 @@
   display: none;
 }
 
-.nav-link {
-  color: $color-light;
-  padding-bottom: 3px;
-  margin: 0 1.5em;
-
-  &:first-child { margin-left: 0; }
-  &:hover, &.current { border-bottom: 3px solid $color-primary; }
-}
-
-.MainLogo {
-  display: block;
-  margin: 0 auto;
-  width: 150px;
-}
-
 .IndexHero {
   text-align: center;
   position: relative;
-
-  // .warning {
-  //   color: $color-light;
-  // }
 }
 
-// .IndexHero-installBtn {
-//   width: 280px;
-//   margin: .5em;
-// }
-
 .IndexHero-logo {
   margin: 0.5em 0 0.5em;
 }
@@ -102,12 +73,11 @@
   list-style-type: none;
   margin: 3em auto;
   padding: 0;
-  // margin-bottom: 3.5em;
 }
 
 .IndexSocial li {
   display: inline-block;
-  margin: 0 1em;
+  margin: 0 0.7em;
   vertical-align: middle;
 
   &.last { margin-left: -2px; }
@@ -126,14 +96,11 @@
   color: $color-white;
   margin-bottom: 1.5em;
 
-  &:hover {
-    @include zoom;
-  }
+  &:hover { @include zoom; }
 }
 
 .IndexExample {
   text-align: center;
-  // padding: 20px;
   max-width: 1200px;
   margin: 0 auto 3em;
 
@@ -177,79 +144,19 @@
   background-color: $color-codebg;
   border-radius: $size-radius;
   overflow-x: scroll;
-  // box-shadow: 0 1px 2px rgba(0,0,0,.125);
 
-  @media #{$screen-small} {
+  @media #{$screen-medium} {
     width: 43%;
     display: inline-block;
     vertical-align: middle;
   }
 }
 
-#features {
-  padding: 3em 0;
-  text-align: center;
-  background-color: #f9f9f9;
-
-  .cool {
-    font-size: 1.8em;
-    text-align: center;
-    margin-top: 1em;
-    color: $color-light;
-  }
-
-  .feats {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .feat {
-    display: inline-block;
-    text-align: left;
-    vertical-align: top;
-    width: 280px;
-    margin: 40px;
-  }
-
-  h2 {
-    color: $color-medium;
-    line-height: 40px;
-    margin-bottom: 0;
-  }
-
-  p {
-    color: $color-light;
-    padding-left: 52px;
-    margin: .4em 0;
-  }
-
-  a {
-    color: $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; }
-  }
-}
-
 .IndexDesignGoals {
   padding: 4em 0;
   background-color: $color-primary;
-  color: #fff;
+  color: $color-white;
+  overflow: hidden;
 
   h2 {
     margin-top: 0;
@@ -280,55 +187,35 @@
   }
 }
 
-#footer {
-
-  .avatar {
-    width: 100px;
-    border-radius: 100%;
-    margin: 2.5em 0 1em;
-  }
-
-  a {
-    color: #fff;
-    text-decoration: underline;
-  }
-
-  p { margin: .3em 0; }
-}
-
 .IndexFooter {
   text-align: center;
   color: $color-white;
   padding: 4em 0;
   background-color: darken($color-primary, 15%);
-}
 
-@media screen and (max-width: 480px) {
-  body {
-    font-size: 14px;
+  a {
+    color: $color-white;
+    text-decoration: underline;
   }
 
-  #nav {
-    margin: 2em 1.8em 0;
-  }
+  p { margin: .3em 0; }
+}
 
-  #translations {
-    margin-bottom: 2em;
-  }
+@media screen and (max-width: 480px) {
 
-  #logo {
-    width: 120px;
-  }
+  // #nav {
+  //   margin: 2em 1.8em 0;
+  // }
 
-  .nav-link {
-    font-size: .85em;
-    margin: 0 .5em;
-  }
+  // .nav-link {
+  //   font-size: .85em;
+  //   margin: 0 .5em;
+  // }
 
-  .divider {
-    font-size: 1.2em;
-    margin: 2.5em 1em;
-  }
+  // .divider {
+  //   font-size: 1.2em;
+  //   margin: 2.5em 1em;
+  // }
 
   #hero {
     .inner h1 {
@@ -357,7 +244,7 @@
       br { display: none; }
     }
 
-    .down { display: none; }
+    // .down { display: none; }
   }
 
   #social {

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

@@ -1,7 +1,7 @@
 .page-inner #main {
   position: relative;
   z-index: 1;
-  padding: 0 60px 30px;
+  // padding: 0 60px 30px;
   overflow-x: hidden;
 }
 
@@ -35,7 +35,7 @@
   border-radius: 15px;
   margin-right: 10px;
   transition: border-color .2s ease;
-  background: #fff url(/images/search.png) 8px 5px no-repeat;
+  background: svg('search.svg', '[fill]: #{$color-gray}') 8px 5px no-repeat;
   background-size: 20px;
   &:focus { border-color: $color-primary; }
 }
@@ -56,25 +56,34 @@
   }
 }
 
+.page-index .MobileBar {
+  display: none;
+}
 
-#mobile-bar {
+.MobileBar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 40px;
-  background-color: #fff;
+  background-color: $color-white;
   z-index: 9;
-  display: none;
   box-shadow: 0 0 4px rgba(0,0,0,.25);
 
+  @media #{$screen-medium} {
+    display: none;
+  }
+
   .menu-button {
+    background: none;
+    border: 0;
+
     position: absolute;
     width: 24px;
     height: 24px;
     top: 8px;
     left: 12px;
-    background: url(../images/menu.png) center center no-repeat;
+    background: svg('burger.svg', '[fill]: #{$color-gray}') center center no-repeat;
     background-size: 24px;
   }
 
@@ -82,7 +91,7 @@
     position: absolute;
     width: 30px;
     height: 30px;
-    background: url(../images/cute-puppy-2.png) center center no-repeat;
+    // background: url(../images/cute-puppy-2.png) center center no-repeat;
     top: 5px;
     left: 50%;
     margin-left: -15px;
@@ -190,8 +199,6 @@
     vertical-align: middle;
   }
 
-  img { max-width: 100%; }
-
   span.light {
     color: $color-light;
   }
@@ -308,34 +315,37 @@
   }
 }
 
-@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: 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;
-  }
+  // body {
+  //   -webkit-text-size-adjust: none;
+  //   font-size: 14px;
+  // }
 
-  #header {
-    display: none;
-  }
+  // #header {
+  //   display: none;
+  // }
 
-  #logo {
-    display: none;
-  }
+  // #logo {
+  //   display: none;
+  // }
+
+  // #mobile-bar {
+  //   display: block;
+  // }
 
   .nav-link {
     padding-bottom: 1px;
@@ -349,10 +359,6 @@
     margin-bottom: 10px;
   }
 
-  #mobile-bar {
-    display: block;
-  }
-
   #main {
     padding: 2em 1.4em 0;
   }

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

@@ -22,6 +22,7 @@ $color-green      : #42b983;
 $color-border     : #dddddd;
 $color-codebg     : #f8f8f8;
 $color-red        : #ff6666;
+$color-gray       : #7f8c8d;
 $color-darkgray   : #34393A;
 $color-violet     : #492e7c;
 $color-orange     : #e96900;
@@ -37,5 +38,5 @@ $size-headerHeight: 40px;
 // Media queries
 
 // small screen
-$screen-small: 'only screen and (min-width: 480px)';
-$screen-medium: 'only screen and (min-width: 860px)';
+$screen-medium: 'only screen and (min-width: 769px)';
+// $screen-medium: 'only screen and (min-width: 860px)';