{{- $signal := partial "signal.html" .RelPermalink -}}
<header class="masthead column rise">
  <p class="masthead__title"><a href="{{ "/" | relLangURL }}">{{ site.Title }}</a></p>
  {{- /* Everything that is a control rather than a title, kept in one group
    so the masthead stays a two-part row - name on the left, tools on the
    right - however many of the tools happen to be showing. */}}
  <div class="masthead__tools">
    {{- if and .IsHome site.Params.profile }}
      <a class="masthead__about" href="#about">{{ i18n "about" }}</a>
    {{- end }}
    {{ partial "theme-toggle.html" . }}
    {{- /* Hidden on the real site (display:none in style.scss) and shown
      only under [data-ogcard] - a background-image rather than <img src>
      specifically so that display:none means what it should: a real
      visitor's browser never fetches avatar.jpg here at all, only the
      build-time screenshot (where the [data-ogcard] rule makes it visible
      before the image is ever requested) does. */}}
    {{- with site.Params.profile.avatar }}
      {{- with resources.Get . }}
        <span class="masthead__ogcard-avatar" style="background-image:url('{{ .RelPermalink }}')" aria-hidden="true"></span>
      {{- end }}
    {{- end }}
  </div>
  <div
    class="masthead__signal"
    aria-hidden="true"
    title="{{ i18n "signalTitle" (dict "Hash" $signal.hash) }}"
  >
    <svg viewBox="0 0 1000 100" preserveAspectRatio="none" focusable="false">
      <defs>
        <linearGradient id="signal-ramp" x1="0" y1="0" x2="1" y2="0">
          <stop class="signal-ramp__lead" offset="0" />
          <stop class="signal-ramp__body" offset="0.24" />
          <stop class="signal-ramp__tail" offset="1" />
        </linearGradient>
      </defs>
      <path d="{{ $signal.path }}" pathLength="100" />
    </svg>
  </div>
</header>