quotes.html

---
title: Quotes
---

<section>
	{% for quote in site.data.quotes %}
	<div class="row">
		<div class="twelve columns">
			<blockquote data-person="{{ quote.person }}" data-time="{{ quote.time }}">
				{% if quote.scenario %} [{{quote.scenario}}] – {% endif %}
				{{quote.quote}}
			</blockquote>
		</div>
	</div>
	{% endfor %}
</section>
<style>
	blockquote {
		font-size: 1.5em;
		position: relative;
		text-align: center;
		cursor: default;
		opacity: 1;
	}

	blockquote:after {
		z-index: -1;
		position: absolute;
		left: 0;
		height: 1em;
		width: 100%;
		transform-origin: 0 50%;
		transition: transform 0.5s cubic-bezier(0.5, 0, 0.5, 1);
		opacity: 0.7;
		transform: scaleX(1) translateX(0%);
		bottom: -0.5em;
		font-size: 0.9em;
		content: attr(data-person) " – " attr(data-time);
	}

	@media (min-width: 750px) {
		blockquote {
			opacity: 0.5;
		}

		blockquote:hover {
			opacity: 1;
		}

		blockquote:after {
			content: "";
			opacity: 0;
			z-index: -1;
		}

		blockquote:hover:after {
			position: absolute;
			left: 0;
			height: 1em;
			width: 100%;
			transform-origin: 0 50%;
			transition: transform 0.5s cubic-bezier(0.5, 0, 0.5, 1);
			opacity: 0.7;
			transform: scaleX(1) translateX(0%);
			bottom: -0.5em;
			font-size: 0.9em;
			content: attr(data-person) " – " attr(data-time);
		}
	}
</style>