<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="onion-location" content="{{ site.github.tor_mirror_url }}{{ page.url }}" />
	<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'; base-uri 'self'; form-action 'self'; object-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'">
	<meta http-equiv=”X-XSS-Protection” content=”1">
	<meta http-equiv="Permissions-Policy" content="interest-cohort=()"/>
	<meta name="referrer" content="no-referrer">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ 'assets/css/style.css' }}" id="dark">
    <link rel="stylesheet" href="{{ 'assets/css/light_style.css' }}" media="none" id="light">
    <link rel="shortcut icon" type="image/x-icon" href="media/favicon.ico">
  <script>
    function SetDark() {
      document.getElementById('dark').media = "";
      document.getElementById('light').media = "none";
      themeicon.innerHTML = '<svg height="24px" viewBox="0 0 24 24" width="24px" fill="#FFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg>';
    }
	  
    function SetLight() {
      document.getElementById('light').media = "";
      document.getElementById('dark').media = "none";
      themeicon.innerHTML = '<svg enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26 c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg>';
    }
	  
    window.addEventListener('load', 
    function() { 
      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
	if (localStorage.getItem("theme") == "light") {
          SetLight();
          document.getElementById('switch').checked = true;
	} else {
          SetDark();
          document.getElementById('switch').checked = false;
	}
      } else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
	if (localStorage.getItem("theme") == "dark") {
          SetDark();
          document.getElementById('switch').checked = false;
	} else {
          SetLight();
          document.getElementById('switch').checked = true;
	}
	} else {
          SetDark();
          document.getElementById('switch').checked = false;
      }
    }, false);
    
    function switch_theme(state) {
      if (state) {
	SetLight();
	        localStorage.setItem("theme", "light");
      } else {
        SetDark();
			localStorage.setItem("theme", "dark");
      }
    };
  </script>
  <style>
.theme-switch-wrapper {
  display: inline-block;
  z-index: 100;
  position: absolute;
  right: 0;
  top: -10px;
}

.jswarning {
  display: inline-block;
  border: 1px solid green;
}

.theme-switch-wrapper span {
  margin-right: 2px;
}

.theme-switch {
  display: inline-block;
  height: 25px;
  position: relative;
  width: 40px;
}

.theme-switch input {
  display: none;
}

.slider {
  background: #696969;
  cursor: pointer;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: 0.5s;
}

.slider::before {
  background: #fff;
  bottom: 4px;
  content: '';
  height: 17px;
  left: 4px;
  position: absolute;
  transition: 0.5s;
  width: 17px;
}

input:checked + .slider {
  background: #151515;
}

input:checked + .slider::before {
  transform: translateX(15px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round::before {
  border-radius: 50%;
}

.fas {
  font-size: 30px;
}
  </style>
  <noscript>
    <style>.theme-switch-wrapper {display:none;}</style>
  </noscript>

{% seo %}
  </head>
  <body style="transition: all 0.5s ease;">
    <header>
      <div class="container" style="position: relative;">
        <div class="theme-switch-wrapper">
          <!-- Icon -->
          <span id="toggle-icon">
            <i id="themeicon" class="fas fa-sun"></i>
          </span>
          <!-- Switch -->
          <label class="theme-switch">
            <input type="checkbox" id="switch" onclick="switch_theme(this.checked)">
            <div class="slider round"></div>
          </label>
        </div>
        <a id="a-title">
			<h1>The Hitchhiker’s Guide to Online Anonymity</h1>
        </a>
        <h2>How I learned to start worrying and love <del>privacy</del> anonymity</h2>
		<h4 class="project-version">The latest Version is v1.1.6-pre1 See the <a href="{{ site.github.changelog_url }}" style="color:#ff4700">changelog.</a></h4>
        <section id="downloads">
			{% if page.url != "/" %}
				<a href="{{ site.github.home_url }}" class="btn_small">Home</a>
			{% endif %}
			{% if page.url != "/guide.html" %}
				<a href="{{ site.github.guide_url }}" class="btn_small" style="color:#FF0000">View Online</a>
			{% endif %}
<!--				<a href="{{ site.github.pdf_url }}" class="btn_small">PDF</a>-->
				<!--<a href="{{ site.github.pdf_dark_url }}" class="btn_small">PDF (Dark)</a>-->
<!--				<a href="{{ site.github.odt_url }}" class="btn_small">OpenDocument</a>-->
			{% if page.url != "/donations.html" %}
				<a href="{{ site.github.donations_url }}" class="btn_small">Donate</a>
			{% endif %}
				<a href="{{ site.github.repository_url }}" target="_blank" class="btn_small">Repository</a>
				<!--<a href="{{ site.github.keyoxide_url }}" target="_blank" class="btn_small">Keyoxide</a>-->
				<a rel="me" href="{{ site.github.twitter_url }}" target="_blank" class="btn_small">Twitter</a>
				<a rel="me" href="{{ site.github.mastodon_url }}" target="_blank" class="btn_small">Mastodon</a>
				<!--<a rel="me" href="{{ site.github.mastodon_url }}" target="_blank" class="btn_small">Mastodon</a>-->
			{% if page.url != "/links.html" %}
				<a href="{{ site.github.links_url }}" class="btn_small">Links</a>
			{% endif %}
			{% if page.url != "/about.html" %}
				<a href="{{ site.github.about_url }}" class="btn_small">About</a>
			{% endif %}
        </section>
		<h5>GPG Key Fingerprint: 7DFF D747 1FB7 6E2A 8ABB  BCDD D769 B374 9E93 3B8A / Minisign public key: <a href="{{ site.github.minisign_url }}" style="color:#ff4700">minisign.pub</a></h5>
		<noscript><p class="jswarning">JavaScript is required to toggle light mode. JavaScript is not used for any other purpose.</p></noscript>
      </div>
    </header>
    <div class="container">
      <section id="main_content">
        {{ content }}
      </section>
    </div>
  </body>
</html>
