colophon.php 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. <?php
  2. $bodyclasses = 'colophon page';
  3. $title = 'About this site';
  4. $tagline = '';
  5. $description = 'Colophon, a funny little word historically meaning a statement at the end of a publication.';
  6. $keywords = 'colophon';
  7. $twitter_image = 'images/colopic.jpg';
  8. ?>
  9. <?=i('_header')?>
  10. <article class="body bottom_padding">
  11. <h2>Colophon</h2>
  12. <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>
  13. <section class="left column">
  14. <h3>Author</h3>
  15. <figure class="center">
  16. <picture alt="This guy here.">
  17. <source srcset="<?=$baseurl?>images/colopic.jpg 1x, <?=$baseurl?>images/colopic-2x.jpg 2x" />
  18. <img srcset="<?=$baseurl ?>images/colopic.jpg" alt="This guy here." />
  19. </picture>
  20. <figcaption><span>This guy here, portrayed by <a href="//www.flickr.com/photos/xalira">Elena</a></span></figcaption>
  21. </figure>
  22. <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>
  23. </section>
  24. <section class="right column">
  25. <h3>Tech bits</h3>
  26. <p class="noindent">For a whole bunch of reasons that I'm not 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="//macromates.com/">TextMate 2</a> (now open source!) to edit the code, and <a href="//compass-style.org/">Compass</a> and <a href="//susy.oddbird.net/">Susy</a> to make it look beautiful… and responsive!</p>
  27. <h3>Fonts</h3>
  28. <p class="noindent">I'm using a number of fonts:</p>
  29. <ul>
  30. <li>body and footer: <a href="//www.google.com/fonts/specimen/Open+Sans">Open Sans</a></li>
  31. <li>headers: <a href="//www.google.com/fonts/specimen/Oswald">Oswald</a></li>
  32. </ul>
  33. </section>
  34. </article>
  35. <?=i('_footer')?>