<!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: v1.2.0. 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 %}
{% if page.url != "/constitution.html" %}
<a href="{{ site.github.constitution_url }}" class="btn_small">Constitution</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.mastodon_url }}" target="_blank" class="btn_small">Mastodon</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>-->
{% 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: 9FA5 436D 0EE3 6098 5157 3825 17EC A05F 768D EDF6 / 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>