footer.njk

<footer class="bg-zenith dark:bg-zenith-700 pb-12 [&_a:hover]:underline" aria-labelledby="footer-heading" x-ref="footer">
  <h2 id="footer-heading" class="sr-only">Footer</h2>
  <div class="container pb-8 pt-16 sm:pt-24">
		<div class="grid sm:flex sm:justify-between gap-8">{# xl:grid xl:grid-cols-3 xl:gap-8 #}
			<div class="space-y-8">
				<h3 class="text-2xl sm:text-3xl font-bold mb-8 md:mb-4">Thanks for reading!</h3>
				<div class="flex flex-wrap gap-6 select-none">
					<a href="/feed.json" class="text-xl !no-underline leading-5 font-medium" title="JSON Feed">
						<span class="sr-only">JSON Feed</span>
						<span>{ i }</span>
					</a>
					<a href="/feed.xml" title="RSS Feed">
						<span class="sr-only">RSS Feed</span>
						{% feather "rss", { class: "h-6 w-6" } %}
					</a>
					<a href="https://www.github.com/{{ build.issues.owner }}/" title="GitHub" rel="noopener noreferrer">
						<span class="sr-only">GitHub</span>
						{% feather "github", { class: "h-6 w-6" } %}
					</a>
					<a href="https://codepen.io/{{ build.issues.owner }}/" title="CodePen" rel="noopener noreferrer">
						<span class="sr-only">CodePen</span>
						{% feather "codepen", { class: "h-6 w-6" } %}
					</a>
					<a href="https://www.linkedin.com/in/{{ build.issues.owner }}/" title="LinedIn" rel="noopener noreferrer">
						<span class="sr-only">LinedIn</span>
						{% feather "linkedin", { class: "h-6 w-6" } %}
					</a>
					<a href="https://twitter.com/{{ build.issues.owner }}" title="Twitter" rel="noopener noreferrer">
						<span class="sr-only">Twitter</span>
						{% feather "twitter", { class: "h-6 w-6" } %}
					</a>
				</div>
			</div>
{#			<div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 xl:col-span-2 xl:mt-0">#}
				<ul role="list" class="space-y-4">
					<li><a class="leading-8" href="/blog/">Blog</a></li>
					<li><a class="leading-8" href="/tools/">Tools & Utilities</a></li>
					<li><a class="leading-8" href="/about/">About</a></li>
					<li><a class="leading-8" href="/privacy/">Privacy Policy</a></li>
				</ul>
{#			</div>#}
		</div>
		<div class="mt-16 sm:mt-20 text-sm">
			<p>Last built on {{ build.timestamp.formatted }} (<a href="https://www.github.com/{{ build.issues.owner }}/{{ build.issues.repo }}/commit/{{ build.hash.full }}" rel="noreferrer noopener" >{{ build.hash.short }}</a>)</p>
		</div>
		<div class="border-t border-solid dark:border-zinc-700 pt-8 mt-8">
			<p class="text-sm text-balance">
				&copy;&nbsp;{% year %} <a href="/">Alex&nbsp;Zappa</a>. All&nbsp;Right&nbsp;Reserved. Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/" rel="noopener noreferrer">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the MIT License.{# TODO Learn more at /site/ #}
			</p>
		</div>
	</div>
</footer>