{% extends "base.html" %}
{% import "macros.html" as macros %}

{% block page_specific_head %}
{% endblock page_specific_head %}

{% block page_aside %}
{% endblock page_aside %}

{% block page_content %}
<h2>Creative Commons Icons</h2>
<p>The icons on this page are licensed under the <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode">Creative Commons Attribution-NonCommercial-ShareAlike 4.0</a> license.</p>

<ul>
	<li class="post-card">
		<figure>
			{% include "svg/paper-list-icon.svg" %}
			<figcaption>Two stacked sheets of paper. The top sheet depicts a bulleted list.</figcaption>
		</figure>
		<a href="/assets/svg/paper-list-icon.svg" download>Download Stacked Sheets</a>
	</li>
	<li class="post-card">
		<figure>
			{% include "svg/chat-bubbles-icon.svg" %}
			<figcaption>Two overlapping chat bubbles.</figcaption>
		</figure>
		<a href="/assets/svg/chat-bubbles-icon.svg" download>Download Chat Bubbles</a>
	</li>
	<li class="post-card">
		<figure>
			{% include "svg/gears-icon.svg" %}
			<figcaption>Two interlocking gears. Hover to see them spin.</figcaption>
		</figure>
		<a href="/assets/svg/gears-icon.svg" download>Download Gears</a>
	</li>
</ul>

<style>
	li {
		display: flex;
	}
	li a {
		justify-self: center;
		margin-top: auto;
		margin-bottom: auto;
		padding: 10px 10px 10px 10px;
	}
	figure {
		display: inline-block;
		background: #444;
	}
	figcaption {
		width: 220px;
	}
</style>
{% endblock page_content %}
