about.html

---
title: Our Story
hero: <div>Our Story <p><img align="middle" src="/images/doubleewe-trans.png" width="200px" /></p></div>
---
<p class="editor-link" style="text-align: center; position: relative;
	top: -185px;"><a href="cloudcannon:collections/_about/" 
	class="btn"><strong>&#9998;</strong> Manage Staff members</a>
</p>
<script>
	
function showBlurb(name) {
	var blurbs = document.getElementsByName("blurb");
	var i;
	for (i = 0; i < blurbs.length; i++) {
 		blurbs[i].style.display = 'none';
  	}
	document.getElementById(name).style.display = 'block';
}
</script>
<ul class="staff">
	
	{% for person in site.about %}
		<li>
			<a style="visited:red; cursor: pointer;text-decoration: none;" onclick="showBlurb('{{ person.nickname }}')">

			<div class="staff-image" 
				style="background-image: url({% include relative-src.html src=person.image_path %})">
			</div>
			<div class="name">
				<span class="first-name" ::first-letter>{{ person.name }}</span>
			</div>
			
				<div class="nickname">"{{ person.nickname }}"</div>
			<p class="blurb" name="blurb" id="{{ person.nickname }}">{{ person.blurb }}</p>
		</li>
		</a>
	{% endfor %}
	
</ul>

<div class="thirds story-points">
	<div>
		<h3 class="editable">Creative Passion</h3>
		<p class="editable">We are creatives. Our interests are varied. We enjoy working on new projects with different materials.
			We hope our passion for quality shows through in our work.</p>
	</div>
	<div>
		<h3 class="editable">Sharp Buttons</h3>
		<p class="editable">We enjoy snark and hope you do, too.
			Get in touch with your sarcasm. It feels good... and it funny, too.</p>
	</div>
	<div>
		<h3 class="editable">Wearable Style</h3>
		<p class="editable">We like to keep designs fresh, which often means keeping things plain and simple.
		</p>
	</div>
</div>