{{ define "title" -}}
  {{ .Params.title }} | Semantic Design System for Hugo
{{- end }}
{{ define "header" }}
  {{ partial "masthead.html" . }}
  <style>
    :root {
      --vertical-rhythm: 5rem;
      --logo-animation-filter-start: drop-shadow(0 -25px 45px #ff2e88) brightness(1) drop-shadow(0 -55px 35px #ff2e88) brightness(1) drop-shadow(0 -35px 155px #ff9800) brightness(4);
      --logo-animation-filter-end: drop-shadow(0 -20px 45px #ff2e88) brightness(.1) drop-shadow(0 0 5px #ff2e88) brightness(.7) drop-shadow(0 -20px 135px #ff2e88) brightness(2);
    }
    main, footer, header, caption {
      text-align: center;
    }
    nav[itemtype*="SiteNavigationElement"] {
      opacity: 0;
      transition: opacity 300ms ease;
    }
    nav[itemtype*="SiteNavigationElement"]:focus-within {
      opacity: 1;
      transition: opacity 300ms ease;
    }
    @media screen and (max-width: 768px) {
      nav[itemtype*="SiteNavigationElement"] {
        display: none;
      }
      .hack header h1 {
        margin-top: 2rem !important;
      }
      .grid {
        flex-direction: row;
      }
      .cell {
        flex: 1;
      }
    }
    .shaded {
      filter: var(--logo-animation-filter-start);
      opacity: 0;
    }
    .animated {
      /* FIXME: Animation disabled due to browser conflict with Web Miner */
      animation: reveal 2s both;
      opacity: 1; /* remove with fix */
      filter: var(--logo-animation-filter-end); /* remove with fix */
    }
    @keyframes reveal {
      from {
        filter: var(--logo-animation-filter-start);
      }
      to {
        filter: var(--logo-animation-filter-end);
        opacity: 1;
      }
    }
    .hack .grid {
      justify-content: center;
    }
    .hack header h1:after {
      content: none;
    }
    .hack header h1 {
      font-family: Futura,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
      padding: 0;
      margin: 1rem;
      font-size: 3em;
      display: inline-block;

      background-color: #2a3439;
      color: transparent;
      text-shadow: 0 2px 3px rgba(255, 255, 255, 0.1);
      -webkit-background-clip: text;
      -moz-background-clip: text;
      background-clip: text;
      filter: brightness(3);
    }
    .hack header h1 sup {
      font-size: 1rem;
    }
    .hack header h1 sup:before {
      content: " ";
    }
    .hack header h2:before,
    .hack section h2:before {
      content: unset;
    }
    .hack header h2,
    .hack section h2 {
      margin-top: .8rem;
      font-size: 1.2em;
    }
    .hack header h2 {
      margin-top: -1rem;
    }
    .hack .install.cta {
      margin-top: -1rem;
      margin-bottom: 2rem;
    }
    .hack .install.cta form[action*="quick-install"] {
      width: unset;
    }
    .hack .install.cta form[action*="quick-install"] button {
      border-radius: 4px;
      color: #ccc;
      background-color: #ff2e8860;
      transition: all 0.25s ease;
    }
    .hack .install.cta form[action*="quick-install"] button:hover,
    .hack .install.cta form[action*="quick-install"] button:focus {
      background-color: #ff2e8880;
      color: #fff;
    }
    .hack .install.cta form[action*="quick-install"] button svg {
      stroke: #ff9800;
    }
    .hack section:not(.capabilities) {
      margin: var(--vertical-rhythm) 0;
    }
    .hack section.hero {
      margin-top: -2rem;
      margin-bottom: 0;
    }
    .hack section.hero figure {
      margin: 0;
      line-height: 0;
      min-height: 266px;
    }
    @media screen and (min-width: 768px) {
      .hack section.hero figure img {
        margin: -3em 0 -2em;
      }
    }
    .hack section.tagline p {
      margin: 0;
      font-size: 1.1rem;
      line-height: 1.6;
    }
    .hack section.capabilities table a {
      display: block;
    }
    .hack footer section.cta {
      margin-top: 6rem;
    }
    .hack footer section.cta a {
      border-bottom: none;
      background-color: inherit;
      color: #ff9800;
      display: inline-block;
    }
    .hack footer section.cta a:hover {
      color: #fff;
    }
    .hack footer section.cta a small {
      display: block;
    }
    .hack footer section.license {
      display: block;
      margin: 3rem;
    }
    .hack footer section.license blockquote {
      margin-top: 3rem;
    }
    .hack footer section.license a {
      border-bottom: none;
      background-color: inherit;
      filter: var(--logo-animation-filter-end);
    }
    .dark table tbody td:first-child {
      color: inherit;
    }
  </style>
{{ end }}
{{ define "main" }}
  <header>
    <h1>{{ .Title }}<sup class="muted">v{{ .Site.Data.npm.latest.version }}</sup></h1>
    <h2 class="muted">Semantic Design System for Hugo</h2>
  </header>
  {{ .Content }}
{{ end }}
{{ define "footer" }}
  {{ partial "powered-by.html" . }}
  {{ partial "cookie-disclaimer.html" . }}
{{ end }}