N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Style overlay background image and add support for caption

Browse source
This commit is contained in:
Michael Rose 2016-03-23 21:59:58 -04:00
parent cae92a8770
commit 974797a2b8
4 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
_includes/page__hero.html
View file

@ -11,7 +11,7 @@
{% endif %} {% endif %}
<div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}" <div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}"
style="background: {{ page.header.overlay_color | default: 'transparent' }} {% if overlay_img_path %}url('{{ overlay_img_path }}'){% endif %};" style="{% if page.header.overlay_color %}background-color: {{ page.header.overlay_color | default: 'transparent' }};{% endif %} {% if overlay_img_path %}background-image: url('{{ overlay_img_path }}');{% endif %}"
> >
{% if page.header.overlay_color or page.header.overlay_image %} {% if page.header.overlay_color or page.header.overlay_image %}
<div class="wrapper"> <div class="wrapper">
@ -26,8 +26,8 @@
</div> </div>
{% else %} {% else %}
<img src="{{ img_path }}" alt="{{ page.title }}" class="page__hero-image"> <img src="{{ img_path }}" alt="{{ page.title }}" class="page__hero-image">
{% if page.header.caption %} {% endif %}
<span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span> {% if page.header.caption %}
{% endif %} <span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
{% endif %} {% endif %}
</div> </div>

1
_posts/2012-03-15-template-header-overlay-image.md
View file

@ -2,6 +2,7 @@
title: "Template: Header Image Overlay" title: "Template: Header Image Overlay"
header: header:
overlay_image: unsplash-image-1.jpg overlay_image: unsplash-image-1.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
categories: categories:
- Template - Template
- Uncategorized - Uncategorized

5
assets/_scss/_page.scss
View file

@ -71,8 +71,11 @@
padding: 3em 0; padding: 3em 0;
@include clearfix; @include clearfix;
text-align: center; text-align: center;
background-size: cover;
background-repeat: no-repeat;
.page__title { .page__title,
.page__meta {
color: #fff; color: #fff;
text-shadow: 1px 1px 4px rgba(#000, 0.5); text-shadow: 1px 1px 4px rgba(#000, 0.5);
} }

2
assets/css/main.css
View file

File diff suppressed because one or more lines are too long