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

darken and blur header image

Browse Source
This commit is contained in:
czmj 2017-09-29 12:05:12 +01:00
parent 1e1bebee1b
commit b28da92339
4 changed files with 38 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/_layouts/page.html
View File

@ -7,7 +7,12 @@
<!-- Main --> <!-- Main -->
<article id="main"> <article id="main">
<header{% if page.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 %}');"{% endif %}> <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>
{% endif %}
<h2>{{ page.title }}</h2> <h2>{{ page.title }}</h2>
<p>{{ page.description }}</p> <p>{{ page.description }}</p>
</header> </header>

7
src/_layouts/post.html
View File

@ -14,7 +14,12 @@
<!-- Main --> <!-- Main -->
<article id="main"> <article id="main">
<header{% if page.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 %}');"{% endif %}> <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>
{% endif %}
<h2>{{ page.title }}</h2> <h2>{{ page.title }}</h2>
<p>{{ page.description }}</p> <p>{{ page.description }}</p>
</header> </header>

7
src/_layouts/spotlight.html
View File

@ -6,7 +6,12 @@
{% include header.html %} {% include header.html %}
<div id="main"> <div id="main">
<header{% if page.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 %}');"{% endif %}> <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>
{% endif %}
<h2>{{ page.title }}</h2> <h2>{{ page.title }}</h2>
<p>{{ page.description }}</p> <p>{{ page.description }}</p>
</header> </header>

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

@ -50,12 +50,32 @@
> header { > header {
@include padding(12em, 0); @include padding(12em, 0);
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")')); @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
position: relative;
background-attachment: fixed; background-attachment: fixed;
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
text-align: center; text-align: center;
> * {
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 { 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;