{%- assign current = page.title | downcase -%} {%- include html-header.html -%} {% if paginator.total_pages > 1 %}{% assign articles = paginator %}{% else %}{% assign articles = page %}{% endif %} {% assign current_cat = page.url | split: "/" | last | slugify %} {% assign current_cat_count = articles.posts | size %}
<div class="mx-auto max-w-screen-2xl bg-white">
	{%- include craftwork-banner.html -%} {%- include nav.html -%}
	<div class="border-b border-sky-100 bg-white">
		<div class="p-8 lg:pt-16">
			<div class="mx-auto max-w-screen-md pb-7 font-medium leading-relaxed">
				{%- include links.html -%} {% if paginator.total_pages > 1 and paginator.page == 1 %}
				<h1 class="text-2xl font-black uppercase md:mb-2 md:text-4xl">{{ page.title }}</h1>
				{% elsif paginator.total_pages > 1 and paginator.page != 1 %}
				<h1 class="text-2xl font-black uppercase md:mb-2 md:text-4xl">{{ page.title }}<span class="text-base font-semibold uppercase text-gray-500"> / Page {{ paginator.page }}</span></h1>
				{% else %}
				<h1 class="text-2xl font-black uppercase md:mb-2 md:text-4xl">Blog<span class="text-base font-semibold uppercase text-gray-500"> / {{ articles.posts.first.category }}</span></h1>
				{% endif %}
				<p class="mb-4 font-semibold uppercase text-gray-500">{{ page.description }}</p>
				<div>
					{% if page.url == '/blog/index.html' or page.url contains "/page/" %}
					<a class="show-all mb-1 mr-1 inline-block rounded-sm bg-gray-900 px-2 py-1 text-xs font-medium uppercase text-white transition duration-500" href="/blog/" title="View All"><i class="fa-regular fa-layer-group mr-2"></i>View All</a>
					{% else %}
					<a class="show-all mb-1 mr-1 inline-block rounded-sm bg-bubble-gum-500 px-2 py-1 text-xs font-medium uppercase text-white transition duration-500 hover:bg-gray-900" href="/blog/" title="View All"><i class="fa-regular fa-layer-group mr-2"></i>View All</a>
					{% endif %} {% assign sorted_cats = site.categories | sort %} {% for category in sorted_cats %} {% capture category_name %}{{ category | first | slugify }}{% endcapture %} {% if category_name == current_cat %}
					<a class="mb-1 mr-1 inline-block rounded-sm bg-gray-900 px-3 py-1 text-xs font-medium uppercase text-white transition duration-500" href="/blog/category/{{ category_name | slugify  }}/" title="" data-category="{{ category_name | slugify }}"><i class="fa-regular fa-tag mr-1"></i>{{ category | first }}</a>
					{% else %}
					<a class="mb-1 mr-1 inline-block rounded-sm bg-bubble-gum-500 px-3 py-1 text-xs font-medium uppercase text-white transition duration-500 hover:bg-gray-900 hover:text-white" href="/blog/category/{{ category_name | slugify  }}/" title="" data-category="{{ category_name | slugify }}"><i class="fa-regular fa-tag mr-1"></i>{{ category | first }}</a>
					{% endif %} {% endfor %}
				</div>
			</div>
			{% if current_cat_count == 1 %}
			<div class="mx-auto mt-2 max-w-screen-md md:p-0 md:pb-8">
				{% elsif current_cat_count == 2 %}
				<div class="mx-auto mt-2 max-w-screen-xl md:grid md:grid-cols-2 md:gap-8 md:p-0 md:pb-8">
					{% else %}
					<div class="mx-auto mt-2 max-w-screen-xl grid-cols-3 gap-8 md:grid md:grid-cols-2 md:p-0 md:pb-8 lg:grid-cols-4">{% endif %} {% for post in articles.posts %} {%- include article-card.html article=post -%} {%- endfor -%}</div>
					{% if paginator.total_pages > 1 %}
					<div class="pt-8 lg:pb-8 lg:pt-4">
						<div class="mx-auto flex max-w-screen-xl justify-between justify-items-end text-center font-extrabold uppercase leading-relaxed">
							{% if paginator.previous_page %}
							<a class="transition duration-500 hover:text-bubble-gum-500" href="{{ paginator.previous_page_path | prepend: site.baseurl }}"><i class="fa-regular fa-circle-arrow-left mr-2"></i>Newer</a>
							{% else %}
							<div class="text-gray-400"><i class="fa-regular fa-circle-arrow-left mr-2"></i>Newer</div>
							{% endif %}
							<div><span class="hidden md:inline">Page </span>{{ paginator.page }}/{{ paginator.total_pages }}</div>
							{% if paginator.next_page %}
							<a class="transition duration-500 hover:text-bubble-gum-500" href="{{ paginator.next_page_path | prepend: site.baseurl }}">Older<i class="fa-regular fa-circle-arrow-right ml-2"></i></a>
							{% else %}
							<div class="text-gray-400">Older<i class="fa-regular fa-circle-arrow-right ml-2"></i></div>
							{% endif %}
						</div>
					</div>
					{% endif %}
				</div>
			</div>
			{%- include footer-newsletter.html -%} {%- include footer.html -%}
		</div>
		{%- include html-footer.html -%}
	</div>
</div>