Design series – the footer

Yesterday I did a facelift for the header of this site, today I will do the same for the footer.

This is what it currently looks like:

This is a happy mess of a lot of things flying around. The only thing I actually need at this time is a few small links to the email for the website and maybe some info to my thing.

I assume that the setup is very similar to the one for the header and so will have a look at _include/footer.html.

This is the code inside:

<footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">ms75</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Markus Schnell</li><li><a class="u-email" href="mailto:ms75.eu@icloud.com">ms75.eu@icloud.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/mschnell"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">mschnell</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Personal website.</p>
      </div>
    </div>

  </div>

</footer>

The class h-card for the footer refers to the microformat specification. It uses the p-name, the u-url and the u-email elements.

Property	Description
p-name	The full/formatted name of the person or organization
u-url	home page or other URL representing the person or organization
u-email	email address

I see that the p-name is actually substituted with ms75, which should be easy to fix by adding author to my _config.yml file.

title: ms75
email: ms75.eu@icloud.com
author: Markus Schnell
description: >- # this means to ignore newlines until "baseurl:"
  Personal website.

Here are a few ideas for extending the h-card, which I might do at a later point in time.

The intention of this section is obviously to spread out the elements across the footer. This looks like a perfect match for the cluster layout from Every Layout. I also remove all the other things I don’t use and keep only this:

<footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="cluster">

    <p class="footer-heading">ms75</p>

    <p>Personal website.</p>

    <p class="p-name">Markus Schnell</p><p><a class="u-email" href="mailto:ms75.eu@icloud.com">ms75.eu@icloud.com</a></p></div>

</footer>

Now it looks like this:

Good enough. Tomorrow we will look at the list of posts on the home page.