From ab31c1902e2967ce79a64eb13aa2e2453585b4d4 Mon Sep 17 00:00:00 2001
From: Anna Sidwell <anna@takkaria.org>
Date: Thu, 14 Nov 2019 02:23:09 +0000
Subject: [PATCH] Fix janky header image display

---
 src/_includes/blog.html     |  6 +++++-
 src/_layouts/page.html      |  7 +++----
 src/_layouts/post.html      |  7 +++----
 src/_layouts/spotlight.html |  7 +++----
 src/assets/styles/main.scss | 38 +++++++++++++++++++------------------
 5 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/_includes/blog.html b/src/_includes/blog.html
index b784bcd..cce1a3c 100644
--- a/src/_includes/blog.html
+++ b/src/_includes/blog.html
@@ -3,7 +3,11 @@
 
   {% for post in posts %}
     <section class="spotlight">
-      <div class="image">{% if post.image %}<img src="{% if site.featured-image-source %}{{ post.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ post.image }}{% endif %}" alt="" />{% endif %}</div>
+      <div class="image">
+        {% if post.image %}
+        <img src="{% if site.featured-image-source %}{{ post.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ post.image }}{% endif %}" alt="" loading="lazy">
+      {% endif %}
+    </div>
       <div class="content">
         <h2><a href="{{ post.url | relative_url }}" class="link">{{ post.title }}</a></h2>
         <p class="h5">{{ post.date | date: '%B %d, %Y' }}</p>
diff --git a/src/_layouts/page.html b/src/_layouts/page.html
index 28a9f50..896118c 100644
--- a/src/_layouts/page.html
+++ b/src/_layouts/page.html
@@ -7,12 +7,11 @@
 
     <!-- Main -->
     <article id="main">
-        <header>
+        <header
             {% if page.image %}
-            <div
-                class="header-image"
-                style="background-image: url('{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}');"></div>
+            style="background-image: url('{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}');"
             {% endif %}
+        >
             <h2>{{ page.title }}</h2>
             <p>{{ page.description }}</p>
         </header>
diff --git a/src/_layouts/post.html b/src/_layouts/post.html
index bd37f3d..51e4b80 100644
--- a/src/_layouts/post.html
+++ b/src/_layouts/post.html
@@ -14,12 +14,11 @@
 
     <!-- Main -->
     <article id="main">
-        <header>
+        <header
             {% if page.image %}
-            <div
-                class="header-image"
-                style="background-image: url('{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}');"></div>
+            style="background-image: url('{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}');"
             {% endif %}
+        >
             <h2>{{ page.title }}</h2>
             <p>{{ page.description }}</p>
             <p><em>{{ page.date | date: '%B %d, %Y' }}</em></p>
diff --git a/src/_layouts/spotlight.html b/src/_layouts/spotlight.html
index 6bd8314..bc5c352 100644
--- a/src/_layouts/spotlight.html
+++ b/src/_layouts/spotlight.html
@@ -6,12 +6,11 @@
     {% include header.html %}
 
     <div id="main">
-        <header>
+        <header
             {% if page.image %}
-            <div
-                class="header-image"
-                style="background-image: url('{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}');"></div>
+            style="background-image: url('{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}');"
             {% endif %}
+        >
             <h2>{{ page.title }}</h2>
             <p>{{ page.description }}</p>
         </header>
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index 338bffa..c3494cd 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -48,34 +48,36 @@
 /* Main */
 
 #main {
+
+  > header:before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+
+    display: block;
+    background-image: inherit;
+    background-size: cover;
+    background-position: center;
+    width: 100%;
+    height: 100%;
+
+    filter: blur(3px) brightness(40%);
+  }
+
   > header {
     @include padding(12em, 0);
     position: relative;
-    background-attachment: fixed;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
     text-align: center;
+    z-index: -2;
 
     > * {
       position: relative;
       z-index: 1;
     }
 
-    .header-image {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-attachment: fixed;
-      background-position: center center;
-      background-repeat: no-repeat;
-      background-size: cover;
-      z-index: 0;
-      filter: blur(3px) brightness(40%);
-    }
-
     h2 {
       font-size: 1.75em;
       margin: 0 0 (_size(element-margin) * 0.25) 0;