autonomic-cooperative
/
autonomic.zone
Archived
5
0
Fork 0
Code Issues 15 Pull Requests 2 Releases Activity

Fix janky header image display

This commit is contained in:
Anna Sidwell 2019-11-14 02:23:09 +00:00
parent 9e79cc2d24
commit ab31c1902e
5 changed files with 34 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/_includes/blog.html
View File

@ -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
src/_layouts/page.html
View File

@ -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>

7
src/_layouts/post.html
View File

@ -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>

7
src/_layouts/spotlight.html
View File

@ -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>

38
src/assets/styles/main.scss
View File

@ -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;