Fix janky header image display
This commit is contained in:
parent
9e79cc2d24
commit
ab31c1902e
|
@ -3,7 +3,11 @@
|
||||||
|
|
||||||
{% for post in posts %}
|
{% for post in posts %}
|
||||||
<section class="spotlight">
|
<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">
|
<div class="content">
|
||||||
<h2><a href="{{ post.url | relative_url }}" class="link">{{ post.title }}</a></h2>
|
<h2><a href="{{ post.url | relative_url }}" class="link">{{ post.title }}</a></h2>
|
||||||
<p class="h5">{{ post.date | date: '%B %d, %Y' }}</p>
|
<p class="h5">{{ post.date | date: '%B %d, %Y' }}</p>
|
||||||
|
|
|
@ -7,12 +7,11 @@
|
||||||
|
|
||||||
<!-- Main -->
|
<!-- Main -->
|
||||||
<article id="main">
|
<article id="main">
|
||||||
<header>
|
<header
|
||||||
{% if page.image %}
|
{% if page.image %}
|
||||||
<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 %}');"
|
||||||
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>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
>
|
||||||
<h2>{{ page.title }}</h2>
|
<h2>{{ page.title }}</h2>
|
||||||
<p>{{ page.description }}</p>
|
<p>{{ page.description }}</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -14,12 +14,11 @@
|
||||||
|
|
||||||
<!-- Main -->
|
<!-- Main -->
|
||||||
<article id="main">
|
<article id="main">
|
||||||
<header>
|
<header
|
||||||
{% if page.image %}
|
{% if page.image %}
|
||||||
<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 %}');"
|
||||||
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>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
>
|
||||||
<h2>{{ page.title }}</h2>
|
<h2>{{ page.title }}</h2>
|
||||||
<p>{{ page.description }}</p>
|
<p>{{ page.description }}</p>
|
||||||
<p><em>{{ page.date | date: '%B %d, %Y' }}</em></p>
|
<p><em>{{ page.date | date: '%B %d, %Y' }}</em></p>
|
||||||
|
|
|
@ -6,12 +6,11 @@
|
||||||
{% include header.html %}
|
{% include header.html %}
|
||||||
|
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<header>
|
<header
|
||||||
{% if page.image %}
|
{% if page.image %}
|
||||||
<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 %}');"
|
||||||
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>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
>
|
||||||
<h2>{{ page.title }}</h2>
|
<h2>{{ page.title }}</h2>
|
||||||
<p>{{ page.description }}</p>
|
<p>{{ page.description }}</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -48,34 +48,36 @@
|
||||||
/* Main */
|
/* Main */
|
||||||
|
|
||||||
#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 {
|
> header {
|
||||||
@include padding(12em, 0);
|
@include padding(12em, 0);
|
||||||
position: relative;
|
position: relative;
|
||||||
background-attachment: fixed;
|
|
||||||
background-position: center center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
z-index: -2;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
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 {
|
h2 {
|
||||||
font-size: 1.75em;
|
font-size: 1.75em;
|
||||||
margin: 0 0 (_size(element-margin) * 0.25) 0;
|
margin: 0 0 (_size(element-margin) * 0.25) 0;
|
||||||
|
|
Reference in New Issue