<!DOCTYPE html>

<!– gives the lang-attribute the same value as in the corresponding page variable. If that's not set, it uses the global site's configuration and if that isn't set either, it uses 'en' as a default value –> <html lang=“{{ page.lang | default: site.lang | default: ” en “ }}”>

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- Displays the site title as set in the global configuration and then the title of the current page if set -->
<title>{{ site.title | escape }}{% if page.title %} | {{ page.title | escape }}{% endif %}</title>

<!-- Sets an excerpt of the page as the meta description, if that's not possible it uses the site's global description variable -->
<meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">

<!-- Stylesheet for the jQuery UI Library -->
<style media="screen">
  {% include css/vendor/jquery-ui.min.css %}
</style>

<!-- Stylesheet for the site's font from Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">

<!-- The Theme's main stylesheet -->
<link rel="stylesheet" href="{{ "/assets/css/main.css " | relative_url }}">

<link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ " /feed.xml " | relative_url }}">

<!-- The site's favicon -->
<link rel="icon" type="image/png" href="{{ site.favicon }}" sizes="32x32">

<!-- Place for custom html header code such as meta data, custom favicons or a manifest file -->
{% if site.custom-head-html %}
{{ site.custom-head-html }}
{% endif %}

<!-- CSS that overrides the defaults, when the theme user selected custom colors in the site's global configuration -->
{% include custom-styles.html %}

</head>

<body>

<!-- displays the main desktop and the main mobile navigation menu -->
{% include nav.html %}

<!-- displays the header (it shows the the profile/logo image and the site's title and subtitle) -->
<div class="header">
  <div class="header-content">
    <div class="header-left">
      {% if site.profile-image %}
      <a href="{{ "/" | relative_url }}"><div class="profile-image" style="background-image: url('{{ site.profile-image }}')"></div></a>
      {% endif %}
      <div class="header-text">
        <a href="{{ "/" | relative_url }}"><h1>{{ site.title | escape }}</h1></a>
        <a href="{{ "/" | relative_url }}"><p class="sub-title">{{ site.subtitle | escape }}</p></a>
      </div>
    </div>
  </div>
</div>