Improve responsive layout of landing page header and quickconvert sections

Author: ad-si

public/styles/landingpage/quickconvert.styl

@@ -3,15 +3,15 @@
   background #404040
   padding-bottom 15px
 
+  .convert-arrow
+    padding-top 130px
+
   .quickConvertCanvas
     width 388px
-    max-width 388px
+    max-width 100%
     height 300px
     max-heigth 300px
 
-  .convert-arrow
-    padding-top 200px
-
   #renderArea1
     background-image url('../img/preview_renderArea1.png')
 

public/styles/landingpage/teaser.styl

@@ -2,13 +2,30 @@ header
   h1
     font-weight bold
 
+  h2
+    font-size 1.8em
+
+  .container
+    max-width 900px
+
+  .row
+    display flex
+    flex-wrap nowrap
+    align-items center
+    @media (max-width: 767px)
+      flex-wrap wrap
+
   .pitch
     margin-top 4em
+    flex 1 1 auto
 
   #makey
     background url('../img/makey-assembled.png')
+    background-size contain
+    background-repeat no-repeat
     width 355px
     height 453px
+    flex 0 0 auto
     &:hover
       background url('../img/makey-disassembled.png')
 

views/landingpage/quickconvert.jade

@@ -1,14 +1,14 @@
 section.quickConvert
   .container
     .row
-      .col-lg-5.text-center
+      .col-lg-5.col-md-6.col-sm-6.col-xs-12.text-center
         h3
           center Original Model
         canvas#renderArea1.quickConvertCanvas(touch-action="none")
-      .col-lg-2.text-center.convert-arrow
+      .col-lg-2.hidden-md.hidden-sm.hidden-xs.text-center.convert-arrow
         svg(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' width='120' height='64' fill='white')
           path(d='M28 4l-1.41 1.41L32.17 11H4v2h28.17l-5.58 5.59L28 20l8-8z')
-      .col-lg-5.text-center
+      .col-lg-5.col-md-6.col-sm-6.col-xs-12.text-center
         h3
           center With LEGO Bricks
         canvas#renderArea2.quickConvertCanvas(touch-action="none")

views/landingpage/teaser.jade

@@ -1,17 +1,18 @@
 header
   .container
-    .col-lg-8.pitch
-      h1 Brickify
-      h2 3D-Printing + LEGO = Faster Prototyping
+    .row
+      .col-sm-8.pitch
+        h1 Brickify
+        h2 3D-Printing + LEGO = Faster Prototyping
 
-      .drop
-        label#loadButton.btn.btn-primary.dropper(for='fileInput')
-          img#spinner(src='./img/spinner.gif')
+        .drop
+          label#loadButton.btn.btn-primary.dropper(for='fileInput')
+            img#spinner(src='./img/spinner.gif')
 
-        input#fileInput(
-          type='file'
-          accept='.stl'
-          style='display: none'
-        )
+          input#fileInput(
+            type='file'
+            accept='.stl'
+            style='display: none'
+          )
 
-    #makey.col-lg-4
+      #makey.col-sm-4