index.html: replace font, make responsive (#1547)

* Replace Proxima Nova with Lato

* Make main page responsive (mobile-friendly)

* Make comparison image responsive

website/static/static/index.css

@@ -1,11 +1,16 @@
 body {
-    font: 16px/1.4 "proxima-nova", "Helvetica Neue", Arial, Helvetica, sans-serif;
+    font: 16px/1.4 "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
+    margin: 0;
+}
+
+b {
+  font-weight: bolder;
 }
 
 .container {
     margin: 0 auto;
-    margin: 0 auto;
-    width: 800px;
+    width: 100%;
+    max-width: 800px;
 }
 
 .header, .footer {
@@ -22,14 +27,14 @@ body {
 .cta a {
     border-radius: 3px;
     display: inline-block;
-    font-weight: 600;
+    font-weight: 700;
     margin: 0 10px;
     padding: 8px 24px;
     text-decoration: none;
 }
 
 .header {
-    padding: 40px 0 0;
+    padding: 40px 15px 0;
 }
 
 .logo {
@@ -46,7 +51,7 @@ body {
 }
 
 .tagline em {
-    font-weight: 600;
+    font-weight: 700;
 }
 
 .header .cta a {
@@ -64,18 +69,19 @@ body {
     margin: 50px 0 0;
 }
 
-.demo,
-.demo-left,
-.demo-right {
-    height: 260px;
+.demo {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
 }
 
 .demo-left,
 .demo-right {
     box-sizing: border-box;
-    float: left;
     padding: 20px 30px;
-    width: 50%;
+    height: 260px;
+    width: 100%;
 }
 
 .demo-instructions {
@@ -95,6 +101,8 @@ body {
     color: #fff;
     font: 14px Menlo, monospace;
     height: 160px;
+    margin: 0;
+    overflow: auto;
     padding: 10px;
     resize: none;
     width: 100%;
@@ -116,21 +124,22 @@ body {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     min-height: 400px;
     position: relative;
-    padding: 30px 0;
+    padding: 30px 15px;
 }
 
 .subtagline {
     color: #329894;
     font-size: 24px;
-    font-weight: 600;
+    font-weight: 700;
     padding: 20px 0;
     text-align: center;
 }
 
 .features {
     font-size: 20px;
+    font-weight: 300;
     margin: 0 auto;
-    width: 540px;
+    max-width: 540px;
 }
 
 .features > li {
@@ -167,7 +176,7 @@ body {
     background-position: 50% 50%;
     background-size: cover;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    height: 340px;
+    padding-top: 42%;
     width: 100%;
 }
 
@@ -185,7 +194,7 @@ body {
 }
 
 .footer {
-    padding: 30px 0;
+    padding: 30px 15px;
     font-size: 21px;
 }
 
@@ -210,3 +219,20 @@ body {
 .errorMessage {
     color: red;
 }
+
+@media only screen and (min-width: 736px) {
+    .demo-left,
+    .demo-right {
+        -ms-flex-preferred-size: 0;
+        flex-basis: 0;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+    }
+}
+
+@media only screen and (max-width: 735px) {
+    .cta a {
+        display: block;
+        margin-bottom: 10px;
+    }
+}