Herman 5.0.0-beta.2

Herman Banner Region

Styles related to the top banner in generated Herman docs.

@mixin banner-arrow()

Apply a bottom-border with centered down-arrow triangle, for use as a divider between the banner and main content.

Parameters

$color: 'theme-dark' (color | string)

The color of the border/arrow line

$background: 'background' (color | string)

The background color above the border/arrow, used to make it an arrow-outline rather than a solid triangle

Examples

scss 
[data-region='banner'] {
  @include config.banner-arrow;
}
css compiled 
[data-region=banner] {
  border-bottom: 8px solid hsl(195deg, 85%, 35%);
  box-shadow: 0 2px 2px rgba(85, 91, 94, 0.5);
  display: block;
  position: relative;
  width: 100%;
}
[data-region=banner]::before, [data-region=banner]::after {
  content: "";
  border: 0.7rem solid transparent;
  border-top-color: hsl(195deg, 85%, 35%);
  border-width: 0.7rem 1.4rem 0;
  left: 50%;
  position: absolute;
  top: 100%;
  transition: border-width 200ms;
}
[data-region=banner]::before {
  content: "";
  margin-top: 8px;
  transform: translateX(-50%) translateY(-2px);
}
[data-region=banner]::after {
  content: "";
  border-top-color: #fff;
  transform: translateX(-50%) translateY(-4px);
}
html 
<header data-region="banner">
  Hello World
</header>

[data-region='banner']

scss 
[data-region='banner'] {
  @include config.banner-arrow;
  @include tools.z-index('banner');

  align-items: center;
  display: flex;
  padding: tools.size('shim');
}

Layout styles for Herman’s top-banner region.

Example

njk 
{% import 'utility.macros.njk' as utility %}
<header data-region="banner">
  <button data-nav-toggle>
    {{ utility.icon('menu', size='nav-icon') }}
  </button>
  <div class="project-title">
    <a href="index.html" rel="home" class="project-name">Herman</a>
    <span class="project-version">1.0.0</span>
  </div>
</header>
html compiled 
<header data-region="banner">
  <button data-nav-toggle>
    <svg data-icon="menu" data-icon-size="nav-icon">
      <use xlink:href="#icon-menu" />
    </svg>
  </button>
  <div class="project-title"> <a href="index.html" rel="home" class="project-name">Herman</a>
 <span class="project-version">1.0.0</span>

  </div>
</header>

.project-title

scss 
.project-title {
  align-items: baseline;
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

Used for the top-banner project title, including both the name and version of the project.

Example

html 
<div class="project-title">
  <a href="index.html" rel="home" class="project-name">Herman</a>
  <span class="project-version">1.0.0</span>
</div>

.project-name

scss 
.project-name {
  font-size: tools.size('h1');
  font-weight: bold;
  padding-left: tools.size('half-shim');
  padding-right: tools.size('half-shim');

  #{config.$link} {
    text-decoration: none;
  }
}

Specific styling for the top-banner project name.

Example

html 
<a href="index.html" rel="home" class="project-name">Herman</a>

.project-version

scss 
.project-version {
  @include tools.font-family('sans');

  color: tools.color('text-light');
  font-size: tools.size('h3');
}

Less prominent text for the top-banner project version.

Example

html 
<span class="project-version">1.0.0</span>

[data-nav-toggle]

scss 
[data-nav-toggle] {
  color: tools.color('action');
  padding: tools.size('half-shim');

  @include tools.above('page-break') {
    padding-left: tools.size('shim');
    padding-right: tools.size('shim');
  }

  @include tools.above('nav-break') {
    display: none;
  }

  #{config.$focus},
  &[aria-pressed='true'] {
    color: tools.color('focus');
    outline: 0;
  }
}

The navigation-menu toggle is only visible on small screens.

Example

njk 
{% import 'utility.macros.njk' as utility %}
<button data-nav-toggle>
  {{ utility.icon('menu', size='nav-icon') }}
</button>
html compiled 
<button data-nav-toggle>
  <svg data-icon="menu" data-icon-size="nav-icon">
    <use xlink:href="#icon-menu" />
  </svg>
</button>