website/_src/pages/gallery.html

---
title: "Gallery"
order: 4
icon: "M2 2V30H30V2H2M5 26l6-9 5 6 5-9 6 12H5"
---

<section id="artworks">
	<article>
	{%for article in collections.articles%} {%if article.fileSlug == 'ocs'%}
	{{ article.content }} {%endif%} {%endfor%}
		<ul role="list">
			{% assign sortedArtworks = collections.artworks | sortByFirstDate %} {%for artwork in sortedArtworks %}
			<li>
				<a href="{{artwork.page.url}}">
					<figure>
						{%if artwork.data.images[0]%}
						<img src="{{artwork.data.images[0].src}}" alt="{{artwork.data.images[0].alt}}" {%if artwork.data.images[0].pixel%} style="image-rendering: pixelated" {%endif%} />
						<figcaption>{{artwork.page.fileSlug}}{%if artwork.data.images.size > 1%}<p class="count">(+{{artwork.data.images.size| minus: 1}})</p>{%endif%}</figcaption>
						{% if artwork.data.images[0].date %}
						<time datetime="{{artwork.data.images[0].date|ISO}}">{{artwork.data.images[0].date|readable}}</time>
						{%endif%} {%endif%}
					</figure>
				</a>
			</li>
			{% endfor %}
		</ul>
	</article>
	<article>
	{%for article in collections.articles%} {%if article.fileSlug == 'fanart'%}
	{{ article.content }} {%endif%} {%endfor%}
		<ul role="list">
			{%assign sortedFanarts = collections.fanarts|sortByFirstDate%} {%for
			fanart in sortedFanarts%}
			<li>
				<a href="{{fanart.page.url}}">
					<figure>
						{%if fanart.data.images[0]%}
						<img src="{{fanart.data.images[0].src}}" alt="{{fanart.data.images[0].alt}}" />
						<figcaption>{{fanart.page.fileSlug}}</figcaption>
						{%if fanart.data.images[0].date%}
						<time datetime="{{fanart.data.images[0].date|ISO}}">{{fanart.data.images[0].date|readable}}</time>
						{%endif%} {%endif%}
					</figure>
				</a>
			</li>
			{% endfor %}
		</ul>
	</article>
</section>