Replace obsolete anchor tags with .anchor class

css/custom.css

@@ -27,12 +27,6 @@
   line-height: 1.35;
 }
 
-
-
-/* body {
-  padding-bottom: 30px;
-} */
-
 .theme-dropdown .dropdown-menu {
   position: static;
   display: block;
@@ -47,11 +41,9 @@
   width: auto;
 }
 
-a.anchor {
+.anchor:target {
-  display: block; position: relative; top: -50px; visibility: hidden;
+  padding-top: 4rem;
-}
+  margin-top: -4rem;
-a.titleanchor {
-  font-size:0.7em;
 }
 
 .panel-item {

index.html

@@ -75,10 +75,7 @@ layout: default
 
 <!-- Global Mass Surveillance - The Fourteen Eyes -->
 
-<a class="anchor" name="ukusa"></a>
+<h1 id="ukusa" class="anchor">Global Mass Surveillance - The Fourteen Eyes</h1>
-<div class="page-header">
-    <h1><a href="#ukusa" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Global Mass Surveillance - The Fourteen Eyes</h1>
-</div>
 
 <img src="img/layout/UKUSA.png" class="img-responsive float-right" alt="UKUSA Agreement" style="margin-left:10px;">
 
@@ -123,8 +120,7 @@ layout: default
 </div>
 <!-- end Chart of Five Eyes, Nine Eyes, and Fourteen Eyes -->
 
-<a class="anchor" name="usa"></a>
+<h3 id="usa" class="anchor">Why is it not recommended to choose a US based service?</h3>
-<h3>Why is it not recommended to choose a US based service?</h3>
 
 <img src="img/layout/USA.png" class="img-responsive float-right" alt="USA" style="margin-left:10px;">
 
@@ -150,10 +146,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="vpn"></a>
+<h1 id="vpn" class="anchor">VPN providers with extra layers of privacy</h1>
-<div class="page-header">
-    <h1><a href="#vpn" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> VPN providers with extra layers of privacy</h1>
-</div>
 <div class="alert alert-success" role="alert">
     <strong>All providers listed here are outside the US, use encryption, accept Bitcoin, support OpenVPN and have a no logging policy.</strong>
 </div>
@@ -451,10 +444,7 @@ layout: default
 </div>
 
 <!-- warrant canary -->
-<a class="anchor" name="wc"></a>
+<h1 id="wc" class="anchor">What is a warrant canary?</h1>
-<div class="page-header">
-    <h1><a href="#wc" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> What is a warrant canary?</h1>
-</div>
 <img src="img/layout/warrant-canary.jpg" class="img-responsive float-right" alt="Warrant Canary Example" style="margin-left:20px;">
 <p>A warrant canary is a posted document stating that an organization has not received any secret subpoenas during a specific period of time. If this document fails to be updated during the specified time then the user is to assume that the service has
     received such a subpoena and should stop using the service.</p>
@@ -475,10 +465,7 @@ layout: default
 </ul>
 
 <!-- browsers -->
-<a class="anchor" name="browser"></a>
+<h1 id="browser" class="anchor">Browser Recommendation</h1>
-<div class="page-header">
-    <h1><a href="#browser" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Browser Recommendation</h1>
-</div>
 
 <div class="row mb-2">
 
@@ -526,12 +513,7 @@ layout: default
 </div>
 
 <!-- Browser Fingerprint -->
-<a class="anchor" name="fingerprint"></a>
+<h1 id="fingerprint" class="anchor">Browser Fingerprint - Is your browser configuration unique?</h1>
-
-<!-- heading -->
-<div class="page-header">
-    <h1><a href="#fingerprint" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Browser Fingerprint - Is your browser configuration unique?</h1>
-</div>
 
 <!-- yellow warning message about the browser sending unique information -->
 <div class="alert alert-warning" role="alert">
@@ -571,10 +553,7 @@ layout: default
 </ul>
 
 <!-- WebRTC IP Leak Test -->
-<a class="anchor" name="webrtc"></a>
+<h1 id="webrtc" class="anchor">WebRTC IP Leak Test - Is your IP address leaking?</h1>
-<div class="page-header">
-    <h1><a href="#webrtc" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> WebRTC IP Leak Test - Is your IP address leaking?</h1>
-</div>
 
 <!-- red alert message about WebRTC being a new communication protocol... -->
 <div class="alert alert-danger" role="alert">
@@ -630,11 +609,7 @@ layout: default
 
 
 <!-- Firefox add-ons -->
-<a class="anchor" name="addons"></a>
+<h1 id="addons" class="anchor">Excellent Firefox Privacy Add-ons</h1>
-
-<div class="page-header">
-    <h1><a href="#addons" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Excellent Firefox Privacy Add-ons</h1>
-</div>
 
 <div class="alert alert-success" role="alert">
     <strong>Improve your privacy with these excellent Firefox add-ons.</strong>
@@ -719,11 +694,7 @@ layout: default
 
 
 <!-- about:config tweaks for Firefox -->
-<a class="anchor" name="about_config"></a>
+<h1 id="about_config" class="anchor">Firefox: Privacy Related "about:config" Tweaks</h1>
-
-<div class="page-header">
-    <h1><a href="#about_config" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Firefox: Privacy Related "about:config" Tweaks</h1>
-</div>
 
 <div class="alert alert-success" role="alert">This is a collection of privacy related <strong>about:config</strong> tweaks. We'll show you how to enhance the privacy of your Firefox browser.</div>
 
@@ -907,10 +878,7 @@ layout: default
     <li><a href="https://addons.mozilla.org/firefox/addon/privacy-settings/">Privacy Settings</a> - A Firefox addon to alter built-in privacy settings easily with a toolbar panel.</li>
 </ul>
 
-<a class="anchor" name="email"></a>
+<h1 id="email" class="anchor">Privacy-Conscious Email Providers - No Affiliates</h1>
-<div class="page-header">
-    <h1><a href="#email" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Privacy-Conscious Email Providers - No Affiliates</h1>
-</div>
 
 <div class="alert alert-success" role="alert">
     <strong>All providers listed here are operating outside the US and support <a data-toggle="tooltip" data-placement="bottom" data-original-title="When sending or receiving emails, if both the sending and receiving servers support TLS encryption, the email is sent between servers using an encrypted connection.">SMTP TLS.</a> The table is sortable. Never trust any company with your privacy, always encrypt.</strong>
@@ -1133,10 +1101,7 @@ layout: default
         later. During an enquiry on a single mailbox, the Postal Police may have tapped for a whole year every user's private communication going through the server autistici.org/inventati.org.</li>
 </ul>
 
-<a class="anchor" name="clients"></a>
+<h1 id="clients" class="anchor">Email Clients</h1>
-<div class="page-header">
-    <h1><a href="#clients" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Email Clients</h1>
-</div>
 <div class="row mb-2">
 
     {% include card.html color="success"
@@ -1182,10 +1147,7 @@ layout: default
     <li><a href="https://www.mailpile.is/">Mailpile (Beta)</a> - A modern, fast web-mail client with user-friendly encryption and privacy features.</li>
 </ul>
 
-<a class="anchor" name="messaging"></a>
+<h1 id="messaging" class="anchor">Email Alternatives</h1>
-<div class="page-header">
-    <h1><a href="#messaging" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Email Alternatives</h1>
-</div>
 <div class="row mb-2">
 
     {% include card.html color="success"
@@ -1216,10 +1178,7 @@ layout: default
     %}
 </div>
 
-<a class="anchor" name="search"></a>
+<h1 id="search" class="anchor">Privacy Respecting Search Engines</h1>
-<div class="page-header">
-    <h1><a href="#search" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Privacy Respecting Search Engines</h1>
-</div>
 
 <div class="alert alert-warning" role="alert">
     <strong> If you are currently using a search engines like Google, Bing or Yahoo you should pick an alternative here. </strong>
@@ -1278,10 +1237,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="im"></a>
+<h1 id="im" class="anchor">Encrypted Instant Messenger</h1>
-<div class="page-header">
-    <h1><a href="#im" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Encrypted Instant Messenger</h1>
-</div>
 
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using an Instant Messenger like WhatsApp, Viber, LINE, Telegram or Threema you should pick an alternative here.</strong>
@@ -1340,10 +1296,7 @@ layout: default
     <li><a href="https://www.reddit.com/r/privacytoolsIO/comments/6r655i/telegram_isnt_safe/">Telegram is marketed as a private messenger, but it's not private by default.</a></li>
 </ul>
 
-<a class="anchor" name="voip"></a>
+<h1 id="voip" class="anchor">Encrypted Video & Voice Messenger</h1>
-<div class="page-header">
-    <h1><a href="#voip" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Encrypted Video & Voice Messenger</h1>
-</div>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using an Video & Voice Messenger like Skype, Viber or Google Hangouts you should pick an alternative here.</strong>
 </div>
@@ -1394,10 +1347,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="filesharing"></a>
+<h1 id="filesharing" class="anchor">File Sharing</h1>
-<div class="page-header">
-    <h1><a href="#filesharing" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> File Sharing</h1>
-</div>
 <div class="row mb-2">
     {% include card.html color="success"
     title="OnionShare"
@@ -1417,10 +1367,7 @@ layout: default
     %}
 </div>
 
-<a class="anchor" name="cloud"></a>
+<h1 id="cloud" class="anchor">Encrypted Cloud Storage Services</h1>
-<div class="page-header">
-    <h1><a href="#cloud" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Encrypted Cloud Storage Services</h1>
-</div>
 
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using Cloud Storage Services like Dropbox, Google Drive, Microsoft OneDrive or Apple iCloud you should pick an alternative here.</strong>
@@ -1463,10 +1410,7 @@ layout: default
     <li><a href="https://cryptomator.org/">Cryptomator</a> - Free client-side AES encryption for your cloud files. Open source software: No backdoors, no registration.</li>
 </ul>
 
-<a class="anchor" name="mycloud"></a>
+<h1 id="mycloud" class="anchor">Self-Hosted Cloud Server Software</h1>
-<div class="page-header">
-    <h1><a href="#mycloud" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Self-Hosted Cloud Server Software</h1>
-</div>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using a Cloud Storage Services like Dropbox, Google Drive, Microsoft OneDrive or Apple iCloud you should think about hosting it on your own.</strong>
 </div>
@@ -1503,10 +1447,7 @@ layout: default
 <ul>
     <li><a href="http://muonium.io">Muonium</a> - Free encrypted cloud storage for your files.</li>
 </ul>
-<a class="anchor" name="sync"></a>
+<h1 id="sync" class="anchor">Secure File Sync Software</h1>
-<div class="page-header">
-    <h1><a href="#sync" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Secure File Sync Software</h1>
-</div>
 <div class="row mb-2">
 
     {% include card.html color="success"
@@ -1537,10 +1478,7 @@ layout: default
         whether due to limitations in memory, time, or disk space.
     </li>
 </ul>
-<a class="anchor" name="pw"></a>
+<h1 id="pw" class="anchor">Password Manager Software</h1>
-<div class="page-header">
-    <h1><a href="#pw" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Password Manager Software</h1>
-</div>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using a password manager software like 1Password, LastPass, Roboform or iCloud Keychain you should pick an alternative here.</strong>
 </div>
@@ -1597,10 +1535,7 @@ layout: default
     <li><a href="https://www.youtube.com/watch?v=yzGzB-yYKcc">Edward Snowden on Passwords - YouTube</a></li>
 </ul>
 
-<a class="anchor" name="calendar_contacts"></a>
+<h1 id="calendar_contacts" class="anchor">Calendar and Contacts Sync</h1>
-<div class="page-header">
-    <h1><a href="#calendar_contacts" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Calendar and Contacts Sync</h1>
-</div>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using a calendar and or contacts synchronization service like Google Sync or iCloud you should pick an alternative here.</strong>
 </div>
@@ -1649,10 +1584,7 @@ layout: default
 
 
 <!-- Key disclosure law -->
-<a class="anchor" name="kdl"></a>
+<h1 id="kdl" class="anchor">Key disclosure law</h1>
-<div class="page-header">
-    <h1><a href="#kdl" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Key disclosure law</h1>
-</div>
 
 
 <h3>Who is required to hand over the encryption keys to authorities?</h3>
@@ -1714,10 +1646,7 @@ layout: default
     <li><a href="https://www.youtube.com/watch?v=Jt7D4AIfqlQ">DEFCON 20: Crypto and the Cops: the Law of Key Disclosure and Forced Decryption</a></li>
 </ul>
 
-<a class="anchor" name="encrypt"></a>
+<h1 id="encrypt" class="anchor">File Encryption Software</h1>
-<div class="page-header">
-    <h1><a href="#encrypt" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> File Encryption Software</h1>
-</div>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently not using encryption software for your hard disk, emails or file archives you should pick an encryption software here.</strong>
 </div>
@@ -1763,10 +1692,7 @@ layout: default
     <li><a href="https://gitlab.com/cryptsetup/cryptsetup/">Linux Unified Key Setup (LUKS)</a> - A full disk encryption system for Linux using dm-crypt as the disk encryption backend. Included by default in Ubuntu. Available for Windows and Linux.
 </ul>
 
-<a class="anchor" name="darknets"></a>
+<h1 id="darknets" class="anchor">Self-contained Networks</h1>
-<div class="page-header">
-    <h1><a href="#darknets" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Self-contained Networks</h1>
-</div>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently browsing <a href="https://en.wikipedia.org/wiki/Surface_Web">clearnet</a> and want to access the <a href="https://en.wikipedia.org/wiki/Dark_web">dark web</a>, this section is for you.</strong>
 </div>
@@ -1811,10 +1737,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="social"></a>
+<h1 id="social" class="anchor">Decentralized Social Networks</h1>
-<div class="page-header">
-    <h1><a href="#social" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Decentralized Social Networks</h1>
-</div>
 <div class="alert alert-warning" role="alert">
     <strong> If you are currently using Social Networks like Facebook, Twitter or Google+, you should pick an alternative here. </strong>
 </div>
@@ -1860,10 +1783,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="dns"></a>
+<h1 id="dns" class="anchor">Domain Name System (DNS)</h1>
-<div class="page-header">
-    <h1><a href="#dns" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Domain Name System (DNS)</h1>
-</div>
 
 <div class="row mb-2">
 
@@ -1900,10 +1820,7 @@ layout: default
     <li><a href="https://pi-hole.net/">Pi-hole</a> - A network-wide DNS server for the Raspberry Pi.  Blocks advertising and tracking domains for all devices on your network.</li>
 </ul>
 
-<a class="anchor" name="notebook"></a>
+<h1 id="notebook" class="anchor">Digital Notebook</h1>
-<div class="page-header">
-    <h1><a href="#notebook" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Digital Notebook</h1>
-</div>
 
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using an application like Evernote, Google Keep or Microsoft OneNote you should pick an alternative here.</strong>
@@ -1944,10 +1861,7 @@ layout: default
     <li><a href="https://orgmode.org">Org-mode</a> - A major mode for GNU Emacs. Org-mode is for keeping notes, maintaining TODO lists, planning projects, and authoring documents with a fast and effective plain-text system. </li>
 </ul>
 
-<a class="anchor" name="paste"></a>
+<h1 id="paste" class="anchor">Paste Services</h1>
-<div class="page-header">
-<h1><a href="#paste" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Paste Services</h1>
-</div>
 
 <div class="row mb-2">
 
@@ -1982,10 +1896,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="productivity"></a>
+<h1 id="productivity" class="anchor">Productivity Tools</h1>
-<div class="page-header">
-    <h1><a href="#productivity" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Productivity Tools</h1>
-</div>
 <div class="row mb-2">
 
     {% include card.html color="success"
@@ -2024,10 +1935,7 @@ layout: default
 
 
 
-<a class="anchor" name="os"></a>
+<h1 id="os" class="anchor">PC Operating Systems</h1>
-<div class="page-header">
-    <h1><a href="#os" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> PC Operating Systems</h1>
-</div>
 <div class="alert alert-warning" role="alert">
     <strong>If you are currently using a operating system like Microsoft Windows or Apple macOS you should pick an alternative here.</strong>
 </div>
@@ -2074,10 +1982,7 @@ layout: default
         By default, it anonymizes Internet traffic by sending it through the Tor network. Note: It is still in alpha, and much testing and bug fixing still has to be done.</li>
 </ul>
 
-<a class="anchor" name="live_os"></a>
+<h1 id="live_os" class="anchor">Live CD Operating Systems</h1>
-<div class="page-header">
-    <h1><a href="#live_os" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Live CD Operating Systems</h1>
-</div>
 <div class="row mb-2">
 
     {% include card.html color="success"
@@ -2108,10 +2013,7 @@ layout: default
     <li><a href="http://distro.ibiblio.org/tinycorelinux/">Tiny Core Linux</a> - A minimal Linux operating system focusing on providing a base system using BusyBox and FLTK. The distribution is notable for its size (15 MB) and minimalism, with additional functionality
         provided by extensions.</li>
 </ul>
-<a class="anchor" name="mobile_os"></a>
+<h1 id="mobile_os" class="anchor">Mobile Operating Systems</h1>
-<div class="page-header">
-    <h1><a href="#mobile_os" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Mobile Operating Systems</h1>
-</div>
 <!-- alert message about GApps -->
 <div class="alert alert-warning" role="alert">
     <strong>Even though the source code of the following OS is provided, installing Google Apps may compromise your setup. The MicroG project can serve as a FLOSS replacement, depending on your threat model.</strong>
@@ -2141,11 +2043,7 @@ layout: default
 </ul>
 
 <!-- Android add-ons -->
-<a class="anchor" name="aaddons"></a>
+<h1 id="aaddons" class="anchor">Android Privacy Add-ons</h1>
-
-<div class="page-header">
-    <h1><a href="#aaddons" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Android Privacy Add-ons</h1>
-</div>
 
 <div class="alert alert-success" role="alert">
     <strong>Improve your privacy with these add-ons for Android.</strong>
@@ -2170,10 +2068,7 @@ layout: default
 </p>
 
 
-<a class="anchor" name="firmware"></a>
+<h1 id="firmware" class="anchor">Open Source Router Firmware</h1>
-<div class="page-header">
-    <h1><a href="#firmware" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Open Source Router Firmware</h1>
-</div>
 <div class="row mb-2">
 
     {% include card.html color="success"
@@ -2206,10 +2101,7 @@ layout: default
 </ul>
 
 
-<a class="anchor" name="win10"></a>
+<h1 id="win10" class="anchor">Don't use Windows 10 - It's a privacy nightmare</h1>
-<div class="page-header">
-    <h1><a href="#win10" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Don't use Windows 10 - It's a privacy nightmare</h1>
-</div>
 
 <div class="alert alert-warning" role="alert">
     <strong>Microsoft introduced a lot of new features in Windows 10 such as Cortana. However, most of them are violating your privacy.</strong>
@@ -2320,10 +2212,7 @@ layout: default
                     </div>
                 </div>
 
-    <a class="anchor" name="quotes"></a>
+                <h1 id="quotes" class="anchor">Quotes</h1>
-    <div class="page-header">
-        <h1><a href="#quotes" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Quotes</h1>
-    </div>
 
     <blockquote>
         <p>Arguing that you don't care about the right to privacy because you have nothing to hide is no different than saying you don't care about free speech because you have nothing to say.</p>
@@ -2343,10 +2232,7 @@ layout: default
         <footer>Glenn Greenwald in <cite title="Glenn Greenwald On Why Privacy Is Vital, Even If You 'Have Nothing To Hide"><a href="http://www.huffingtonpost.com/2014/06/20/glenn-greenwald-privacy_n_5509704.html">Huffington Post</a></cite></footer>
     </blockquote>
 
-    <a class="anchor" name="resources"></a>
+    <h1 id="resources" class="anchor">Recommended Privacy Resources</h1>
-    <div class="page-header">
-        <h1><a href="#resources" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Recommended Privacy Resources</h1>
-    </div>
 
 
     <h3>Guides</h3>
@@ -2384,10 +2270,7 @@ layout: default
         <li><a href="https://addons.mozilla.org/en-US/firefox/addon/block-cloudflare-mitm-attack/"><strong>Block Cloudflare MiTM Attack</strong></a> - Firefox add-on to detect and block corporate MITM attack.
     </ul>
 
-    <a class="anchor" name="participate"></a>
+    <h1 id="participate" class="anchor">Spread the word and help your friends</h1>
-    <div class="page-header">
-        <h1><a href="#participate" class="titleanchor"><span class="glyphicon glyphicon-link"></span></a> Spread the word and help your friends</h1>
-    </div>
 
     <a href="mailto:?subject=privacytools.io%20-%20encryption%20against%20global%20mass%20surveillance&body=https://www.privacytools.io/" class="share-btn email" title="Email">
         <i class="fa fa-envelope"></i>