{% extends "base.html" %}
{% block title %}{{ section.title }}{% endblock title %}

{% block head %}
<link rel="stylesheet" href="/blog.css">
{% endblock head %}

{% block content %}
{{ section.content | safe }}

<section id="articles" class="section">
	{% for page in section.pages %}
	<article>
		<div class="banner">
			<a href="{{ page.permalink | safe }}"><img src="{{ page.extra.banner | safe }}" /></a>
		</div>
		<div class="details">
			<div class="headline">
				<h2><a href="{{ page.permalink | safe }}">{{ page.title }}.</a></h2>
			</div>
			<span class="publication">By {{ page.extra.author }}. {{ page.date | date(format="%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
			<div class="summary">
				<div>
					{{ page.summary | safe }}
				</div>
			</div>
			<div class="keep-reading">
				<a href="{{ page.permalink | safe }}" class="link arrow">Keep Reading</a>
			</div>
		</div>
	</article>
	{% endfor %}
</section>
{% endblock content %}