---
layout: default
---

{% include header.html %}

<style>
	.showcase-video-image {
		margin-top: 1rem;
	}

	.showcase-developer-quote {
		font-style: italic;
		color: var(--base-color-text-title);

	}

	.showcase-developer-quote p:first-child::before {
		content: '“';
		font-size: 150%;
		margin-right: -0.1rem;
	}

	.showcase-developer-quote p:last-child::after {
		content: '”';
		font-size: 150%;
		margin-left: -0.1rem;
	}

	@media (min-width: 900px) {
		.showcase-video-image {
			margin-left: 1rem;
			margin-top: 0;
		}
	}
</style>

<div class="head">
	<div class="container flex eqsize responsive">
		<div class="main">

			<div style="margin: 1.25rem 0">
				<a href="/showcase"><strong>&lt;</strong>&nbsp;&nbsp;Back to showcase</a>
			</div>

			<h1 class="intro-title">{{ page.title }}</h1>
			<h3 style="opacity: 0.75; margin-top: 0.5rem">
				by <a href="{{ page.website }}" target="_blank"
					style="text-decoration: underline; text-decoration-thickness: 0.125rem; text-decoration-color: hsla(0, 0%, 100%, 0.5)">{{
					page.author }}</a>
				| {% if page.release_date == "TBD" %}Release date: <abbr title="To Be Determined">TBD</abbr>{% else %}{{
				page.release_date }}{% endif %}
			</h3>
			<div style="filter: invert(100%); opacity: 0.75; margin-top: 1rem">


				{% if page.windows %}
				<img src="/assets/icons/windows.svg" alt="Windows" title="Windows" style="margin: 0 0.125rem" width="24"
					height="24">
				{% endif %}

				{% if page.macos %}
				<img src="/assets/icons/macos.svg" alt="Mac" title="Mac" style="margin: 0 0.125rem" width="24" height="24">
				{% endif %}

				{% if page.linux %}
				<img src="/assets/icons/linux.svg" alt="Linux" title="Linux" style="margin: 0 0.125rem" width="24" height="24">
				{% endif %}

				{% if page.switch %}
				<img src="/assets/icons/switch.svg" alt="Nintendo Switch" title="Switch" style="margin: 0 0.125rem" width="24"
					height="24">
				{% endif %}

				{% if page.html5 %}
				<img src="/assets/icons/html5.svg" alt="HTML5" title="HTML5" style="margin: 0 0.125rem" width="24" height="24">
				{% endif %}

				{% if page.android %}
				<img src="/assets/icons/android.svg" alt="Android" title="Android" style="margin: 0 0.125rem" width="24"
					height="24">
				{% endif %}

				{% if page.ios %}
				<img src="/assets/icons/ios.svg" alt="iOS" title="iOS" style="margin: 0 0.125rem" width="24" height="24">
				{% endif %}

				{% if page.playstation %}
				<img src="/assets/icons/playstation.svg" alt="PlayStation" title="PlayStation" style="margin: 0 0.125rem"
					width="24" height="24">
				{% endif %}

				{% if page.xbox %}
				<img src="/assets/icons/xbox.svg" alt="Xbox" title="Xbox" style="margin: 0 0.125rem" width="24" height="24">
				{% endif %}

			</div>

		</div>
	</div>
</div>

<div class="container">
	<section class="flex eqsize responsive">
		<article>
			{{ content }}

			<div class="flex responsive" style="justify-content: center; margin-top: 2rem">
				{% if page.steam %}
				<a href="{{ page.steam }}" class="btn" style="margin: 0 0.5rem; white-space: nowrap" target="_blank">
					View on Steam
				</a>
				{% endif %}

				{% if page.itch %}
				<a href="{{ page.itch }}" class="btn" style="margin: 0 0.5rem; white-space: nowrap" target="_blank">
					View on Itch.io
				</a>
				{% endif %}

				{% if page.humble %}
				<a href="{{ page.humble }}" class="btn" style="margin: 0 0.5rem; white-space: nowrap" target="_blank">
					View on Humble Store
				</a>
				{% endif %}

				{% if page.gog %}
				<a href="{{ page.gog }}" class="btn" style="margin: 0 0.5rem; white-space: nowrap" target="_blank">
					View on Humble GOG
				</a>
				{% endif %}

				{% if page.nintendo %}
				<a href="{{ page.nintendo }}" class="btn" style="margin: 0 0.5rem; white-space: nowrap" target="_blank">
					View on Switch
				</a>
				{% endif %}

				{% if page.xbox %}
				<a href="{{ page.xbox }}" class="btn" style="margin: 0 0.5rem; white-space: nowrap" target="_blank">
					View on Xbox
				</a>
				{% endif %}

				{% if page.github %}
				<a href="{{ page.github }}" class="btn" style="margin: 0 0.5rem; white-space: nowrap" target="_blank">
					View on GitHub
				</a>
				{% endif %}

				{% if page.custom %}
				<a href="{{ page.custom }}" class="btn" style="margin: 0 0.5rem; white-space: nowrap" target="_blank">
					Learn More
				</a>
				{% endif %}
			</div>
		</article>
		<article class="showcase-video-image">
			{% if page.youtube_id %}
			<div class="card youtube" style="padding-bottom: 56.25%">
				<iframe src="https://www.youtube-nocookie.com/embed/{{ page.youtube_id }}"
					allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
					allowfullscreen="" frameborder="0">
				</iframe>
			</div>
			{% endif %}

			{% for image in page.gallery %}
			<a href="{{ image }}" class="lightbox" data-group="showcase">
				<img class="rounded-lg" src="{{ image }}" alt="Screenshot of {{ page.title }} by {{ page.author }}"
					style="width: 100%; height: auto; margin-top: 1rem; background:  linear-gradient(90deg, #947451 12%, #a8885f 29%, #8c8977 65%, #d2ba9f 98%) "
					width="16" height="9">
			</a>
			{% endfor %}
		</article>
	</section>
	{% if page.developer_interview %}
	<section style="margin-top: 3rem">
		<h3>{{ page.developer_interview.title }}</h3>

		<blockquote class="showcase-developer-quote">
			{{ page.developer_interview.text }}
		</blockquote>

		{% if page.developer_interview.url %}
		<a href="{{ page.developer_interview.url }}">{{ page.developer_interview.context }}</a>
		{% else %}
		<p>{{ page.developer_interview.context }}</p>
		{% endif %}
	</section>
	{% endif %}
</div>

{% include footer.html %}