Style refactoring and improvements

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

@@ -1,10 +1,9 @@
-html {
-  box-sizing: border-box;
+@mixin zoom() {
+  transform: scale(1.05);
 }
 
-*, *:after, *:before {
-  box-sizing: inherit;
-}
+html { box-sizing: border-box; }
+*, *:after, *:before { box-sizing: inherit; }
 
 body {
   font-family: $fontFamily-body;
@@ -32,7 +31,7 @@ h1, h2, h3, h4, strong {
 }
 
 code, pre {
-  font-family: $fontFamily-code;;
+  font-family: $fontFamily-code;
   font-size: $fontSize-code;
   background-color: $color-codebg;
   -webkit-font-smoothing: initial;
@@ -49,7 +48,7 @@ code {
 
 em { color: $color-light; }
 
-p { word-spacing: 0.05em; }
+// p { word-spacing: 0.05em; }
 
 a.button {
   display: inline-block;
@@ -123,29 +122,34 @@ a.button {
 .page-index .BuildBadge { margin-left: -2px !important; }
 .page-inner .BuildBadge { margin-top: 15px; }
 
-.page-inner #main {
+.MainHeader {
+  background-color: $color-white;
+  // box-shadow: 0 0 4px rgba(0,0,0,.25);
+  padding: 25px 60px;
   position: relative;
-  z-index: 1;
-  padding: 0 60px 30px;
-  overflow-x: hidden;
+  z-index: 2;
+  border-top: 6px solid $color-primary;
 }
 
 .MainMenu {
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  font-size: $fontSize-s;
   list-style-type: none;
   margin: 0;
   padding: 0;
 
   .nav-link { cursor: pointer; }
 
-  .nav-dropdown-container {
-    .nav-link {
-      &:hover { border-bottom: none; }
-    }
-
-    &:hover .nav-dropdown {
-      display: block;
-    }
-  }
+  // .nav-dropdown-container {
+  //   .nav-link {
+  //     &:hover { border-bottom: none; }
+  //   }
+  //
+  //   &:hover .nav-dropdown {
+  //     display: block;
+  //   }
+  // }
 
   // .nav-dropdown {
   //   display: none;

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

@@ -1,16 +1,11 @@
-@mixin zoom() {
-  transform: scale(1.05);
-}
-
-html, body {
-  height: 100%;
-}
+// html, body {
+//   height: 100%;
+// }
 
 .page-index .MainMenu {
-  list-style-type: none;
   text-align: center;
-  padding: 0;
-  margin: 0;
+  // padding: 0;
+  // margin: 0;
 
   li {
     display: inline-block;;
@@ -22,6 +17,14 @@ html, body {
   }
 }
 
+.page-index .MainLogo {
+  display: none;
+}
+
+.page-index .MainMenu-search {
+  display: none;
+}
+
 .nav-link {
   color: $color-light;
   padding-bottom: 3px;
@@ -31,48 +34,62 @@ html, body {
   &:hover, &.current { border-bottom: 3px solid $color-primary; }
 }
 
-.page-index .MainLogo {
-  display: none;
-}
-
-.page-index .MainMenu-search {
-  display: none;
-}
-
 .MainLogo {
   display: block;
   margin: 0 auto;
-  width: 200px;
+  width: 150px;
 }
 
 .IndexHero {
   text-align: center;
   position: relative;
 
-  .warning {
-    color: $color-light;
-  }
+  // .warning {
+  //   color: $color-light;
+  // }
 }
 
-.IndexHero-installBtn {
-  width: 280px;
-  margin: .5em;
-}
+// .IndexHero-installBtn {
+//   width: 280px;
+//   margin: .5em;
+// }
 
 .IndexHero-logo {
-  margin: 1em 0 2em;
+  margin: 0.5em 0 0.5em;
+}
+
+.IndexHero-logoImg {
+  margin-bottom: 1em;
 }
 
 .IndexHero-title {
   font-family: $fontFamily-logo;
-  font-weight: 300;
+  font-weight: 400;
   font-size: 4em;
   margin: 0;
+  margin-bottom: 0.2em;
 }
 
-.IndexHero-desc {
+.IndexHero-subtitle {
+  font-family: $fontFamily-logo;
+  font-size: 1.6em;
+  font-weight: 400;
+  margin: 0;
+}
+
+.IndexHero-descPrimary {
   font-size: $fontSize-l;
-  line-height: 1.5;
+  line-height: 1.4;
+  max-width: 950px;
+  padding: 0 20px;
+  text-align: center;
+  margin: 1em auto;
+  color: $color-light;
+}
+
+.IndexHero-descSecondary {
+  font-size: 16px;
+  line-height: 1.4;
   max-width: 800px;
   padding: 0 20px;
   text-align: center;
@@ -83,27 +100,43 @@ html, body {
 .IndexSocial {
   text-align: center;
   list-style-type: none;
-  margin: 0 auto;
+  margin: auto;
   padding: 0;
-  margin: 1.5em auto;
+  margin-bottom: 2em;
 }
 
 .IndexSocial li {
   display: inline-block;
-  margin: 0 5px;
+  margin: 0 1.2em;
   vertical-align: middle;
 
   &.last { margin-left: -2px; }
 }
 
+.GetStartedBtn {
+  font-size: 1.2em;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  display: inline-block;
+  padding: 12px 40px;
+  border-radius: 25px;
+  transition: all .15s ease;
+  background-color: $color-primary;
+  color: $color-white;
+  margin-bottom: 1em;
+  
+  &:hover {
+    @include zoom;
+  }
+}
+
 .IndexExample {
   text-align: center;
-  padding: 20px;
+  // padding: 20px;
   max-width: 1200px;
   margin: 0 auto 3em;
 
-  h2 { margin-bottom: 1.5em; }
-
   code, pre {
     padding: 0;
     margin: 0;
@@ -123,6 +156,7 @@ html, body {
 
   .sign {
     display: inline-block;
+    vertical-align: middle;
     height: 10em;
     line-height: 9em;
     padding: 0 .5em;
@@ -131,20 +165,24 @@ html, body {
   }
 }
 
+.IndexExample-title {
+  text-align: center;
+  margin-bottom: 1.5em;
+}
+
 .IndexExample-block {
   padding: 7px;
-  // text-align: left;
-  // display: inline-block;
-  height: 300px;
+  text-align: left;
+  height: 250px;
   background-color: $color-codebg;
   border-radius: $size-radius;
-  // box-shadow: 0 1px 2px rgba(0,0,0,.125);
   overflow-x: scroll;
+  // box-shadow: 0 1px 2px rgba(0,0,0,.125);
 
   @media #{$screen-small} {
     width: 43%;
     display: inline-block;
-    vertical-align: top;
+    vertical-align: middle;
   }
 }
 
@@ -208,7 +246,7 @@ html, body {
   }
 }
 
-#design_goals {
+.IndexDesignGoals {
   padding: 4em 0;
   background-color: $color-primary;
   color: #fff;
@@ -253,24 +291,6 @@ html, body {
   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;
-        @include zoom;
-      }
-    }
   }
 
   p { margin: .3em 0; }
@@ -278,9 +298,9 @@ html, body {
 
 .IndexFooter {
   text-align: center;
-  color: #fff;
+  color: $color-white;
   padding: 4em 0;
-  background-color: darken($color-violet, 15%);
+  background-color: darken($color-primary, 15%);
 }
 
 @media screen and (max-width: 480px) {

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

@@ -1,16 +1,8 @@
-.MainHeader {
-  background-color: $color-white;
-  // box-shadow: 0 0 4px rgba(0,0,0,.25);
-  padding: 25px 60px;
+.page-inner #main {
   position: relative;
-  z-index: 2;
-  border-top: 6px solid $color-primary;
-}
-
-.MainMenu li {
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  font-size: $fontSize-m;
+  z-index: 1;
+  padding: 0 60px 30px;
+  overflow-x: hidden;
 }
 
 .page-inner #nav {

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

@@ -1,12 +1,14 @@
 // font faces
 $fontFamily-body : 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-$fontFamily-logo : 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+$fontFamily-logo : 'Poiret One', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
 $fontFamily-code : 'Roboto Mono', Monaco, courier, monospace;
 
 // font sizes
 $fontSize-body : 15px;
-$fontSize-m    : 14px;
-$fontSize-l    : 17px;
+$fontSize-s    : 14px;
+$fontSize-m    : 17px;
+$fontSize-l    : 24px;
+$fontSize-xl   : 28px;
 $fontSize-code : .8em;
 
 // colors
@@ -24,7 +26,9 @@ $color-darkgray   : #34393A;
 $color-violet     : #492e7c;
 $color-orange     : #e96900;
 $color-mint       : #02B1AC;
-$color-primary    : $color-blue;
+$color-yellow     : #ffd12a;
+$color-pink       : #e02177;
+$color-primary    : $color-pink;
 
 // sizes
 $size-radius : 2px;