From 3edb414d2343322b5f185995120616e8a8898684 Mon Sep 17 00:00:00 2001
From: Maarten Billemont <lhunath@lyndir.com>
Date: Thu, 19 Apr 2018 23:17:08 -0400
Subject: [PATCH] Fix paroller issues.

---
 public/site/2015-05/_includes/header.html |  3 +-
 public/site/2015-05/_sass/_layout.scss    | 38 ++++++++++++++---------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/public/site/2015-05/_includes/header.html b/public/site/2015-05/_includes/header.html
index 86cce91a..65571405 100644
--- a/public/site/2015-05/_includes/header.html
+++ b/public/site/2015-05/_includes/header.html
@@ -1,4 +1,4 @@
-<header class="{{ page.header }}" data-paroller-factor="0.2">
+<header class="{{ page.header }}">
     <nav>
         <a href="/">Master Password</a>
         <div class="flex-auto">
@@ -12,6 +12,7 @@
         <a href="http://help.masterpasswordapp.com">Support</a>
     </nav>
 
+    <div class="hero" data-paroller-factor="-0.2" data-paroller-type="foreground"></div>
         <!--
     <div class="hero" data-paroller-factor="0.2" data-paroller-type="foreground">
         <img class="main" src="/img/hero_main.jpg" />
diff --git a/public/site/2015-05/_sass/_layout.scss b/public/site/2015-05/_sass/_layout.scss
index 4b8af5c8..3fc7a6e0 100644
--- a/public/site/2015-05/_sass/_layout.scss
+++ b/public/site/2015-05/_sass/_layout.scss
@@ -155,26 +155,34 @@ header {
 //    }
 
 
-        background-color:   black;
-        background-size:    cover !important;
-        background:         url('../img/hero_main.jpg') center top;
-    &[data-hero=ios] {
-        background:         url('../img/hero_ios.jpg') center center;
+    .hero {
+        position: absolute;
+        z-index: -2;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: -70px; /* This is to deal with some kind of weird paroller bug that gives us blank space at the bottom otherwise. */
+
+        background:         black url('../img/hero_main.jpg') center center no-repeat;
+        background-size:    cover;
     }
-    &[data-hero=android] {
-        background:         url('../img/hero_android.jpg') center center;
+    &[data-hero=ios] .hero {
+        background-image:         url('../img/hero_ios.jpg');
     }
-    &[data-hero=mac] {
-        background:         url('../img/hero_mac.jpg') center top;
+    &[data-hero=android] .hero {
+        background-image:         url('../img/hero_android.jpg');
     }
-    &[data-hero=desktop] {
-        background:         url('../img/hero_desktop.jpg') center bottom;
+    &[data-hero=mac] .hero {
+        background-image:         url('../img/hero_mac.jpg');
     }
-    &[data-hero=cli] {
-        background:         url('../img/hero_cli.jpg') center bottom;
+    &[data-hero=desktop] .hero {
+        background-image:         url('../img/hero_desktop.jpg');
     }
-    &[data-hero=web] {
-        background:         url('../img/hero_web.jpg') center center;
+    &[data-hero=cli] .hero {
+        background-image:         url('../img/hero_cli.jpg');
+    }
+    &[data-hero=web] .hero {
+        background-image:         url('../img/hero_web.jpg');
     }
     h1 {
         height:             1em;