Merge pull request #550 from Vincevrp/anchor-fix

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,13 @@
   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;
+.anchor-icon {
+  font-size: 0.8em;
 }
 
 .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"><a href="#ukusa"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#vpn"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#wc"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#browser"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#fingerprint"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#webrtc"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#addons"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#about_config"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#email"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#clients"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#messaging"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#search"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#im"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#voip"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#filesharing"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#cloud"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#mycloud"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#sync"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#pw"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#calendar_contacts"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#kdl"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#encrypt"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#darknets"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#social"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#dns"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#notebook"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#paste"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#productivity"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#os"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#live_os"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#mobile_os"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#aaddons"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#firmware"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#win10"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#quotes"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#resources"><i class="fas fa-link anchor-icon"></i></a> 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"><a href="#participate"><i class="fas fa-link anchor-icon"></i></a> 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>
@@ -2491,4 +2374,4 @@ as published by Sam Hocevar."><img alt="WTFPL" src="img/layout/wtfpl.png" style=
     </p>
 
     <p><em>privacytools.io is a socially motivated website that provides information for protecting your data security and privacy. never trust any company with your privacy, always encrypt.</em></p>
-</div>
+</div>