godot-website/_layouts/showcase-item.html

---
layout: default
---

{% include header.html %}

<link rel="stylesheet" href="/pages/showcase/showcase-item.css">

<div class="head">
	<div class="add-nav-gap"></div>
	<div class="container flex eqsize responsive">
		<div class="main">

			<div class="back-to-showcase-container">
				<a href="/showcase/"><strong>&lt;</strong>&nbsp;&nbsp;Back to showcase</a>
			</div>

			<h1 class="intro-title">{{ page.title }}</h1>
			<h3 class="intro-subtitle">
				by <a class="author" href="{{ page.website }}" target="_blank">{{ page.author }}</a>
				| {% if page.release_date == "TBD" %}Release date: <abbr title="To Be Determined">TBD</abbr>{% else %}{{ page.release_date }}{% endif %}
			</h3>
			<div class="intro-platforms">


				{% if page.windows %}
				<img src="/assets/images/platforms/windows.svg" alt="Windows" title="Windows" draggable="false">
				{% endif %}

				{% if page.macos %}
				<img src="/assets/images/platforms/macos.svg" alt="Mac" title="Mac" draggable="false">
				{% endif %}

				{% if page.linux %}
				<img src="/assets/images/platforms/linux.svg" alt="Linux" title="Linux" draggable="false">
				{% endif %}

				{% if page.switch %}
				<img src="/assets/images/platforms/switch.svg" alt="Nintendo Switch" title="Switch" draggable="false">
				{% endif %}

				{% if page.quest %}
				<img src="/assets/images/platforms/vr.svg" alt="VR" title="VR" draggable="false">
				{% endif %}

				{% if page.html5 %}
				<img src="/assets/images/platforms/web.svg" alt="HTML5" title="HTML5" draggable="false">
				{% endif %}

				{% if page.android %}
				<img src="/assets/images/platforms/android.svg" alt="Android" title="Android" draggable="false">
				{% endif %}

				{% if page.ios %}
				<img src="/assets/images/platforms/ios.svg" alt="iOS" title="iOS" draggable="false">
				{% endif %}

				{% if page.playstation %}
				<img src="/assets/images/platforms/playstation.svg" alt="PlayStation" title="PlayStation" draggable="false">
				{% endif %}

				{% if page.xbox %}
				<img src="/assets/images/platforms/xbox.svg" alt="Xbox" title="Xbox" draggable="false">
				{% 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 GOG.com
				</a>
				{% endif %}

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

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

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

				{% if page.sony %}
				<a href="{{ page.sony }}" class="btn" style="margin: 0 0.5rem; white-space: nowrap" target="_blank">
					View on PlayStation
				</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.appstore %}
				<a href="{{ page.appstore }}" class="btn" style="margin: 0 0.5rem; white-space: nowrap" target="_blank">
					View on App Store
				</a>
				{% endif %}

				{% if page.googleplay %}
				<a href="{{ page.googleplay }}" class="btn" style="margin: 0 0.5rem; white-space: nowrap" target="_blank">
					View on Google Play
				</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 %}