categories.html

---
layout: normal
title: Categories
color: "#ff00b6"
bg_url: "/assets/images/shapes/Form2_pink_transparent.svg"
bg_position: "70vw -40vh"
---
<header class="content-siteheader">
	<h1>{{ page.title }}</h1>
</header>

{% for cat in site.cats %}
<div class="accordion">
	<a class="accordion-btn {% if forloop.first %}active{% endif %}" href="#">
		<span><b>{{ cat.title }}</b> <span>{{ cat.subtitle }}</span></span>
		<span class="accordion-indicator"></span>
	</a>
	<div class="accordion-panel colored">{{ cat.content | markdownify }}</div>
</div>
{% endfor %}

<!--
<div class="content-footer">
	<p><strong>But That's Not All!</strong></p>
	<p><strong>Check Back <mark class="accent-tc">Soon</mark> For More Categories.</strong></p>
</div>
-->

<script>
	var accs = document.getElementsByClassName("accordion-btn");
	for (var i = 0; i < accs.length; i++) {
		accs[i].addEventListener("click", function(event) {
			event.preventDefault();
			this.classList.toggle("active");
		});
	}
</script>