<head>
  <meta charset="utf-8">
  <title>{{ .Title }}</title>

  {{ "<!-- mobile responsive meta -->" | safeHTML }}
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="{{ with .Params.Description }}{{ . }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}">
  {{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
  {{ hugo.Generator }}

  {{ "<!-- plugins -->" | safeHTML }}
  {{ range .Site.Params.plugins.css }}
  <link rel="stylesheet" href="{{ .link | absURL }}">
  {{ end }}

  {{ "<!-- Main Stylesheet -->" | safeHTML }}
  {{ $styles := resources.Get "scss/style.scss" | toCSS }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">

  {{ "<!--Favicon-->" | safeHTML }}
  <link rel="shortcut icon" href="{{ `media/favicon.png` | absURL }}" type="image/x-icon">
  <link rel="icon" href="{{ `media/favicon.png` | absURL }}" type="image/x-icon">

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>

  <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

<style>
  #map {
    height: 500px;
    border: 1px solid #aaa;
    border-radius: 15px;
  }
</style>

</head>