index.html

---
layout: default
title: Articles
description: Random posts about random things
featured_image: /images/hero-images/laptop-notebook.jpg
---

<section class="hero hero--single">

	<div class="hero__image" style="background-image: url({{ page.featured_image | relative_url }})">
		<div class="hero__overlay"></div>
	</div>

	<div class="wrap">

		<h1>Articles</h1>
		<p>Random posts about random things.</p>

	</div>

</section>

<section class="listing">

	<div class="wrap">

		{% for post in paginator.posts %}

		<article class="post">

			<div class="post__image-wrap">
				<div class="post__image" style="background-image: url({{ post.featured_image | relative_url }})"></div>
			</div>

			<div class="post__content-wrap">
				<div class="post__content">
					<h2 class="post__title"><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h2>
					<p class="post__subtitle">{{ post.subtitle }}</p>
					<p class="post__description">{{ post.description }}</p>
				</div>
			</div>

		</article>

		{% endfor %}

	</div>

</section>

{% if paginator.total_pages > 1 %}

<section class="pagination">

	<div class="wrap">

		{% if paginator.previous_page %}
		<a href="{{ paginator.previous_page_path | relative_url }}" class="button pagination__prev"><i
				class="fa fa-arrow-left" aria-hidden="true"></i> <span>Newer Posts</span></a>
		{% endif %}
		{% if paginator.next_page %}
		<a href="{{ paginator.next_page_path | relative_url }}" class="button pagination__next"><span>Older Posts</span>
			<i class="fa fa-arrow-right" aria-hidden="true"></i></a>
		{% endif %}

	</div>

</section>

{% endif %}