Image optimization

public/less/style.less

@@ -360,11 +360,14 @@ footer {
 .home {
   .banner {
     .mp-banner;
-    background-image: url('../img/makerparty_landing_image2.jpg');
+    background-image: url('../img/makerparty_landing_banner-mobile.jpg');
+    @media (min-width: @screen-sm-min) {
+      background-image: url('../img/makerparty_landing_banner.jpg');
+    }
   }
 }
 
-.home-banner-video {
+#home-banner-video {
   padding-bottom: 66.66%;
   height: 0;
   position: relative;
@@ -374,6 +377,7 @@ footer {
     position: absolute;
     width: 100%;
     height: 100%;
+    border: none;
   }
 }
 
@@ -555,7 +559,10 @@ footer {
 .partners {
   .banner {
     .mp-banner;
-    background-image: url('../img/makerparty_partners_alternative.jpg');
+    background-image: url('../img/makerparty_partners_banner-mobile.jpg');
+    @media (min-width: @screen-sm-min) {
+      background-image: url('../img/makerparty_partners_banner.jpg');
+    }
   }
 }
 
@@ -600,7 +607,10 @@ footer {
 .history {
   .banner {
     .mp-banner;
-    background-image: url('../img/makerparty_history_headeryellow2.jpg');
+    background-image: url('../img/makerparty_history_banner-mobile.jpg');
+    @media (min-width: @screen-sm-min) {
+      background-image: url('../img/makerparty_history_banner.jpg');
+    }
   }
 }
 
@@ -773,7 +783,10 @@ footer {
 .resources {
   .banner {
     .mp-banner;
-    background-image: url('../img/makerparty_partners_header_badgeyellow2.jpg');
+    background-image: url('../img/makerparty_resources_banner-mobile.jpg');
+    @media (min-width: @screen-sm-min) {
+      background-image: url('../img/makerparty_resources_banner.jpg');
+    }
   }
   .docs-section {
   }

views/home.html

@@ -17,8 +17,8 @@
     <div class="container">
       <div class="row">
         <div class="col-md-6">
-          <div class="home-banner-video">
-            <iframe src="https://vialogues.com/videos/embedded/11183/" width="450" height="300" frameBorder="0" scrolling="No"></iframe>
+          <div id="home-banner-video">
+            <iframe src="https://vialogues.com/videos/embedded/11183/" width="450" height="300" scrolling="No"></iframe>
           </div>
         </div>
         <div class="col-md-6">
@@ -106,10 +106,10 @@
           <div class="collage">
             <div class="collage-row">
               <a class="collage-pics" href="img/collage/full-1.jpg"><img src="img/collage/1.jpg" alt="{{ gettext('Maker Party Collage Photo 1') }}" /></a>
-              <a class="collage-pics" href="img/collage/full-5.jpg"><img src="img/collage/5.jpg" alt="{{ gettext('Maker Party Collage Photo 5') }}" /></a>
               <a class="collage-pics" href="img/collage/full-2.jpg"><img src="img/collage/2.jpg" alt="{{ gettext('Maker Party Collage Photo 2') }}" /></a>
               <a class="collage-pics" href="img/collage/full-3.jpg"><img src="img/collage/3.jpg" alt="{{ gettext('Maker Party Collage Photo 3') }}" /></a>
               <a class="collage-pics" href="img/collage/full-4.jpg"><img src="img/collage/4.jpg" alt="{{ gettext('Maker Party Collage Photo 4') }}" /></a>
+              <a class="collage-pics" href="img/collage/full-5.jpg"><img src="img/collage/5.jpg" alt="{{ gettext('Maker Party Collage Photo 5') }}" /></a>
             </div>
             <div class="collage-row">
               <a class="collage-pics" href="img/collage/full-6.jpg"><img src="img/collage/6.jpg" alt="{{ gettext('Maker Party Collage Photo 6') }}" /></a>