{% load wagtailcore_tags %}

  <header class="dt w-100 bg-grad-blue ph2 ph3-ns ph3-m">
    <div id="logo" class="dtc v-mid">
      <a href="{% slugurl 'home' %}" class="f2-ns f3 fw6 link dim white mr3">Datasketch.io</a>
    </div>
    <nav class="dtc tr fw6 f6 pv3 pv4-ns pv4-m pv4-l ttu tracked">
      <a href="{% slugurl 'blog' %}" class="no-underline dim white mr2 mr3-ns dn dib-l dib-m">Blog</a>
      <a href="{% slugurl 'home' %}#services" class="no-underline dim white mr2 mr3-ns dn dib-l dib-m">Services</a>
      <!-- <a href="{% slugurl 'blog' %}" class="no-underline dim white mr2 mr3-ns dn dib-l dib-m">Portfolio</a> -->
      <a href="{% slugurl 'home' %}#connect" class="hover-bg-orange no-underline white mr2 mr3-ns ba pv2 ph3 br1 dn dib-l dib-m">Connect</a>
      <a href="{% slugurl 'home' %}" class="dib dn-ns w2 h2 pa1 br1 ba b--white-90 grow-large border-box">
        <svg class="link white-90 hover-white" data-icon="skull" viewBox="0 0 32 32" style="fill:currentcolor"><title>
          skull icon</title>
          <path
              d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path>
        </svg>
      </a>
    </nav>
  </header>