<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above meta tags *must* come first in the head; any other head content must come *after* these tags -->
    {% if page.title %}
    <title>{{ page.title }} | {{ site.title }}</title>
    {% else %}
    <title>{{ site.title }}</title>
    {% endif %}

    {% seo title=false %}

    <!-- favicons -->
    <link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/img/favicon-16x16.png" id="light1">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ site.baseurl }}/img/favicon-32x32.png" id="light2">
    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{{ site.baseurl }}/img/apple-touch-icon.png" id="light3">
    <link rel="apple-touch-icon" type="image/png" sizes="120x120" href="{{ site.baseurl }}/img/apple-touch-icon-120x120.png" id="light4">
    <link rel="apple-touch-icon" type="image/png" sizes="76x76" href="{{ site.baseurl }}/img/apple-touch-icon-76x76.png" id="light5">
    <link rel="apple-touch-icon" type="image/png" sizes="60x60" href="{{ site.baseurl }}/img/apple-touch-icon-60x60.png" id="light6">
    <!-- dark mode favicons -->
    <link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/img/favicon-16x16-dark.png" id="dark1">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ site.baseurl }}/img/favicon-32x32-dark.png" id="dark2">
    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{{ site.baseurl }}/img/apple-touch-icon-dark.png" id="dark3">
    <link rel="apple-touch-icon" type="image/png" sizes="120x120" href="{{ site.baseurl }}/img/apple-touch-icon-120x120-dark.png" id="dark4">
    <link rel="apple-touch-icon" type="image/png" sizes="76x76" href="{{ site.baseurl }}/img/apple-touch-icon-76x76-dark.png" id="dark5">
    <link rel="apple-touch-icon" type="image/png" sizes="60x60" href="{{ site.baseurl }}/img/apple-touch-icon-60x60-dark.png" id="dark6">

    <script>
      // Switch to the dark-mode favicons if prefers-color-scheme: dark
      function onUpdate() {
        light1 = document.querySelector('link#light1');
        light2 = document.querySelector('link#light2');
        light3 = document.querySelector('link#light3');
        light4 = document.querySelector('link#light4');
        light5 = document.querySelector('link#light5');
        light6 = document.querySelector('link#light6');

        dark1 = document.querySelector('link#dark1');
        dark2 = document.querySelector('link#dark2');
        dark3 = document.querySelector('link#dark3');
        dark4 = document.querySelector('link#dark4');
        dark5 = document.querySelector('link#dark5');
        dark6 = document.querySelector('link#dark6');

        if (matcher.matches) {
          light1.remove();
          light2.remove();
          light3.remove();
          light4.remove();
          light5.remove();
          light6.remove();
          document.head.append(dark1);
          document.head.append(dark2);
          document.head.append(dark3);
          document.head.append(dark4);
          document.head.append(dark5);
          document.head.append(dark6);
        } else {
          dark1.remove();
          dark2.remove();
          dark3.remove();
          dark4.remove();
          dark5.remove();
          dark6.remove();
          document.head.append(light1);
          document.head.append(light2);
          document.head.append(light3);
          document.head.append(light4);
          document.head.append(light5);
          document.head.append(light6);
        }
      }
      matcher = window.matchMedia('(prefers-color-scheme: dark)');
      matcher.addListener(onUpdate);
      onUpdate();
    </script>

    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">

    <link href="{{ site.baseurl }}/css/main.css" rel="stylesheet">
    <link href="{{ site.baseurl }}/css/syntax.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    {% if jekyll.environment == 'production' %}
    {% include analytics.html %}
    {% endif %}
  </head>