_Footer | Herman Documentation

The OddBird credit in the navigation footer can be toggled using the SassDoc display.watermark configuration setting.

Example

njk

{% import 'utility.macros.njk' as utility %}
<aside class="footer-credit">
  <a href="https://www.oddbird.net/herman/" class="footer-icon">
    {{ utility.icon('logo', size='footer-logo') }}
  </a>
  <span>
    Documented with
    <a href="https://www.oddbird.net/herman/" class="footer-link">
      Herman
    </a>
  </span>
  <span>
    by
    <a href="https://www.oddbird.net/" class="footer-link">
      OddBird
    </a>
  </span>
</aside>

html compiled

<aside class="footer-credit"> <a href="https://www.oddbird.net/herman/" class="footer-icon">
    
  <svg data-icon="logo" data-icon-size="footer-logo" ><use xlink:href="#icon-logo" />
  </svg>

  </a>
 <span>
    Documented with
    <a href="https://www.oddbird.net/herman/" class="footer-link">
      Herman
    </a>
  </span>
 <span>
    by
    <a href="https://www.oddbird.net/" class="footer-link">
      OddBird
    </a>
  </span>

</aside>

.footer-credit

scss

.footer-credit {
  border-top: 1px solid tools.color('theme-light');
  display: flow-root;
  flex: 0 0 auto;
  font-size: tools.size('footer');
  line-height: tools.size('rhythm');
  padding-top: tools.size('gutter');

  span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
  }
}

Layout for the footer credit.

.footer-icon

scss

.footer-icon {
  #{config.$link} {
    color: inherit;
    float: left;
    margin-right: tools.size('half-shim');
  }
}

Layout for the footer logo-icon.

.footer-link

scss

.footer-link {
  #{config.$link} {
    font-weight: bold;
    text-decoration-color: transparent;
  }

  #{config.$focus} {
    text-decoration-color: currentcolor;
  }
}

Special styles for the footer links.