Update UI & Responsive

public/main.css

@@ -8,10 +8,12 @@ html {
     Arial,
     sans-serif;
   font-weight: 200;
-  background-size: 100%;
+  background-size: 110%;
   background-repeat: no-repeat;
   background-position: center top;
   height: 100%;
+  max-width: 1440px;
+  margin: auto;
 }
 
 body {
@@ -37,6 +39,11 @@ body {
   align-items: center;
 }
 
+.send-logo > a {
+  display: flex;
+  flex-direction: row;
+}
+
 .site-title {
   color: #3e3d40;
   font-size: 32px;
@@ -44,6 +51,8 @@ body {
   margin: 0;
   position: relative;
   top: -1px;
+  letter-spacing: 1px;
+  margin-left: 8px;
 }
 
 .site-subtitle {
@@ -78,12 +87,20 @@ body {
   font-size: 12px;
   line-height: 12px;
   opacity: 0.9;
-  padding: 6px 6px 5px 20px;
+  padding: 5px 5px 5px 5px;
+  overflow: hidden;
+  width: 12px;
+  text-indent: 20px;
+  transition: all 150ms ease-in-out;
 }
 
 .feedback:hover,
 .feedback:focus {
+  width: 57px;
+  text-indent: 0px;
+  padding: 5px 5px 5px 20px;
   background-color: #0287e8;
+  transition: all 150ms ease-in-out;
 }
 
 .feedback:active {
@@ -112,6 +129,11 @@ a {
 }
 
 /**   page-one    **/
+
+#page-one {
+  padding: 0 20px;
+}
+
 .title {
   font-size: 33px;
   line-height: 40px;
@@ -163,6 +185,10 @@ a {
   text-decoration: none;
 }
 
+.link:hover {
+  color: #0287e8;
+}
+
 #upload-text {
   font-size: 22px;
   color: #737373;
@@ -391,8 +417,9 @@ tbody {
   font-family: 'SF Pro Display', sans-serif;
   letter-spacing: 0;
   line-height: 23px;
-  padding-left: 5px;
+  font-weight: 300;
-  padding-right: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 #link:disabled {
@@ -414,6 +441,10 @@ tbody {
   white-space: nowrap;
 }
 
+#copy-btn:hover {
+  background-color: #0287e8;
+}
+
 #copy-btn:disabled {
   background: #05a700;
   border: 1px solid #05a700;
@@ -433,6 +464,10 @@ tbody {
   color: #313131;
 }
 
+#delete-file:hover {
+  background: #efeff1;
+}
+
 .send-new {
   font-size: 15px;
   margin: auto;
@@ -442,6 +477,12 @@ tbody {
   text-decoration: underline;
 }
 
+.send-new:hover,
+.send-new:focus,
+.send-new:active {
+  color: #0287e8;
+}
+
 /*    upload-error    */
 #upload-error {
   display: flex;
@@ -580,7 +621,11 @@ tbody {
   font-size: 15px;
   display: flex;
   align-items: flex-end;
-  padding: 50px 10px 10px;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 50px 31px 41px 31px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .mozilla-logo {
@@ -589,23 +634,41 @@ tbody {
   margin-bottom: -5px;
 }
 
-.legal-links > a {
+.legal-links {
-  margin-right: 30px;
+  max-width: 600px;
-  color: #858585;
+  width: 80vw;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
+.legal-links > a {
+  color: #858585;
+  opacity: 0.9;
+}
+
+.legal-links > a:hover {
+  opacity: 1;
+}
+
+
 .legal-links > a:visited {
   color: #858585;
 }
 
 .social-links {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
-  flex: 1;
+  width: 94px;
 }
 
 .social-links > a{
-  margin-left: 30px;
+  opacity: .9;
+}
+
+.social-links > a:hover {
+  opacity: 1;
 }
 
 .github,
@@ -615,7 +678,7 @@ tbody {
   margin-bottom: -5px;
 }
 
-@media (max-device-width: 768px) {
+@media (max-width: 768px) {
   .description {
     margin: 0 auto 25px;
   }
@@ -628,17 +691,33 @@ tbody {
     font-size: 18px;
   }
 
+  .footer {
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+
   .mozilla-logo {
     margin-left: -7px;
   }
 
+  .legal-links {
+    flex-direction: column;
+    margin: auto;
+  }
+
   .legal-links > * {
     display: block;
     padding: 10px 0;
   }
+
+  .social-links {
+    margin: auto;
+    margin-top: 20px;
+  }
 }
 
-@media (max-device-width: 520px) {
+@media (max-width: 520px) {
   .header {
     flex-direction: column;
     justify-content: flex-start;

views/layouts/main.handlebars

@@ -10,13 +10,15 @@
   <meta name="defaultLanguage" content="en-US">
   <meta name="availableLanguages" content="en-US">
   <link rel="localization" href="/locales/send.{locale}.ftl">
+  <link rel="icon" type="image/png" href="/resources/favicon-32x32.png" sizes="32x32" />
   <script defer src="/l20n.min.js"></script>
 </head>
 <body>
   <header class="header"> 
     <div class="send-logo">
-      <img src="/resources/send_logo.svg" alt="Send"/>
+      <a href="./">
-      <h1 class="site-title">Send</h1>
+        <img src="/resources/send_logo.svg" alt="Send"/><h1 class="site-title">Send</h1>
+      </a>
       <div class="site-subtitle">
         <a href="https://testpilot.firefox.com" target="_blank">Firefox Test Pilot</a>
         <div data-l10n-id="siteSubtitle">web experiment</div>