<div role="banner">

  <div id="skip">
    <a href="#main-content">Skip to main content</a>
  </div>

  <div class="landmark-content">
    {% if page.url == '/' %}
      <h1 class="main-title"><a href="{{ site.baseurl }}/">{{ site.title }}</a></h1>
    {% else %}
      <div class="main-title"><a href="{{ site.baseurl }}/">{{ site.title }}</a></div>
    {% endif %}
  </div>

  <div role="navigation">

    <div class="landmark-content">
      <ul id="main-nav">
        <li>
          <a href="/">
            <svg class="svg-icon"><use xlink:href="#icon-home" /></svg>
            Home
          </a>
        </li>
        <li>
          <a href="/about/">
            <svg class="svg-icon"><use xlink:href="#icon-about" /></svg>
            About
          </a>
        </li>
      </ul>
    </div>
    <!-- /landmark-content -->

  </div>
  <!-- /navigation -->

</div>
<!-- /banner -->

<div role="banner">

  <div id="skip">
    <a href="#main-content">Skip to main content</a>
  </div>

  <div class="landmark-content">
    {% if page.url == '/' %}
      <h1 class="main-title"><a href="{{ site.baseurl }}/">{{ site.title }}</a></h1>
    {% else %}
      <div class="main-title"><a href="{{ site.baseurl }}/">{{ site.title }}</a></div>
    {% endif %}
  </div>

  <div role="navigation">

    <div class="landmark-content">
      <ul id="main-nav">
        <li>
          <a href="/">
            <svg class="svg-icon"><use xlink:href="#icon-home" /></svg>
            Home
          </a>
        </li>
        <li>
          <a href="/about/">
            <svg class="svg-icon"><use xlink:href="#icon-about" /></svg>
            About <span class="offscreen">me</span>
          </a>
        </li>
      </ul>
    </div>
    <!-- /landmark-content -->

  </div>
  <!-- /navigation -->

</div>
<!-- /banner -->

Add better context for about link in main nav
Add better context for about link in main nav
