af/pages/colophon.php

<?php
$bodyclasses = 'colophon page';
$title = 'About this site';
$tagline = '';
$description = 'Colophon, a funny little word historically meaning a statement at the end of a publication.';
$keywords = 'colophon';
$twitter_image = 'images/colopic.jpg';
?>

<?=i('_header')?>

	<article class="body grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-0">
		<h2>Colophon</h2>
		<section class="col-start-1 col-span-1 sm:col-span-2">
			<p class="noindent">Funny little word derived from Greek <span class="greek">κολοφων</span>, historically meaning a statement at the end of a publication, providing information about it. Think of metadata with a thick layer of dust on top.</p>
		</section>
		<section class="left col-start-1 col-span-1">
			<h3>Author</h3>
			<figure class="center">
				<picture alt="This guy here.">
					<source srcset="<?=$baseurl?>images/colopic.jpg 1x, <?=$baseurl?>images/colopic-2x.jpg 2x" />
					<img class="rounded" srcset="<?=$baseurl ?>images/colopic.jpg" alt="This guy here." />
				</picture>
				<figcaption><span>This guy here, portrayed by <a href="//www.flickr.com/photos/xalira">Elena</a></span></figcaption>
			</figure>
			<p class="noindent">I am the sole author of this website's content, unless otherwise specified, and it's licensed as <a href="//creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.</p>
		</section>
		<section class="right col-start-1 col-span-1 sm:col-start-2">
			<h3>Tech bits</h3>
			<p class="noindent">For a whole bunch of reasons that I'm <strong>not</strong> about to explain, this website is lovingly crafted in plain <a href="//en.wikipedia.org/wiki/HTML5">HTML5</a>, with bits of JavaScript (<a href="//jquery.com">jQuery</a> flavoured), and a little <a href="//www.php.net">PHP</a> on the server side.
				I'm using <a href="https://code.visualstudio.com/">Visual Studio Code</a> and sometimes <a href="//macromates.com/">TextMate 2</a> (now open source!) to edit the code.
				The styling is provided by <a href="https://tailwindcss.com/">Compass</a> to make it look beautiful… and responsive!</p>
			<h3>Fonts</h3>
			<p class="noindent">I'm using a number of fonts:</p>
			<ul>
				<li>body and footer: <a href="//www.google.com/fonts/specimen/Open+Sans">Open Sans</a></li>
				<li>headers: <a href="//www.google.com/fonts/specimen/Oswald">Oswald</a></li>
			</ul>
		</section>
	</article>
	
<?=i('_footer')?>