Herman 5.0.0-beta.2

Herman Typography

Initial styling for typographic elements in Herman. Some typography is also inherited from the Accoutrement Init normalization files.

Related

Accoutrement [external]

*

scss 
* {
  border: solid 0 currentcolor;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

Since this was initially built with accoutrement/init – a more opinionated reset – this simplified block reset helps cover the basic assumptions of the code-base

:root

scss 
:root {
  @include tools.font-family('sans');

  font-size: tools.size('root');
  font-size: tools.size('responsive');
  line-height: tools.ratio('line-height');
}

The root typographic styles provide a default font, responsive font-size, fallback font-size, and line-height.

[hidden]

scss 
[hidden] {
  display: none !important; /* stylelint-disable-line declaration-no-important */
}

Selected text uses a light color from the Herman color palette.

img

scss 
img {
  display: revert;
}

Undo the block image display caused by changing our reset from accoutrement/init to cssremedy - since that would be a noticeable user-facing change.

::selection

scss 
::selection {
  background-color: tools.color('callout');
}

Selected text uses a light color from the Herman color palette.

mark

scss 
mark {
  background-color: tools.color('callout');
  display: inline-block;
  padding: 0 tools.size('quarter-shim');
}

For search-results, we mark target text with a background color.

[href]

scss 
[href] {
  #{config.$link} {
    color: tools.color('action');
    text-decoration-color: tools.color('underline');
    text-decoration-skip: auto;
    transition: text-decoration-color 250ms, color 200ms;
  }

  #{config.$focus} {
    color: tools.color('focus');
    text-decoration-color: currentcolor;
  }
}

Default links use both color and text-underline to stand out from basic text.

Related

$link

$focus

pre

scss 
pre {
  @include tools.font-family('code');

  font-size: tools.size('code');
  overflow: auto;
  white-space: pre;
}

Pre-formatted blocks use our monospace code font-stack, and a smaller font-size.

code

scss 
code {
  @include tools.font-family('code');

  font-weight: bolder;

  pre & {
    display: block;
    font-weight: normal;
  }
}

Code uses a monospace font-stack, and slightly bolder text when inline - but allows for syntax-highlighting in a block context.

Related

Code Blocks

.is-hidden

scss 
.is-hidden {
  @include tools.is-hidden;
}

Text that is provided for screen-reader accessibility only, can be visually hidden without removing from the DOM.

.text-block

scss 
.text-block {
  max-width: 80ch;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
  }

  h1,
  h2,
  h3,
  h4 {
    color: tools.color('text');

    a {
      #{config.$link} {
        text-decoration-color: transparent;
      }

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

    + h2,
    + h3 {
      margin-top: 0;
    }
  }

  h1 {
    font-size: tools.size('h1');
    margin-bottom: tools.size('shim');
  }

  h2,
  h3 {
    margin-top: tools.size('gutter-plus');
  }

  > h2,
  > h3 {
    &:first-child {
      margin-top: 0;
    }
  }

  h2 {
    font-size: tools.size('h2');
    margin-bottom: tools.size('shim');
  }

  h3 {
    font-size: tools.size('h3');
    font-weight: normal;
    margin-bottom: tools.size('shim');
  }

  p,
  pre {
    margin-bottom: tools.size('gutter-minus');
  }

  ol,
  ul {
    margin: 0 tools.size('gutter') tools.size('gutter-minus');
  }

  li {
    > p {
      margin: tools.size('shim') 0;
    }
  }

  blockquote {
    border-left: tools.size('half-shim') solid tools.color('border-light');
    font-size: tools.size('quote');
    margin-left: tools.negative('gutter');
    padding-left: tools.size('shim') + tools.size('half-shim');

    > p {
      &:not(:last-child) {
        text-indent: -0.4em;

        @include tools.wrap-content {
          color: tools.color('theme-dark');
        }
      }
    }

    cite {
      display: block;
      font-size: tools.size('reset');
      font-style: normal;
    }
  }
}

There are some typographic elements that can’t be applied globally, but will be generated in markdown-rendered html-text blocks. The text-block class can be used to provide max line-length and other typographic features – headings, blockquotes, lists, code, emphasis, etc.

Example

html 
<div class="text-block">
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <cite>—Anonymous</cite>
  </blockquote>

  <h3>Header Level 3</h3>

  <ul>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <pre><code>#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}</code></pre>
</div>

.config.invert-colors

scss 
.config.invert-colors {
  @include config.invert-colors;
}

Invert the colors of a block, creating a light-on-dark area.

Example

html 
<div class="invert-colors" style="padding: 1em;">
  You shall sojourn at <a href="#">Paris, Rome, and Naples</a>.
</div>

Requires

@mixin invert-colors()