Fix janky header image display
This commit is contained in:
parent
9e79cc2d24
commit
ab31c1902e
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue