<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {{ $styleBulma := resources.Get "css/bulma.min.css" }}
  {{ $styleCustom := resources.Get "css/custom.css" }}
  <link rel="stylesheet" href="{{ $styleBulma.Permalink }}">
  <link rel="stylesheet" href="{{ $styleCustom.Permalink }}">
  <!-- RSS feed -->
  {{ range .AlternativeOutputFormats -}}
    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
  {{ end -}}

  <!-- tbh I am too lazy to extend Bulma, so put dirty CSS directives here to be able to use Hugo templating system -->
  <style>
    /* Default to home image */
    {{ $image := resources.Get "img/home.jpg" }}
    /* If header image exists in current context, use it instead */
    {{ with .Resources.GetMatch "top.jpg" }}
      {{ $image = . }}
    {{ end }}
    {{ $image = $image.Resize "3000x" }}
    .has-bg-img { background: url('{{ $image.Permalink }}')center center; background-size:cover; }
  </style>
  <!-- Favico -->
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
  <link rel="icon" sizes="196x196" href="/favicon-196.png" type="image/png">
  <meta name="msapplication-TileImage" content="favicon-144.png">
  <meta name="msapplication-TileColor" content="#FFFFFF">
  <title>{{ .Site.Title }}</title>
</head>
