Website improvements (#2803)

* Hide TransloaditBar details block on mobile; set spacing on desktop

* Less characters

* Less characters

* Improve integrations/customers logo appearance on mobile

* Improve CSS

* Add a breakpoint for large screen; use smaller horizontal layout padding for medium screens

* Revert

* Less characters

website/themes/uppy/layout/layout.ejs

@@ -47,7 +47,7 @@ if (page.series) {
           <span>Uppy is an open source project by <a class="TransloaditBar-link" href="https://transloadit.com/" target="_blank">Transloadit</a></span>
         </div>
         <div class="TransloaditBar-info">
-          <b>New: </b><a href="https://www.transloadit.com/pricing" class="TransloaditBar-info-link">Transloadit Community Plan</a> — get free hosted Companion &amp; tusd, unlimited uploading, and 5GB/month encoding traffic!
+          <a href="https://www.transloadit.com/pricing" class="TransloaditBar-info-link">Transloadit Community Plan</a>: free hosted Companion &amp; tusd, unlimited uploading, and 5GB/mo encoding traffic!
         </div>
       </div>
 

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

@@ -173,7 +173,12 @@ hr {
   padding: 2em 1.4em 0;
 
   @media #{$screen-medium} {
-    padding: 0 60px 30px;
+    padding: 0 20px 30px;
+  }
+
+  @media #{$screen-large} {
+    padding-right: 60px;
+    padding-left: 60px;
   }
 }
 
@@ -267,11 +272,15 @@ hr {
   @media #{$screen-medium} {
     display: flex;
     height: $size-transloaditBarHeight;
-    padding: 0 60px;
+    padding: 0 20px;
     justify-content: space-between;
     align-items: center;
   }
 
+  @media #{$screen-large} {
+    padding: 0 60px;
+  }
+
   &-link {
     color: #fff;
     font-weight: 700;
@@ -298,10 +307,13 @@ hr {
   &-info {
     margin-top: 10px;
     text-align: center;
+    display: none;
 
     @media #{$screen-medium} {
+      display: block;
       text-align: right;
       margin-top: 0;
+      margin-left: 20px;
     }
   }
 
@@ -337,7 +349,7 @@ hr {
     height: $size-headerHeight;
     display: flex;
     align-items: baseline;
-    padding: 14px 60px 19px;
+    padding: 14px 20px 19px;
     z-index: 2;
     text-align: left;
 
@@ -346,6 +358,11 @@ hr {
     // }
   }
 
+  @media #{$screen-large} {
+    padding-right: 60px;
+    padding-left: 60px;
+  }
+
   .page-index & {
     position: relative;
   }

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

@@ -84,24 +84,33 @@
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 0.2em;
-    margin-bottom: 20px;
     font-size: inherit;
     color: inherit;
   }
 
   &-logos {
-    margin: 12px 0 0;
+    margin: 20px 0 0;
     font-size: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
   }
 
   &-item {
     font-size: 14px;
-    display: inline-block;
-    margin: 0 20px 5px;
-    vertical-align: middle;
+    display: block;
+    margin: 0 16px 10px;
+    min-height: 42px;
+
+    @media screen and (min-width: 375px) {
+      margin-right: 20px;
+      margin-left: 20px;
+    }
 
     @media #{$screen-medium} {
-      margin: 0 30px 10px;
+      margin-right: 30px;
+      margin-left: 30px;
     }
   }
 

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

@@ -34,7 +34,7 @@
     right: auto;
     width: 280px;
     padding-top: 30px;
-    padding-left: 60px;
+    padding-left: 20px;
     margin-right: 20px;
     overflow-x: hidden;
     overflow-y: auto;
@@ -54,6 +54,10 @@
     h2 { margin-top: .2em; }
   }
 
+  @media #{$screen-large} {
+    padding-left: 60px;
+  }
+
   ul {
     list-style-type: none;
     margin: 0;