{{ define "header" }}
<style>
.logo {
  width: 4rem;
  margin: 1rem auto;
  display: block;
}
.bread-crumbs {
  box-shadow: 4px 4px var(--b_low);
  border: 1px solid var(--b_low);
  padding: 0.5rem;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-family: monospace;
}
</style>
<div>
  <img class="logo" src="/assets/svg/logo-light.svg">
  <nav class="bread-crumbs">
    {{ range .Breadcrumbs }}
      {{ if .Active }}
        <span style="font-weight: bold;">{{ .Name }}</span>
      {{ else }}
        <a href="{{ .Name }}">{{ .Name }}</a> /
      {{ end }}
    {{ end }}
  </nav>
</div>
{{ end }}