Use SRI

Gemfile

@@ -1,11 +1,26 @@
 source "https://rubygems.org"
 
-# Install github-pages gem (https://jekyllrb.com/docs/github-pages/)
-gem "github-pages", group: :jekyll_plugins
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "~> 3.8.5"
 
-# Plugins
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+gem "minima", "~> 2.0"
+
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+
+# If you have any plugins, put them here!
 group :jekyll_plugins do
-  # example: gem "jekyll-feed", "~> 0.6"
+  gem "jekyll-feed", "~> 0.6"
+  gem "jekyll-sitemap", "~> 1.4"
 end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
@@ -13,4 +28,3 @@ gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 
 # Performance-booster for watching directories on Windows
 gem "wdm", "~> 0.1.0" if Gem.win_platform?
-

Gemfile.lock

@@ -1,89 +1,16 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (4.2.11.1)
-      i18n (~> 0.7)
-      minitest (~> 5.1)
-      thread_safe (~> 0.3, >= 0.3.4)
-      tzinfo (~> 1.1)
     addressable (2.6.0)
       public_suffix (>= 2.0.2, < 4.0)
-    coffee-script (2.4.1)
-      coffee-script-source
-      execjs
-    coffee-script-source (1.11.1)
     colorator (1.1.0)
-    commonmarker (0.17.13)
-      ruby-enum (~> 0.5)
     concurrent-ruby (1.1.5)
-    dnsruby (1.61.3)
-      addressable (~> 2.5)
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
-    ethon (0.12.0)
-      ffi (>= 1.3.0)
     eventmachine (1.2.7)
-    execjs (2.7.0)
-    faraday (0.15.4)
-      multipart-post (>= 1.2, < 3)
     ffi (1.11.1)
     forwardable-extended (2.6.0)
-    gemoji (3.0.1)
-    github-pages (198)
-      activesupport (= 4.2.11.1)
-      github-pages-health-check (= 1.16.1)
-      jekyll (= 3.8.5)
-      jekyll-avatar (= 0.6.0)
-      jekyll-coffeescript (= 1.1.1)
-      jekyll-commonmark-ghpages (= 0.1.5)
-      jekyll-default-layout (= 0.1.4)
-      jekyll-feed (= 0.11.0)
-      jekyll-gist (= 1.5.0)
-      jekyll-github-metadata (= 2.12.1)
-      jekyll-mentions (= 1.4.1)
-      jekyll-optional-front-matter (= 0.3.0)
-      jekyll-paginate (= 1.1.0)
-      jekyll-readme-index (= 0.2.0)
-      jekyll-redirect-from (= 0.14.0)
-      jekyll-relative-links (= 0.6.0)
-      jekyll-remote-theme (= 0.3.1)
-      jekyll-sass-converter (= 1.5.2)
-      jekyll-seo-tag (= 2.5.0)
-      jekyll-sitemap (= 1.2.0)
-      jekyll-swiss (= 0.4.0)
-      jekyll-theme-architect (= 0.1.1)
-      jekyll-theme-cayman (= 0.1.1)
-      jekyll-theme-dinky (= 0.1.1)
-      jekyll-theme-hacker (= 0.1.1)
-      jekyll-theme-leap-day (= 0.1.1)
-      jekyll-theme-merlot (= 0.1.1)
-      jekyll-theme-midnight (= 0.1.1)
-      jekyll-theme-minimal (= 0.1.1)
-      jekyll-theme-modernist (= 0.1.1)
-      jekyll-theme-primer (= 0.5.3)
-      jekyll-theme-slate (= 0.1.1)
-      jekyll-theme-tactile (= 0.1.1)
-      jekyll-theme-time-machine (= 0.1.1)
-      jekyll-titles-from-headings (= 0.5.1)
-      jemoji (= 0.10.2)
-      kramdown (= 1.17.0)
-      liquid (= 4.0.0)
-      listen (= 3.1.5)
-      mercenary (~> 0.3)
-      minima (= 2.5.0)
-      nokogiri (>= 1.8.5, < 2.0)
-      rouge (= 2.2.1)
-      terminal-table (~> 1.4)
-    github-pages-health-check (1.16.1)
-      addressable (~> 2.3)
-      dnsruby (~> 1.60)
-      octokit (~> 4.0)
-      public_suffix (~> 3.0)
-      typhoeus (~> 1.3)
-    html-pipeline (2.12.0)
-      activesupport (>= 2)
-      nokogiri (>= 1.4)
     http_parser.rb (0.6.0)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
@@ -100,97 +27,16 @@ GEM
       pathutil (~> 0.9)
       rouge (>= 1.7, < 4)
       safe_yaml (~> 1.0)
-    jekyll-avatar (0.6.0)
-      jekyll (~> 3.0)
-    jekyll-coffeescript (1.1.1)
-      coffee-script (~> 2.2)
-      coffee-script-source (~> 1.11.1)
-    jekyll-commonmark (1.3.1)
-      commonmarker (~> 0.14)
-      jekyll (>= 3.7, < 5.0)
-    jekyll-commonmark-ghpages (0.1.5)
-      commonmarker (~> 0.17.6)
-      jekyll-commonmark (~> 1)
-      rouge (~> 2)
-    jekyll-default-layout (0.1.4)
-      jekyll (~> 3.0)
     jekyll-feed (0.11.0)
       jekyll (~> 3.3)
-    jekyll-gist (1.5.0)
-      octokit (~> 4.2)
-    jekyll-github-metadata (2.12.1)
-      jekyll (~> 3.4)
-      octokit (~> 4.0, != 4.4.0)
-    jekyll-mentions (1.4.1)
-      html-pipeline (~> 2.3)
-      jekyll (~> 3.0)
-    jekyll-optional-front-matter (0.3.0)
-      jekyll (~> 3.0)
-    jekyll-paginate (1.1.0)
-    jekyll-readme-index (0.2.0)
-      jekyll (~> 3.0)
-    jekyll-redirect-from (0.14.0)
-      jekyll (~> 3.3)
-    jekyll-relative-links (0.6.0)
-      jekyll (~> 3.3)
-    jekyll-remote-theme (0.3.1)
-      jekyll (~> 3.5)
-      rubyzip (>= 1.2.1, < 3.0)
     jekyll-sass-converter (1.5.2)
       sass (~> 3.4)
     jekyll-seo-tag (2.5.0)
       jekyll (~> 3.3)
-    jekyll-sitemap (1.2.0)
-      jekyll (~> 3.3)
-    jekyll-swiss (0.4.0)
-    jekyll-theme-architect (0.1.1)
-      jekyll (~> 3.5)
-      jekyll-seo-tag (~> 2.0)
-    jekyll-theme-cayman (0.1.1)
-      jekyll (~> 3.5)
-      jekyll-seo-tag (~> 2.0)
-    jekyll-theme-dinky (0.1.1)
-      jekyll (~> 3.5)
-      jekyll-seo-tag (~> 2.0)
-    jekyll-theme-hacker (0.1.1)
-      jekyll (~> 3.5)
-      jekyll-seo-tag (~> 2.0)
-    jekyll-theme-leap-day (0.1.1)
-      jekyll (~> 3.5)
-      jekyll-seo-tag (~> 2.0)
-    jekyll-theme-merlot (0.1.1)
-      jekyll (~> 3.5)
-      jekyll-seo-tag (~> 2.0)
-    jekyll-theme-midnight (0.1.1)
-      jekyll (~> 3.5)
-      jekyll-seo-tag (~> 2.0)
-    jekyll-theme-minimal (0.1.1)
-      jekyll (~> 3.5)
-      jekyll-seo-tag (~> 2.0)
-    jekyll-theme-modernist (0.1.1)
-      jekyll (~> 3.5)
-      jekyll-seo-tag (~> 2.0)
-    jekyll-theme-primer (0.5.3)
-      jekyll (~> 3.5)
-      jekyll-github-metadata (~> 2.9)
-      jekyll-seo-tag (~> 2.0)
-    jekyll-theme-slate (0.1.1)
-      jekyll (~> 3.5)
-      jekyll-seo-tag (~> 2.0)
-    jekyll-theme-tactile (0.1.1)
-      jekyll (~> 3.5)
-      jekyll-seo-tag (~> 2.0)
-    jekyll-theme-time-machine (0.1.1)
-      jekyll (~> 3.5)
-      jekyll-seo-tag (~> 2.0)
-    jekyll-titles-from-headings (0.5.1)
-      jekyll (~> 3.3)
+    jekyll-sitemap (1.4.0)
+      jekyll (>= 3.7, < 5.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    jemoji (0.10.2)
-      gemoji (~> 3.0)
-      html-pipeline (~> 2.2)
-      jekyll (~> 3.0)
     kramdown (1.17.0)
     liquid (4.0.0)
     listen (3.1.5)
@@ -198,17 +44,10 @@ GEM
       rb-inotify (~> 0.9, >= 0.9.7)
       ruby_dep (~> 1.2)
     mercenary (0.3.6)
-    mini_portile2 (2.4.0)
     minima (2.5.0)
       jekyll (~> 3.5)
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
-    minitest (5.11.3)
-    multipart-post (2.1.1)
-    nokogiri (1.10.8)
-      mini_portile2 (~> 2.4.0)
-    octokit (4.14.0)
-      sawyer (~> 0.8.0, >= 0.5.3)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     public_suffix (3.1.1)
@@ -216,34 +55,23 @@ GEM
     rb-inotify (0.10.0)
       ffi (~> 1.0)
     rouge (2.2.1)
-    ruby-enum (0.7.2)
-      i18n
     ruby_dep (1.5.0)
-    rubyzip (2.0.0)
     safe_yaml (1.0.5)
     sass (3.7.4)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sawyer (0.8.2)
-      addressable (>= 2.3.5)
-      faraday (> 0.8, < 2.0)
-    terminal-table (1.8.0)
-      unicode-display_width (~> 1.1, >= 1.1.1)
-    thread_safe (0.3.6)
-    typhoeus (1.3.1)
-      ethon (>= 0.9.0)
-    tzinfo (1.2.5)
-      thread_safe (~> 0.1)
-    unicode-display_width (1.6.0)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  github-pages
+  jekyll (~> 3.8.5)
+  jekyll-feed (~> 0.6)
+  jekyll-sitemap (~> 1.4)
+  minima (~> 2.0)
   tzinfo-data
 
 BUNDLED WITH
-   2.0.1
+   2.1.4

_config.yml

@@ -3,6 +3,7 @@ name: PrivacyTools
 description: You are being watched. PrivacyTools provides knowledge, encryption, and software recommendations to protect you against global mass surveillance.
 url: "https://www.privacytools.io"
 production_url: "https://www.privacytools.io"
+pull_cdn: "https://cdn.privacytools.io"
 sass:
   style: compressed
 plugins:

_includes/badge.html

@@ -1,6 +1,6 @@
 {% if include.link %}
 <a
-  href="{{ link }}" class="badge badge-{{ include.color | default: "info" }}"
+  href="{{ include.link }}" class="badge badge-{{ include.color | default: "info" }}"
   {% if include.tooltip %}
   data-toggle="tooltip"
   title="{{ include.tooltip }}"><i class="{{ include.icon | default: "far fa-question-circle"}}"></i> {{ include.text }}

_includes/card.html

@@ -56,7 +56,7 @@
                 </a>
                 {% endif %}
                 {% if include.tor %}
-                <a class="mb-1" data-toggle="tooltip" data-placement="bottom" data-original-title="{{include.tor}} Requires specific software to access: torproject.org" href="{{include.tor}}"><img alt="Tor" src="/assets/img/layout/tor.png" width="35" height="35"></a>
+                <a class="mb-1" data-toggle="tooltip" data-placement="bottom" data-original-title="{{include.tor}} Requires specific software to access: torproject.org" href="{{include.tor}}"><img alt="Tor" src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/layout/tor.png" width="35" height="35"></a>
                 {% endif %}
 
                 {% if include.git %}

_includes/cardv2.html

@@ -29,7 +29,7 @@
   <div class="card-body">
     <p class="card-text">
       <img
-        src="{{include.image}}"
+        src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}{{include.image}}"
         {% if include.image-dark %}
         data-theme-src="{{include.image-dark}}"
         {% endif %}

_includes/head.html

@@ -6,6 +6,8 @@
   <meta name="keywords" content="privacy, anonymity, privacy tools, surveillance, encryption">
   <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
   <link rel="canonical" href="{{ site.production_url }}{{ page.url | replace:'index.html',''}}">
+  <link rel="preconnect" href="https://cdn.privacytools.io/" crossorigin>
+  <link rel="dns-prefetch" href="https://cdn.privacytools.io/">
 
   <!-- title -->
   {% if page.title %}
@@ -48,18 +50,18 @@
   {% endif %}
 
   <!-- icons -->
-  <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/png/favicons/apple-touch-icon.png?v=2">
-  <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/png/favicons/favicon-32x32.png?v=2">
-  <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/png/favicons/favicon-16x16.png?v=2">
-  <link rel="manifest" href="/assets/img/png/favicons/site.webmanifest?v=2">
-  <link rel="mask-icon" href="/assets/img/png/favicons/safari-pinned-tab.svg?v=2" color="#3498db">
-  <link rel="shortcut icon" href="/assets/img/png/favicons/favicon.ico?v=2">
+  <link rel="apple-touch-icon" sizes="180x180" href="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/png/favicons/apple-touch-icon.png?v=2">
+  <link rel="icon" type="image/png" sizes="32x32" href="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/png/favicons/favicon-32x32.png?v=2">
+  <link rel="icon" type="image/png" sizes="16x16" href="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/png/favicons/favicon-16x16.png?v=2">
+  <link rel="manifest" href="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/png/favicons/site.webmanifest?v=2">
+  <link rel="mask-icon" href="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/png/favicons/safari-pinned-tab.svg?v=2" color="#3498db">
+  <link rel="shortcut icon" href="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/png/favicons/favicon.ico?v=2">
   <meta name="msapplication-TileColor" content="#3498db">
-  <meta name="msapplication-config" content="/assets/img/png/favicons/browserconfig.xml?v=2">
+  <meta name="msapplication-config" content="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/png/favicons/browserconfig.xml?v=2">
   <meta name="theme-color" content="#ffffff">
 
 
   <!-- CSS stylesheets -->
-  <link href="/assets/css/style.css?v=9" rel="stylesheet">
-  <link id="dark-css" href="/assets/css/dark.css?v=4" rel="stylesheet" media="(prefers-color-scheme: dark)">
+  <link href="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/css/style.css?v=9" rel="stylesheet" integrity="sha384-qBP5Bbk7h5voX7+I9CM6Vy0HQpm+PWHRXZy2Ut/52+S3WmuBw3YWNyoeI/QRGWv4" crossorigin="anonymous">
+  <link id="dark-css" href="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/css/dark.css?v=4" rel="stylesheet" media="(prefers-color-scheme: dark)" integrity="sha384-V2UIGW0+AbgQZL/bmWAM8pRXghNGm/IvTD/yeSAsMLpsz3D+0MnYvKZ7h6Udng9x" crossorigin="anonymous">
 </head>

_includes/nav.html

@@ -2,7 +2,7 @@
   <div id="navbar" class="d-flex flex-wrap justify-content-between align-items-center">
     <div class="w-50">
       <a id="nav-home-mobile" class="nav-anchor" href="/">
-        <img src="/assets/img/svg/layout/brand/horizontal.svg" width="150px" />
+        <img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/layout/brand/horizontal.svg" width="150px" />
       </a>
     </div>
     <input type="checkbox" id="nav-toggle" checked />

_includes/scripts.html

@@ -1,8 +1,8 @@
-<script src="/assets/js/jquery-3.3.1.min.js?v=4"></script>
-<script src="/assets/js/popper.min.js?v=4"></script>
-<script src="/assets/js/bootstrap.min.js?v=4"></script>
-<script src="/assets/js/sortable.min.js?v=4"></script>
-<script src="/assets/js/main.js?v=5"></script>
+<script src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/js/jquery-3.3.1.min.js?v=4" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
+<script src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/js/popper.min.js?v=4" integrity="sha384-yipEjruz9xikSpiIi+F8+G+OvmOYvx/hY06pr3eA26265pJ8+Lbc3sZ2uBgBG7b7" crossorigin="anonymous"></script>
+<script src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/js/bootstrap.min.js?v=4" integrity="sha384-uz42m69OOLo5hnP147/k7qYaV16ebylNguXL8G7Z/iBMtapgaUSOwgo/9MopjS46" crossorigin="anonymous"></script>
+<script src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/js/sortable.min.js?v=4" integrity="sha384-tukxl0r6OP6AB7mHv3RINgYu4i6IvHr1bdnypIcYez2WQzZKq08BXyFEZCW//Juc" crossorigin="anonymous"></script>
+<script src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/js/main.js?v=5" integrity="sha384-7Cn7Co5qrN1jU/2wfO5Kn0M/FR/UtrkM1+rLAEIUteTqmzgMPLXjm9H2c5NsnSxp" crossorigin="anonymous"></script>
 
 <!--
   Matomo is the leading open-source analytics platform:

_includes/sections/android-addons.html

@@ -4,7 +4,7 @@
 
   <div class="row mb-2">
     <div class="col-lg-3 col-sm-12 pt-lg-5">
-      <img src="/assets/img/png/3rd-party/netguard.png" height="70" width="70" class="img-fluid d-block mr-auto ml-auto align-middle" alt="NetGuard">
+      <img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/png/3rd-party/netguard.png" height="70" width="70" class="img-fluid d-block mr-auto ml-auto align-middle" alt="NetGuard">
     </div>
     <div class="col">
     <h3>Control your traffic with <a href="https://www.netguard.me/">NetGuard</a></h3>
@@ -14,7 +14,7 @@
 
   <div class="row mb-2">
     <div class="col-lg-3 col-sm-12 pt-lg-5">
-      <img src="/assets/img/svg/3rd-party/orbot.svg" height="70" width="70" class="img-fluid d-block mr-auto ml-auto align-middle" alt="Orbot">
+      <img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/orbot.svg" height="70" width="70" class="img-fluid d-block mr-auto ml-auto align-middle" alt="Orbot">
     </div>
     <div class="col">
     <h3>Tor for Android with <a href="https://guardianproject.info/apps/orbot/">Orbot</a></h3>

_includes/sections/browser-recommendation.html

@@ -84,12 +84,13 @@ android="https://www.bromite.org/#download-bromite"
   <li>
     <a href="https://www.stoutner.com/privacy-browser/">Privacy Browser</a>
     - An open-source web browser focused on user privacy. Features include integrated ad blocking with <a href="https://easylist.to/">EasyList</a>, <a href="https://www.stoutner.com/privacy-browser-2-5/">SSL certificate pinning</a>, and <a href='https://guardianproject.info/apps/orbot/'>Tor Orbot proxy support.</a>
-    <a href="https://play.google.com/store/apps/details?id=com.google.android.webview&hl=en_US">
-      <span class="badge badge-warning" data-toggle="tooltip" title="Privacy Browser relies on the Android System WebView which needs to be kept up to date to fix security issues. One can update WebView by either installing it from Google Play or Aurora Store which you can get from F-Droid.">
-        <span class="fas fa-exclamation-triangle"></span>
-        Keep Android WebView up-to-date
-      </span>
-    </a>
+    {% include badge.html
+    color="warning"
+    icon="fas fa-exclamation-triangle"
+    link="https://play.google.com/store/apps/details?id=com.google.android.webview"
+    tooltip="Privacy Browser relies on the Android System WebView which needs to be kept up to date to fix security issues. One can update WebView by either installing it from Google Play or Aurora Store which you can get from F-Droid."
+    text="Keep WebView up-to-date"
+    %}
   </li>
 </ul>
 

_includes/sections/cloud-storage.html

@@ -4,25 +4,6 @@
   <strong>If you are currently using Dropbox, Google Drive, Microsoft OneDrive or Apple iCloud, you should pick an alternative here.</strong>
 </div>
 
-{%
-  include cardv2.html
-  title="Keybase KBFS"
-  image="/assets/img/svg/3rd-party/keybase.svg"
-  description='Keybase provides 250GB of E2EE cloud storage for free. Its protocol has also been <a href="https://keybase.io/docs-assets/blog/NCC_Group_Keybase_KB2018_Public_Report_2019-02-27_v1.3.pdf">indepedently audited (PDF)</a>. Keybase allows you to share files with any Keybase user, or social media user through the use of "<a href="https://en.wikipedia.org/wiki/Keybase#Identity_proofs">identity proofs</a>". They currently do not offer additional space above your quota.'
-  labels="color==warning::icon==fas fa-exclamation-triangle::link==https://github.com/keybase/client/issues/6374::text==Warning::tooltip==This software relies on a closed-source central server."
-  website="https://book.keybase.io/docs/files"
-  privacy-policy="https://keybase.io/docs/privacypolicy"
-  forum="https://forum.privacytools.io/t/discussion-keybase/1224"
-  tor="http://keybase5wmilwokqirssclfnsqrjdsi7jdir5wy7y7iu3tanwmtp6oid.onion/"
-  github="https://github.com/keybase/client/tree/master/go/kbfs"
-  windows="https://keybase.io/docs/the_app/install_windows"
-  mac="https://keybase.io/docs/the_app/install_macos"
-  linux="https://keybase.io/docs/the_app/install_linux"
-  freebsd="https://www.freshports.org/security/keybase/"
-  googleplay="https://play.google.com/store/apps/details?id=io.keybase.ossifrage"
-  ios="https://apps.apple.com/app/keybase-crypto-for-everyone/id1044461770"
-%}
-
 {% include cardv2.html
   title="Nextcloud - Choose your hoster"
   image="/assets/img/svg/3rd-party/nextcloud.svg"
@@ -43,6 +24,25 @@
   github="https://github.com/nextcloud"
 %}
 
+{%
+  include cardv2.html
+  title="Keybase KBFS"
+  image="/assets/img/svg/3rd-party/keybase.svg"
+  description='Keybase provides 250GB of E2EE cloud storage for free. Its protocol has also been <a href="https://keybase.io/docs-assets/blog/NCC_Group_Keybase_KB2018_Public_Report_2019-02-27_v1.3.pdf">indepedently audited (PDF)</a>. Keybase allows you to share files with any Keybase user, or social media user through the use of "<a href="https://en.wikipedia.org/wiki/Keybase#Identity_proofs">identity proofs</a>". They currently do not offer additional space above your quota.'
+  labels="color==warning::link==https://github.com/keybase/client/issues/6374::text==Warning::tooltip==This software relies on a closed-source central server.| color==info::link==https://github.com/privacytools/privacytools.io/issues/1894::text==Ownership change::tooltip==Keybase has recently been acquired by Zoom."
+  website="https://book.keybase.io/docs/files"
+  privacy-policy="https://keybase.io/docs/privacypolicy"
+  forum="https://forum.privacytools.io/t/discussion-keybase/1224"
+  tor="http://keybase5wmilwokqirssclfnsqrjdsi7jdir5wy7y7iu3tanwmtp6oid.onion/"
+  github="https://github.com/keybase/client/tree/master/go/kbfs"
+  windows="https://keybase.io/docs/the_app/install_windows"
+  mac="https://keybase.io/docs/the_app/install_macos"
+  linux="https://keybase.io/docs/the_app/install_linux"
+  freebsd="https://www.freshports.org/security/keybase/"
+  googleplay="https://play.google.com/store/apps/details?id=io.keybase.ossifrage"
+  ios="https://apps.apple.com/app/keybase-crypto-for-everyone/id1044461770"
+%}
+
 
 <h3>Worth Mentioning</h3>
 

_includes/sections/dns.html

@@ -112,7 +112,12 @@
           </span>
           <span class="no-text-wrap">
             malicious domains
-            <span class="badge badge-warning" data-toggle="tooltip" data-original-title="And some wildcard and IDN domains."><a href="https://github.com/ookangzheng/blahdns#default-blocked-wildcard-domain"><i class="fas fa-exclamation-triangle"></i></a></span>
+            {% include badge.html
+            link="https://github.com/ookangzheng/blahdns#default-blocked-wildcard-domain"
+            color="warning"
+            icon="fas fa-exclamation-triangle"
+            tooltip="And some wildcard and IDN domains."
+            %}
           </span>
         </td>
         <td>
@@ -137,7 +142,13 @@
 
       <tr>
         <td data-value="Cloudflare">
-          <a href="https://developers.cloudflare.com/1.1.1.1/setting-up-1.1.1.1/">Cloudflare</a> <span class="badge badge-warning" data-toggle="tooltip" title="Cloudflare is one of the world's largest networks, and a problem considering anonymity and decentralization."><a href="https://codeberg.org/crimeflare/cloudflare-tor/"><i class="fas fa-exclamation-triangle"></i></a></span>
+          <a href="https://developers.cloudflare.com/1.1.1.1/setting-up-1.1.1.1/">Cloudflare</a>
+          {% include badge.html
+          link="https://codeberg.org/crimeflare/cloudflare-tor/"
+          color="warning"
+          icon="fas fa-exclamation-triangle"
+          tooltip="Cloudflare is one of the world's largest networks, and a problem considering anonymity and decentralization."
+          %}
         </td>
         <td>Anycast (based in
           <span class="no-text-wrap">
@@ -355,7 +366,12 @@
 
       <tr>
         <td data-value="Quad9">
-          <a href="https://quad9.net/">Quad9</a> <span class="badge badge-warning" data-toggle="tooltip" title="Founders include the Global Cyber Alliance, composed of the City of London Police and Manhattan District Attorney's Office"><i class="fas fa-exclamation-triangle"></i></span>
+          <a href="https://quad9.net/">Quad9</a>
+          {% include badge.html
+          color="warning"
+          icon="fas fa-exclamation-triangle"
+          tooltip="Founders include the Global Cyber Alliance, composed of the City of London Police and Manhattan District Attorney's Office."
+          %}
         </td>
         <td>Anycast (based in
           <span class="no-text-wrap">

_includes/sections/email-providers.html

@@ -9,224 +9,224 @@
   <div class="row mb-2">
     <div class="col-lg-3 col-sm-12 pt-lg-5">
       <img
-        src="/assets/img/svg/3rd-party/protonmail.svg"
+        src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/protonmail.svg"
         height="70"
         width="200"
         class="img-fluid d-block mr-auto ml-auto align-middle"
         alt="ProtonMail">
     </div>
     <div class="col">
-    <h2 id="protonmail" class="anchor"><a href="#protonmail"><i class="fas fa-link anchor-icon"></i></a> ProtonMail <span class="badge badge-info">Free</span></h2>
+    <h2 id="protonmail" class="anchor"><a href="#protonmail"><i class="fas fa-link anchor-icon"></i></a> ProtonMail {% include badge.html color="info" text="Free" %}</h2>
     <p><strong><a href="https://protonmail.com">ProtonMail.com</a></strong> is an email service with a focus on privacy, encryption, security, and ease of use. They have been in operation since <strong>2013</strong>. ProtonMail is based in Genève, <span class="flag-icon flag-icon-ch"></span> Switzerland. Accounts start with 500 MB storage with their free plan.</p>
 
     <p>Free accounts have some limitations and do not allow the use of the <a href="https://protonmail.com/bridge">ProtonMail Bridge</a>, which is required to use a <a href="/software/email">recommended email client</a> (e.g. Thunderbird) or to search email by body text. Paid accounts are available starting at <strong>€48/y</strong> which include features like ProtonMail Bridge, additional storage, custom domain support, and more. The webmail and mobile apps can only search <code>To:</code>, <code>From:</code>, <code>Date:</code> and <code>Subject:</code> (this is likely to change when <a href="https://reddit.com/comments/cqwk2a/comment/ex21b4e">v4.0</a> of ProtonMail is released).</p>
 
-    <h5><span class="badge badge-success">Domains and Aliases</span></h5>
+    <h5>{% include badge.html color="success" text="Domains and Aliases" %}</h5>
     <p>Paid ProtonMail users can use their own domain with the service. <a href="https://protonmail.com/support/knowledge-base/catch-all/">Catch-all</a> addresses are supported with custom domains for Professional and Visionary plans. ProtonMail also supports <a href="https://protonmail.com/support/knowledge-base/creating-aliases/">subaddressing</a>, which is useful for users who don't want to purchase a domain.</p>
 
-    <h5><span class="badge badge-success">Payment Methods</span></h5>
+    <h5>{% include badge.html color="success" text="Payment Methods" %}</h5>
     <p>ProtonMail accepts Bitcoin in addition to accepting credit/debit cards and PayPal.</p>
 
-    <h5><span class="badge badge-success">Account Security</span></h5>
+    <h5>{% include badge.html color="success" text="Account Security" %}</h5>
     <p>ProtonMail supports <a href="https://en.wikipedia.org/wiki/Time-based_One-time_Password_Algorithm">TOTP</a> <a href="https://protonmail.com/support/knowledge-base/two-factor-authentication/">two factor authentication</a> only. The use of a <a href="https://en.wikipedia.org/wiki/Universal_2nd_Factor">U2F</a> security key is not yet supported. ProtonMail is planning to implement U2F upon completion of their <a href="https://reddit.com/comments/cheoy6/comment/feh2lw0/">Single Sign On (SSO)</a> code.</p>
 
-    <h5><span class="badge badge-success">Data Security</span></h5>
+    <h5>{% include badge.html color="success" text="Data Security" %}</h5>
     <p>ProtonMail has <a href="https://protonmail.com/blog/zero-access-encryption">zero access encryption at rest</a> for your emails, <a href="https://protonmail.com/blog/encrypted-contacts-manager">address book contacts</a>, and <a href="https://protonmail.com/blog/protoncalendar-security-model">calendars</a>. This means the messages and other data stored in your account are only readable by you. </p>
 
-    <h5><span class="badge badge-success">Email Encryption</span></h5>
+    <h5>{% include badge.html color="success" text="Email Encryption" %}</h5>
     <p>ProtonMail has <a href="https://protonmail.com/support/knowledge-base/how-to-use-pgp">integrated OpenPGP encryption</a> in their webmail. Emails to other ProtonMail users are encrypted automatically, and encryption to non-ProtonMail users with an OpenPGP key can be enabled easily in your account settings. They also allow you to <a href="https://protonmail.com/support/knowledge-base/encrypt-for-outside-users">encrypt messages to non-ProtonMail users</a> without the need for them to sign up for a ProtonMail account or use software like OpenPGP.</p>
     <p>ProtonMail also supports the discovery of public keys via HTTP from their <a href="https://wiki.gnupg.org/WKD">Web Key Directory (WKD)</a>. This allows users outside of ProtonMail to find the OpenPGP keys of ProtonMail users easily, for cross-provider E2EE.</p>
 
-    <h5><span class="badge badge-success">.onion Service</span></h5>
+    <h5>{% include badge.html color="success" text=".onion Service" %}</h5>
     <p>ProtonMail is accessible via Tor at <a href="https://protonirockerxow.onion/">protonirockerxow.onion</a>.</p>
 
-    <h5><span class="badge badge-info">Extra Functionality</span></h5>
+    <h5>{% include badge.html color="info" text="Extra Functionality" %}</h5>
     <p>ProtonMail offers a "Visionary" account for €24/Month, which also enables access to ProtonVPN in addition to providing multiple accounts, domains, aliases, and extra storage.</p>
     </div>
   </div>
   <div class="row mb-2">
     <div class="col-lg-3 col-sm-12 pt-lg-5">
       <img
-        src="/assets/img/svg/3rd-party/mailboxorg.svg"
+        src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/mailboxorg.svg"
         height="70"
         width="200"
         class="img-fluid d-block mr-auto ml-auto align-middle"
         alt="Mailbox">
     </div>
     <div class="col">
-    <h2 id="mailbox" class="anchor"><a href="#mailbox"><i class="fas fa-link anchor-icon"></i></a> Mailbox.org <span class="badge badge-info">€12/y</span></h2>
+    <h2 id="mailbox" class="anchor"><a href="#mailbox"><i class="fas fa-link anchor-icon"></i></a> Mailbox.org {% include badge.html color="info" text="€12/y" %}</h2>
     <p><strong><a href="https://mailbox.org">Mailbox.org</a></strong> is an email service with a focus on being secure, ad-free, and privately powered by 100% eco-friendly energy. They have been in operation since <strong>2014</strong>. Mailbox.org is based in Berlin, <span class="flag-icon flag-icon-de"></span> Germany. Accounts start with 2 GB of storage, which can be upgraded as needed.</p>
 
-    <h5><span class="badge badge-success">Domains and Aliases</span></h5>
+    <h5>{% include badge.html color="success" text="Domains and Aliases" %}</h5>
     <p>Mailbox.org lets users use their own domain and they support <a href="https://kb.mailbox.org/display/MBOKBEN/Using+catch-all+alias+with+own+domain">catch-all</a> addresses. Mailbox.org also supports <a href="https://kb.mailbox.org/display/BMBOKBEN/What+is+an+alias+and+how+do+I+use+it">subaddressing</a>, which is useful for users who don't want to purchase a domain.</p>
 
-    <h5><span class="badge badge-warning">Payment Methods</span></h5>
+    <h5>{% include badge.html color="warning" text="Payment Methods" %}</h5>
     <p>Mailbox.org doesn't accept Bitcoin or any other cryptocurrencies as a result of their payment processor BitPay suspending operations in Germany. However, they do accept Cash by mail, cash payment to bank account, bank transfer, credit card, PayPal and couple of German-specific processors: paydirekt and Sofortüberweisung.</p>
 
-    <h5><span class="badge badge-success">Account Security</span></h5>
+    <h5>{% include badge.html color="success" text="Account Security" %}</h5>
     <p>Mailbox.org supports <a href="https://kb.mailbox.org/display/MBOKBEN/How+to+use+two-factor+authentication+-+2FA">two factor authentication</a> for their webmail only. You can use either <a href="https://en.wikipedia.org/wiki/Time-based_One-time_Password_Algorithm">TOTP</a> or a <a href="https://en.wikipedia.org/wiki/YubiKey">Yubikey</a> via the <a href="https://www.yubico.com/products/services-software/yubicloud">Yubicloud</a>. Web standards such as <a href="https://en.wikipedia.org/wiki/Universal_2nd_Factor">U2F</a> and <a href="https://en.wikipedia.org/wiki/WebAuthn">WebAuthn</a> are not yet supported.</p>
 
-    <h5><span class="badge badge-warning">Data Security</span></h5>
+    <h5>{% include badge.html color="warning" text="Data Security" %}</h5>
     <p>Mailbox.org allows for encryption of incoming mail using their <a href="https://kb.mailbox.org/display/MBOKBEN/The+Encrypted+Mailbox">encrypted mailbox</a>. New messages that you receive will then be immediately encrypted with your public key.</p>
     <p>However, <a href="https://en.wikipedia.org/wiki/Open-Xchange">Open-Exchange</a>, the software platform used by Mailbox.org, <a href="https://kb.mailbox.org/display/BMBOKBEN/Encryption+of+calendar+and+address+book">does not support</a> the encryption of your address book and calendar. A <a href="/software/calendar-contacts/">standalone option</a> may be more appropriate for that information.</p>
 
-    <h5><span class="badge badge-success">Email Encryption</span></h5>
+    <h5>{% include badge.html color="success" text="Email Encryption" %}</h5>
     <p>Mailbox.org has <a href="https://kb.mailbox.org/display/MBOKBEN/Send+encrypted+e-mails+with+Guard">integrated encryption</a> in their webmail, which simplifies sending messages to users with public OpenPGP keys. They also allow <a href="https://kb.mailbox.org/display/MBOKBEN/My+recipient+does+not+use+PGP">remote recipients to decrypt an email</a> on Mailbox.org's servers. This feature is useful when the remote recipient does not have OpenPGP and cannot decrypt a copy of the email in their own mailbox.</p>
     <p>Mailbox.org also supports the discovery of public keys via HTTP from their <a href="https://wiki.gnupg.org/WKD">Web Key Directory (WKD)</a>. This allows users outside of Mailbox.org to find the OpenPGP keys of Mailbox.org users easily, for cross-provider E2EE.</p>
 
-    <h5><span class="badge badge-warning">.onion Service</span></h5>
+    <h5>{% include badge.html color="warning" text=".onion Service" %}</h5>
     <p>You can access your Mailbox.org account via IMAP/SMTP using <a href="https://kb.mailbox.org/display/MBOKBEN/The+Tor+exit+node+of+mailbox.org">their .onion service</a>. However, their webmail interface cannot be accessed via their .onion service, and users may experience TLS certificate errors.</p>
 
-    <h5><span class="badge badge-info">Extra Functionality</span></h5>
+    <h5>{% include badge.html color="info" text="Extra Functionality" %}</h5>
     <p>All accounts come with limited cloud storage that <a href="https://kb.mailbox.org/display/MBOKBEN/Encrypt+files+on+your+Drive">can be encrypted</a>. Mailbox.org also offers the alias <a href="https://kb.mailbox.org/display/MBOKBEN/Ensuring+E-Mails+are+Sent+Securely">@secure.mailbox.org</a>, which enforces the TLS encryption on the connection between mail servers, otherwise the message will not be sent at all. Mailbox.org also supports <a href="https://en.wikipedia.org/wiki/Exchange_ActiveSync">Exchange ActiveSync</a> in addition to standard access protocols like IMAP and POP3.</p>
     </div>
   </div>
   <div class="row mb-2">
     <div class="col-lg-3 col-sm-12 pt-lg-5">
       <img
-        src="/assets/img/svg/3rd-party/posteo.svg"
+        src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/posteo.svg"
         height="70"
         width="200"
         class="img-fluid d-block mr-auto ml-auto align-middle"
         alt="Posteo">
     </div>
     <div class="col">
-    <h2 id="posteo" class="anchor"><a href="#posteo"><i class="fas fa-link anchor-icon"></i></a> Posteo <span class="badge badge-info">€12/y</span></h2>
+    <h2 id="posteo" class="anchor"><a href="#posteo"><i class="fas fa-link anchor-icon"></i></a> Posteo {% include badge.html color="info" text="€12/y" %}</h2>
     <p><strong><a href="https://posteo.de">Posteo.de</a></strong> is an email provider that focuses on anonymous, secure, and private email. Their servers are powered by 100% sustainable energy. They have been in operation since <strong>2009</strong>. Posteo is based in <span class="flag-icon flag-icon-de"></span> Germany and has a free 14-day trial. Posteo comes with 2 GB for the monthly cost and an extra gigabyte can be purchased for €0.25 per month.</p>
 
-    <h5><span class="badge badge-warning">Domains and Aliases</span></h5>
+    <h5>{% include badge.html color="warning" text="Domains and Aliases" %}</h5>
     <p>Posteo does <a href="https://posteo.de/en/site/faq">not allow the use of custom domains</a>, however users may still make use of <a href="https://posteo.de/en/help/what-is-an-email-alias">subaddressing</a>.</p>
 
-    <h5><span class="badge badge-warning">Payment Methods</span></h5>
+    <h5>{% include badge.html color="warning" text="Payment Methods" %}</h5>
     <p>Posteo does not accept Bitcoin or other cryptocurrencies as a form of payment, however they do accept cash-by-mail. They also accept credit/debit cards, bank transfers, and PayPal, and remove PII (personally identifiable information) <a href="https://posteo.de/en/site/payment">that they receive</a> in connection with these payment methods.</p>
 
-    <h5><span class="badge badge-success">Account Security</span></h5>
+    <h5>{% include badge.html color="success" text="Account Security" %}</h5>
     <p>Posteo supports <a href="https://posteo.de/en/help/what-is-two-factor-authentication-and-how-do-i-set-it-up">two factor authentication</a> for their webmail only. You can use either <a href="https://en.wikipedia.org/wiki/Time-based_One-time_Password_Algorithm">TOTP</a> a <a href="https://en.wikipedia.org/wiki/YubiKey">Yubikey</a> with TOTP. Web standards such as <a href="https://en.wikipedia.org/wiki/Universal_2nd_Factor">U2F</a> and <a href="https://en.wikipedia.org/wiki/WebAuthn">WebAuthn</a> are not yet supported.</p>
 
-    <h5><span class="badge badge-warning">Data Security</span></h5>
+    <h5>{% include badge.html color="warning" text="Data Security" %}</h5>
     <p>Posteo has <a href="https://posteo.de/en/site/encryption#cryptomailstorage">zero access encryption</a> for email storage. This means the messages stored in your account are only readable by you.</p>
     <p>Posteo also supports the encryption of your <a href="https://posteo.de/en/site/features#featuresaddressbook">address book contacts</a> and <a href="https://posteo.de/en/site/features#featurescalendar">calendars</a> at rest. However, Posteo still uses standard <a href="https://en.wikipedia.org/wiki/CalDAV">CalDAV</a> and <a href="https://en.wikipedia.org/wiki/CardDAV">CardDAV</a> for calendars and contacts. These protocols do not support <a href="https://en.wikipedia.org/wiki/End-to-end_encryption">E2EE (End-To-End Encryption)</a>. A <a href="/software/calendar-contacts/">standalone option</a> may be more appropiate.</p>
 
-    <h5><span class="badge badge-success">Email Encryption</span></h5>
+    <h5>{% include badge.html color="success" text="Email Encryption" %}</h5>
     <p>Posteo has <a href="https://posteo.de/en/site/encryption#pgp_webmailer">integrated encryption</a> in their webmail, which simplifies sending messages to users with public OpenPGP keys. They also support the discovery of public keys via HTTP from their <a href="https://wiki.gnupg.org/WKD">Web Key Directory (WKD)</a>. This allows users outside of Posteo to find the OpenPGP keys of Posteo users easily, for cross-provider E2EE.</p>
 
-    <h5><span class="badge badge-danger">.onion Service</span></h5>
+    <h5>{% include badge.html color="danger" text=".onion Service" %}</h5>
     <p>Posteo does not operate a .onion service.</p>
 
-    <h5><span class="badge badge-info">Extra Functionality</span></h5>
+    <h5>{% include badge.html color="info" text="Extra Functionality" %}</h5>
     <p>Posteo allows users to <a href="https://posteo.de/en/help/does-posteo-offer-mailing-lists">set up their own mailing lists</a>. Each account can create one list for free.</p>
     </div>
   </div>
   <div class="row mb-2">
     <div class="col-lg-3 col-sm-12 pt-lg-5">
       <img
-        src="/assets/img/svg/3rd-party/soverin.svg"
+        src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/soverin.svg"
         height="70"
         width="200"
         class="img-fluid d-block mr-auto ml-auto align-middle"
         alt="Soverin">
     </div>
     <div class="col">
-    <h2 id="soverin" class="anchor"><a href="#soverin"><i class="fas fa-link anchor-icon"></i></a> Soverin <span class="badge badge-info">€29/y</span></h2>
+    <h2 id="soverin" class="anchor"><a href="#soverin"><i class="fas fa-link anchor-icon"></i></a> Soverin {% include badge.html color="info" text="€29/y" %}</h2>
     <p><strong><a href="https://soverin.net">Soverin.net</a></strong> is an email provider which focuses on being private, ad-free, and powered by sustainable energy. They have been in operation since <strong>2015</strong>. Soverin is based in <span class="flag-icon flag-icon-nl"></span> Amsterdam and does not have a free trial. Accounts start at 25 GB.</p>
 
-    <h5><span class="badge badge-success">Domains and Aliases</span></h5>
+    <h5>{% include badge.html color="success" text="Domains and Aliases" %}</h5>
     <p>Soverin lets users use their own domain. Soverin users can also use <a href="https://support.soverin.net/hc/en-us/articles/115004811093-How-can-I-setup-a-catch-all-on-my-domain-">catch-all</a> and <a href="https://support.soverin.net/hc/en-us/articles/115004811073-How-can-I-add-an-alias-to-my-domain-">aliases</a> for domains they own. Soverin also allows for <a href="https://support.soverin.net/hc/en-us/articles/115004811033-Do-support-the-plus-syntax-subaddressing-">subaddressing</a>, which is useful for users who don't want to purchase a domain.</p>
 
-    <h5><span class="badge badge-success">Payment Methods</span></h5>
+    <h5>{% include badge.html color="success" text="Payment Methods" %}</h5>
     <p>Soverin accepts Bitcoin as payment. They also accept credit/debit cards, PayPal, and the Netherlands-specific payment gateway iDEAL.</p>
 
-    <h5><span class="badge badge-success">Account Security</span></h5>
+    <h5>{% include badge.html color="success" text="Account Security" %}</h5>
     <p>Soverin supports <a href="https://en.wikipedia.org/wiki/Time-based_One-time_Password_Algorithm">TOTP</a> two factor authentication <a href="https://support.soverin.net/hc/en-us/articles/360008819553-Setting-up-2-Factor-Authentication-2FA-Webmail-only">for webmail only</a>. They do not allow <a href="https://en.wikipedia.org/wiki/Universal_2nd_Factor">U2F</a> security key authentication.</p>
 
-    <h5><span class="badge badge-warning">Data Security</span></h5>
+    <h5>{% include badge.html color="warning" text="Data Security" %}</h5>
     <p>Soverin has <a href="https://support.soverin.net/hc/en-us/articles/115004810713-Technical-details-about-Soverin">encryption at rest</a> however it doesn't appear to be "zero access", meaning it is technically possible for them to decrypt the data they have.</p>
     <p>Soverin also uses the standard <a href="https://en.wikipedia.org/wiki/CalDAV">CalDAV</a> and <a href="https://en.wikipedia.org/wiki/CardDAV">CardDAV</a> protocols for calendars and contacts, which do not support E2EE. A <a href="/software/calendar-contacts/">standalone option</a> may be more appropriate.</p>
 
-    <h5><span class="badge badge-success">Email Encryption</span></h5>
+    <h5>{% include badge.html color="success" text="Email Encryption" %}</h5>
     <p>Soverin has integrated encryption in their webmail, which simplifies sending messages to users. However, Soverin has not integrated a <a href="https://wiki.gnupg.org/WKD">Web Key Directory (WKD)</a> for users on their platform.<p>
 
-    <h5><span class="badge badge-danger">.onion Service</span></h5>
+    <h5>{% include badge.html color="danger" text=".onion Service" %}</h5>
     <p>Soverin does not operate a .onion service.</p>
 
-    <h5><span class="badge badge-info">Extra Functionality</span></h5>
+    <h5>{% include badge.html color="info" text="Extra Functionality" %}</h5>
     <p>Soverin also providers users with space for a personal webpage.</p>
     </div>
   </div>
   <div class="row mb-2">
     <div class="col-lg-3 col-sm-12 pt-lg-5">
       <img
-        src="/assets/img/svg/3rd-party/disroot.svg"
-        data-theme-src="/assets/img/svg/3rd-party/disroot-dark.svg"
+        src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/disroot.svg"
+        data-theme-src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/disroot-dark.svg"
         height="70"
         width="200"
         class="img-fluid d-block mr-auto ml-auto align-middle"
         alt="Disroot">
     </div>
     <div class="col">
-    <h2 id="disroot" class="anchor"><a href="#disroot"><i class="fas fa-link anchor-icon"></i></a> Disroot <span class="badge badge-info">Free</span></h2>
+    <h2 id="disroot" class="anchor"><a href="#disroot"><i class="fas fa-link anchor-icon"></i></a> Disroot {% include badge.html color="info" text="Free" %}</h2>
     <p><strong><a href="https://disroot.org/en/services/email">Disroot</a></strong> offers email amongst <a href="https://disroot.org/en/#services">other services</a>. The service is maintained by volunteers and its community. They have been in operation since <strong>2015</strong>. Disroot is based in <span class="flag-icon flag-icon-nl"></span> Amsterdam. Disroot is free and uses open source software such as Rainloop to provide service. Users support the service through donations and buying extra storage. The mailbox limit is 1 GB, but extra storage can be purchased 0.15€ per GB per month paid yearly.</p>
 
-    <h5><span class="badge badge-success">Domains and Aliases</span></h5>
+    <h5>{% include badge.html color="success" text="Domains and Aliases" %}</h5>
     <p>Disroot lets users use their own domain. They have aliases, however you must <a href="https://disroot.org/en/forms/alias-request-form">manually apply</a> for them.</p>
 
-    <h5><span class="badge badge-success">Payment Methods</span></h5>
+    <h5>{% include badge.html color="success" text="Payment Methods" %}</h5>
     <p>Disroot accepts Bitcoin and Faircoin as payment methods. They also accept PayPal, direct bank deposit, and Patreon payments. Disroot is a not-for-profit organization that also accepts donations through Liberapay, Flattr, and Monero, but these payment methods cannot be used to purchase services.</p>
 
-    <h5><span class="badge badge-success">Account Security</span></h5>
+    <h5>{% include badge.html color="success" text="Account Security" %}</h5>
     <p>Disroot supports <a href="https://en.wikipedia.org/wiki/Time-based_One-time_Password_Algorithm">TOTP</a> two factor authentication for webmail only. They do not allow <a href="https://en.wikipedia.org/wiki/Universal_2nd_Factor">U2F</a> security key authentication.</p>
 
-    <h5><span class="badge badge-warning">Data Security</span></h5>
+    <h5>{% include badge.html color="warning" text="Data Security" %}</h5>
     <p>Disroot uses full disk encryption. However, it doesn't appear to be "zero access", meaning it is technically possible for them to decrypt the data they have.</p>
     <p>Disroot also uses the standard <a href="https://en.wikipedia.org/wiki/CalDAV">CalDAV</a> and <a href="https://en.wikipedia.org/wiki/CardDAV">CardDAV</a> protocols for calendars and contacts, which do not support E2EE. A <a href="/software/calendar-contacts/">standalone option</a> may be more appropriate.</p>
 
-    <h5><span class="badge badge-success">Email Encryption</span></h5>
+    <h5>{% include badge.html color="success" text="Email Encryption" %}</h5>
     <p>Disroot allows for encrypted emails to be sent from their webmail application using OpenPGP. However, Disroot has not integrated a <a href="https://wiki.gnupg.org/WKD">Web Key Directory (WKD)</a> for users on their platform.</p>
 
-    <h5><span class="badge badge-danger">.onion Service</span></h5>
+    <h5>{% include badge.html color="danger" text=".onion Service" %}</h5>
     <p>Disroot does not operate a .onion service.</p>
 
-    <h5><span class="badge badge-info">Extra Functionality</span></h5>
+    <h5>{% include badge.html color="info" text="Extra Functionality" %}</h5>
     <p>They offer <a href="https://disroot.org/en/#services">other services</a> such as NextCloud, XMPP Chat, Etherpad, Ethercalc, Pastebin, Online polls and a Gitea instance. They also have an app <a href="https://f-droid.org/packages/org.disroot.disrootapp/">available in F-Droid</a>.</p>
     </div>
   </div>
   <div class="row mb-2">
     <div class="col-lg-3 col-sm-12 pt-lg-5">
       <img
-        src="/assets/img/svg/3rd-party/tutanota.svg"
-        data-theme-src="/assets/img/svg/3rd-party/tutanota-dark.svg"
+        src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/tutanota.svg"
+        data-theme-src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/tutanota-dark.svg"
         height="70"
         width="200"
         class="img-fluid d-block mr-auto ml-auto align-middle"
         alt="Tutanota">
     </div>
     <div class="col">
-    <h2 id="tutanota" class="anchor"><a href="#tutanota"><i class="fas fa-link anchor-icon"></i></a> Tutanota <span class="badge badge-info">Free</span></h2>
+    <h2 id="tutanota" class="anchor"><a href="#tutanota"><i class="fas fa-link anchor-icon"></i></a> Tutanota {% include badge.html color="info" text="Free" %}</h2>
     <p><strong><a href="https://tutanota.com">Tutanota.com</a></strong> is an email service with a focus on security and privacy through the use of encryption. Tutanota has been in operation since <strong>2011</strong> and is based in Hanover, <span class="flag-icon flag-icon-de"></span> Germany. Accounts start with 1GB storage with their free plan.</p>
     <p>Tutanota <a href="https://tutanota.com/faq/#imap">doesn't allow</a> the use of third-party <a href="/software/email/">email clients</a>. There are plans to allow Tutanota pull email from <a href="https://github.com/tutao/tutanota/issues/544">external email accounts</a> using the <a href="https://en.wikipedia.org/wiki/Internet_Message_Access_Protocol">IMAP</a> protocol. <a href="https://github.com/tutao/tutanota/issues/630">Email import</a> is currently not possible.</p>
     <p>Emails can be exported <a href="https://tutanota.com/howto#generalMail">individually or by bulk selection</a>. Tutanota does not allow for <a href="https://github.com/tutao/tutanota/issues/927">subfolders</a> as you might expect with other email providers.</p>
     <p>Tutanota is working on a <a href="https://tutanota.com/blog/posts/desktop-clients/">desktop client</a> and they have an app <a href="https://f-droid.org/packages/de.tutao.tutanota">available in F-Droid</a>. They also have their app in conventional stores such as <a href="https://apps.apple.com/us/app/tutanota/id922429609">App Store</a> on iOS and <a href="https://play.google.com/store/apps/details?id=de.tutao.tutanota">Google Play</a> for Android.</p>
 
-    <h5><span class="badge badge-success">Domains and Aliases</span></h5>
+    <h5>{% include badge.html color="success" text="Domains and Aliases" %}</h5>
     <p>Paid Tutanota accounts can use up to 5 <a href="https://tutanota.com/faq#alias">aliases</a> and <a href="https://tutanota.com/faq#custom-domain">custom domains</a>. Tutanota doesn't allow for <a href="https://tutanota.com/faq#plus">subaddressing (plus addresses)</a>, but you can use a <a href="https://tutanota.com/howto#settings-global">catch-all</a> with a custom domain.</p>
 
-    <h5><span class="badge badge-danger">Payment Methods</span></h5>
+    <h5>{% include badge.html color="danger" text="Payment Methods" %}</h5>
     <p>Tutanota accepts only credit cards and PayPal.</p>
 
-    <h5><span class="badge badge-success">Account Security</span></h5>
+    <h5>{% include badge.html color="success" text="Account Security" %}</h5>
     <p>Tutanota supports <a href="https://tutanota.com/faq#2fa">two factor authentication</a>. Users can either use <a href="https://en.wikipedia.org/wiki/Time-based_One-time_Password_Algorithm">TOTP</a> or <a href="https://en.wikipedia.org/wiki/Universal_2nd_Factor">U2F</a>. U2F support is <a href="https://github.com/tutao/tutanota/issues/443">not yet available on Android</a>.</p>
 
-    <h5><span class="badge badge-success">Data Security</span></h5>
+    <h5>{% include badge.html color="success" text="Data Security" %}</h5>
     <p>Tutanota has <a href="https://tutanota.com/faq#what-encrypted">zero access encryption at rest</a> for your emails, <a href="https://tutanota.com/faq#encrypted-address-book">address book contacts</a>, and <a href="https://tutanota.com/faq#calendar">calendars</a>. This means the messages and other data stored in your account are only readable by you. </p>
 
-    <h5><span class="badge badge-warning">Email Encryption</span></h5>
+    <h5>{% include badge.html color="warning" text="Email Encryption" %}</h5>
     <p>Tutanota <a href="https://www.tutanota.com/faq/#pgp">does not use OpenPGP</a>. Tutanota users can only receive encrypted emails when external users send them through a <a href="https://www.tutanota.com/howto/#encrypted-email-external">temporary Tutanota mailbox</a>.</p>
     <p>Tutanota <a href="https://github.com/tutao/tutanota/issues/198">does have plans</a> to support <a href="https://autocrypt.org">AutoCrypt</a>. This would allow for external users to send encrypted emails to Tutanota users as long as their email client supports the AutoCrypt headers.</p>
 
-    <h5><span class="badge badge-danger">.onion Service</span></h5>
+    <h5>{% include badge.html color="danger" text=".onion Service" %}</h5>
     <p>Tutanota does not operate a .onion service but <a href="https://github.com/tutao/tutanota/issues/528">may consider</a> it in the future.</p>
 
-    <h5><span class="badge badge-info">Extra Functionality</span></h5>
+    <h5>{% include badge.html color="info" text="Extra Functionality" %}</h5>
     <p>Tutanota offers the business version of <a href="https://tutanota.com/blog/posts/secure-email-for-non-profit">Tutanota to non-profit organizations</a> for free or with a heavy discount.</p>
 
     <p>Tutanota also has a business feature called <a href="https://tutanota.com/secure-connect/">Secure Connect</a>. This ensures customer contact to the business uses E2EE. The feature costs €240/y.</p>
@@ -235,38 +235,38 @@
   <div class="row mb-2">
     <div class="col-lg-3 col-sm-12 pt-lg-5">
       <img
-        src="/assets/img/svg/3rd-party/startmail.svg"
-        data-theme-src="/assets/img/svg/3rd-party/startmail-dark.svg"
+        src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/startmail.svg"
+        data-theme-src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/startmail-dark.svg"
         height="70"
         width="200"
         class="img-fluid d-block mr-auto ml-auto align-middle"
         alt="StartMail">
     </div>
     <div class="col">
-    <h2 id="startmail" class="anchor"><a href="#startmail"><i class="fas fa-link anchor-icon"></i></a> StartMail <span class="badge badge-info">Personal USD $59.95/y</span></h2>
+    <h2 id="startmail" class="anchor"><a href="#startmail"><i class="fas fa-link anchor-icon"></i></a> StartMail {% include badge.html color="info" text="Personal USD $59.95/y" %}</h2>
     <p><strong><a href="https://startmail.com">StartMail.com</a></strong> is an email service with a focus on security and privacy through the use of standard OpenPGP encryption. StartMail has been in operation since <strong>2014</strong> and is based in Boulevard 11, Zeist <span class="flag-icon flag-icon-nl"></span> Netherlands. Accounts start with 10GB. They offer a 30-day trial.</p>
 
-    <h5><span class="badge badge-success">Domains and Aliases</span></h5>
+    <h5>{% include badge.html color="success" text="Domains and Aliases" %}</h5>
     <p>Personal accounts can use <a href="https://support.startmail.com/hc/en-us/articles/360007297457-Aliases">Custom or Generated</a> aliases. Business accounts can use <a href="https://support.startmail.com/hc/en-us/articles/360006840058">Domain aliases</a>.</p>
 
-    <h5><span class="badge badge-warning">Payment Methods</span></h5>
+    <h5>{% include badge.html color="warning" text="Payment Methods" %}</h5>
     <p>StartMail accepts Visa, MasterCard, American Express and Paypal. StartMail also has other <a href="https://support.startmail.com/hc/en-us/articles/360006620637-Payment-methods">payment options</a> such as Bitcoin (currently only for Personal accounts) and SEPA Direct Debit for accounts older than a year.</p>
 
-    <h5><span class="badge badge-success">Account Security</span></h5>
+    <h5>{% include badge.html color="success" text="Account Security" %}</h5>
     <p>StartMail supports <a href="https://en.wikipedia.org/wiki/Time-based_One-time_Password_Algorithm">TOTP</a> two factor authentication <a href="https://support.startmail.com/hc/en-us/articles/360006682158-Two-factor-authentication-2FA">for webmail only</a>. They do not allow <a href="https://en.wikipedia.org/wiki/Universal_2nd_Factor">U2F</a> security key authentication.</p>
 
-    <h5><span class="badge badge-warning">Data Security</span></h5>
+    <h5>{% include badge.html color="warning" text="Data Security" %}</h5>
     <p>StartMail has <a href="https://www.startmail.com/en/whitepaper/#_Toc458527835">zero access encryption at rest</a>, using their "user vault" system. When a user logs in, the vault is opened, and the email is then moved to the vault out of the queue where it is decrypted by the corresponding private key.</p>
 
     <p>StartMail supports importing <a href="https://support.startmail.com/hc/en-us/articles/360006495557-Import-contacts">contacts</a> however, they are only accessible in the webmail and not through protocols such as <a href="https://en.wikipedia.org/wiki/CalDAV">CalDAV</a>. Contacts are also not stored using zero knowledge encryption, so a <a href="/software/calendar-contacts/">standalone option</a> may be more appropriate.</p>
 
-    <h5><span class="badge badge-success">Email Encryption</span></h5>
+    <h5>{% include badge.html color="success" text="Email Encryption" %}</h5>
     <p>StartMail has <a href="https://support.startmail.com/hc/en-us/sections/360001889078-Encryption">integrated encryption</a> in their webmail, which simplifies sending messages to users with public OpenPGP keys.</p>
 
-    <h5><span class="badge badge-danger">.onion Service</span></h5>
+    <h5>{% include badge.html color="danger" text=".onion Service" %}</h5>
     <p>StartMail does not operate a .onion service.</p>
 
-    <h5><span class="badge badge-info">Extra Functionality</span></h5>
+    <h5>{% include badge.html color="info" text="Extra Functionality" %}</h5>
     <p>StartMail allows for proxying of images within emails. If a user allows the remote image to be loaded, the sender won't know what the user's IP address is.</p>
     </div>
   </div>

_includes/sections/file-encryption.html

@@ -55,10 +55,21 @@
 <h3>Worth Mentioning</h3>
 
 <ul>
-  <li><a href="https://cryptomator.org/">Cryptomator</a> - Free client-side AES encryption for your cloud files. Open source software: No backdoors, no registration. <span class="badge badge-warning" data-toggle="tooltip" title="Cryptomator's mobile apps are not open-source."><a href="https://github.com/cryptomator/cryptomator-android/issues/1#issuecomment-257979375"><i class="fas fa-exclamation-triangle"></i></a></span></li>
+  <li><a href="https://cryptomator.org/">Cryptomator</a> - Free client-side AES encryption for your cloud files. Open source software: No backdoors, no registration.
+    {% include badge.html
+    color="warning"
+    icon="fas fa-exclamation-triangle"
+    link="https://github.com/cryptomator/cryptomator-android/issues/1#issuecomment-257979375"
+    tooltip="Cryptomator's mobile apps are not open-source."
+    %}</li>
   <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.</li>
   <li><a href="https://www.dyne.org/software/tomb/">Tomb</a> - A simple zsh script for making LUKS containers on the commandline.</li>
   <li><a href="https://hat.sh/">Hat.sh</a> - A cross-platform, serverless JavaScript web application that provides secure file encryption using the AES-256-GCM algorithm in your browser. It can also be downloaded and run offline.</li>
-  <li><a href="https://www.keka.io/">Keka</a> - A macOS-only, file archiver with the ability to encrypt files. <span class="badge badge-warning" data-toggle="tooltip" title="This software isn't open source anymore"><a href="https://github.com/aonez/Keka#so-where-is-the-source-code"><i class="fas fa-exclamation-triangle"></i></a></span>
-  </li>
+  <li><a href="https://www.keka.io/">Keka</a> - A macOS-only, file archiver with the ability to encrypt files.
+    {% include badge.html
+    color="warning"
+    icon="fas fa-exclamation-triangle"
+    link="https://github.com/aonez/Keka#so-where-is-the-source-code"
+    tooltip="This software is no longer open source."
+    %}</li>
 </ul>

_includes/sections/file-sharing.html

@@ -46,7 +46,14 @@ netbsd="https://pypi.org/project/magic-wormhole/"
 <h3>Worth Mentioning</h3>
 
 <ul>
-  <li><a href="https://framadrop.org/">FramaDrop</a> - Stores a file of any size for 24h. Data is end-to-end encrypted from your browser, powered by <a href="https://framagit.org/fiat-tux/hat-softwares/lufi">LuFi</a>. <span class="badge badge-warning" data-toggle="tooltip" title="FramaDrop logs IP addresses and fingerprints the browser for an unclear amount of time."><a href="https://framasoft.org/en/cgu/"><i class="fas fa-exclamation-triangle"></i></a></span></li>
+  <li><a href="https://framadrop.org/">FramaDrop</a> - Stores a file of any size for 24h. Data is end-to-end encrypted from your browser, powered by <a href="https://framagit.org/fiat-tux/hat-softwares/lufi">LuFi</a>.
+    {% include badge.html
+    color="warning"
+    icon="fas fa-exclamation-triangle"
+    link="https://framasoft.org/en/cgu/"
+    tooltip="FramaDrop logs IP addresses and fingerprints the browser for an unclear amount of time."
+    %}
+  </li>
   <li><a href="https://github.com/schollz/croc">croc</a> - Easily and securely send arbitrary-sized files from one computer to another. Similar to Magic Wormhole but without dependencies.</li>
   <li><a href="https://freedombox.org/">FreedomBox</a> - Designed to be your own inexpensive server at home. It runs free software and offers an increasing number of services ranging from a calendar or XMPP server, to a wiki, or VPN.</li>
 </ul>

_includes/sections/fourteen-eyes.html

@@ -1,6 +1,6 @@
 <h1 id="ukusa" class="anchor"><a href="#ukusa"><i class="fas fa-link anchor-icon"></i></a> Global Mass Surveillance - The Fourteen Eyes</h1>
 
-<img src="/assets/img/svg/layout/ukusa.svg" width="260" height="115" class="img-fluid float-right ml-2" alt="UKUSA Agreement">
+<img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/layout/ukusa.svg" width="260" height="115" class="img-fluid float-right ml-2" alt="UKUSA Agreement">
 
 <p>The UKUSA Agreement is an agreement between the United Kingdom, United States, Australia, Canada, and New Zealand to cooperatively collect, analyze, and share intelligence. Members of this group, known as the <a href="https://www.giswatch.org/en/communications-surveillance/unmasking-five-eyes-global-surveillance-practices">Five Eyes</a>, focus on gathering and analyzing intelligence from different parts of the world. While Five Eyes countries have agreed to <a href="https://www.pbs.org/newshour/world/an-exclusive-club-the-five-countries-that-dont-spy-on-each-other">not spy on each other</a> as adversaries, leaks by Snowden have revealed that some Five Eyes members monitor each other's citizens and <a href="https://www.theguardian.com/uk/2013/jun/21/gchq-cables-secret-world-communications-nsa">share intelligence</a> to <a href="https://www.theguardian.com/politics/2013/jun/10/nsa-offers-intelligence-british-counterparts-blunkett">avoid breaking domestic laws</a> that prohibit them from spying on their own citizens. The Five Eyes alliance also cooperates with groups of third-party countries to share intelligence (forming the Nine Eyes and Fourteen Eyes); however, Five Eyes and third-party countries can and do spy on each other.</p>
 

_includes/sections/header.html

@@ -5,9 +5,9 @@
 <div class="jumbotron p-5">
   <h1 class="display-4">
     <a href="{{ site.production_url }}" title="{{ site.name }}">
-      <img class="img-fluid d-none d-sm-block" src="/assets/img/svg/layout/brand/horizontal.svg" width="500px" alt="{{ site.name }}">
+      <img class="img-fluid d-none d-sm-block" src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/layout/brand/horizontal.svg" width="500px" alt="{{ site.name }}">
       <div class="text-center">
-        <img class="img-fluid d-sm-none" src="/assets/img/svg/layout/brand/vertical.svg" width="300px" alt="{{ site.name }}">
+        <img class="img-fluid d-sm-none" src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/layout/brand/vertical.svg" width="300px" alt="{{ site.name }}">
       </div>
     </a>
   </h1>

_includes/sections/instant-messenger.html

@@ -42,7 +42,7 @@
   title="Keybase"
   image="/assets/img/svg/3rd-party/keybase.svg"
   description='Keybase provides a hosted team chat with E2EE. Its protocol has also been <a href="https://keybase.io/docs-assets/blog/NCC_Group_Keybase_KB2018_Public_Report_2019-02-27_v1.3.pdf">indepedently audited (PDF)</a>. Keybase can help you prove you own social media accounts though the use of cryptographic signing of "<a href="https://en.wikipedia.org/wiki/Keybase#Identity_proofs">identity proofs</a>".'
-  labels="color==warning::link==https://github.com/keybase/client/issues/6374::text==Warning::tooltip==This software relies on a closed-source central server."
+  labels="color==warning::link==https://github.com/keybase/client/issues/6374::text==Warning::tooltip==This software relies on a closed-source central server.| color==info::link==https://github.com/privacytools/privacytools.io/issues/1894::text==Ownership change::tooltip==Keybase has recently been acquired by Zoom."
   website="https://keybase.io/"
   privacy-policy="https://keybase.io/docs/privacypolicy"
   forum="https://forum.privacytools.io/t/discussion-keybase/1224"

_includes/sections/key-disclosure-law.html

@@ -67,7 +67,7 @@
 
 <h3 id="usa" class="anchor">Why is it not recommended to choose a US-based service?</h3>
 
-<img src="/assets/img/svg/layout/great_seal_of_the_united_states_obverse.svg" width="200" height="200" class="img-fluid float-right ml-3" alt="USA">
+<img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/layout/great_seal_of_the_united_states_obverse.svg" width="200" height="200" class="img-fluid float-right ml-3" alt="USA">
 
 <p>Services based in the United States are not recommended because of the country's surveillance programs and use of <a href="https://www.eff.org/issues/national-security-letters/faq">National Security Letters</a> (NSLs) with accompanying gag orders, which forbid the recipient from talking about the request. This combination allows the government to <a href="https://www.schneier.com/blog/archives/2013/08/more_on_the_nsa.html">secretly force</a> companies to grant complete access to customer data and transform the service into a tool of mass surveillance.</p>
 

_includes/sections/live-operating-systems.html

@@ -15,12 +15,19 @@ git="https://git-tails.immerda.ch/tails/"
 <ul>
   <li>
     <a href="https://getfedora.org/">Fedora Workstation</a>
-    <span class="badge badge-info">GNU/Linux</span>
+    {% include badge.html
+    color="info"
+    text="GNU/Linux"
+    %}
     - Fedora is a Linux distribution developed by the Fedora Project and sponsored by Red Hat. Fedora Workstation is a secure, reliable, and user-friendly edition developed for desktops and laptops, using GNOME as the default desktop environment.
   </li>
+
   <li>
     <a href="https://debian.org/">Debian</a>
-    <span class="badge badge-info">GNU/Linux</span>
+    {% include badge.html
+    color="info"
+    text="GNU/Linux"
+    %}
     - Debian is a Unix-like computer operating system and a Linux distribution that is composed entirely of free and open-source software, most of which is under the GNU General Public License, and packaged by a group of individuals known as the Debian project.
   </li>
 </ul>

_includes/sections/mobile-operating-systems.html

@@ -40,7 +40,41 @@ github="https://github.com/ubports"
 <h3>Worth Mentioning</h3>
 
 <ul>
-  <li><a href="https://www.replicant.us/">Replicant</a> <span class="badge badge-info">AOSP</span> - An open-source operating system based on Android, aiming to replace all proprietary components with free software.</li>
-  <li><a href="https://www.omnirom.org/">OmniROM</a> <span class="badge badge-info">AOSP</span> <span class="badge badge-warning" data-toggle="tooltip" title="This software may depend on or recommend non-free software.">contrib <i class="far fa-question-circle"></i></span> - A free-software operating system for smartphones and tablet computers, based on the Android mobile platform.</li>
-  <li><a href="https://microg.org/">MicroG</a> <span class="badge badge-info">Add-on Package</span> <span class="badge badge-warning" data-toggle="tooltip" title="This software may depend on or recommend non-free software.">contrib <i class="far fa-question-circle"></i></span> - A project that aims to reimplement the proprietary Google Play Services in the Android operating system with a FLOSS replacement. The microG project also maintains a fork of LineageOS with microG and F-Droid preinstalled at <a href="https://lineage.microg.org/">Lineage for microG</a>.</li>
+  <li><a href="https://www.replicant.us/">Replicant</a>
+    {% include badge.html
+    color="info"
+    text="AOSP"
+    %}
+    - An open-source operating system based on Android, aiming to replace all proprietary components with free software.
+  </li>
+
+  <li>
+    <a href="https://www.omnirom.org/">OmniROM</a>
+    {% include badge.html
+    color="info"
+    text="AOSP"
+    %}
+    {% include badge.html
+    color="warning"
+    icon="far fa-question-circle"
+    text="contrib"
+    tooltip="This software may depend on or recommend non-free software."
+    %}
+    - A free-software operating system for smartphones and tablet computers, based on the Android mobile platform.
+  </li>
+
+  <li>
+    <a href="https://microg.org/">MicroG</a>
+    {% include badge.html
+    color="info"
+    text="Add-on Package"
+    %}
+    {% include badge.html
+    color="warning"
+    icon="far fa-question-circle"
+    text="contrib"
+    tooltip="This software may depend on or recommend non-free software."
+    %}
+    - A project that aims to reimplement the proprietary Google Play Services in the Android operating system with a FLOSS replacement. The microG project also maintains a fork of LineageOS with microG and F-Droid preinstalled at <a href="https://lineage.microg.org/">Lineage for microG</a>.
+  </li>
 </ul>

_includes/sections/operating-systems.html

@@ -41,10 +41,46 @@ gitlab="https://salsa.debian.org/qa/debsources"
 <h3>Worth Mentioning</h3>
 
 <ul>
-  <li><a href="https://www.openbsd.org/">OpenBSD</a> <span class="badge badge-info">BSD</span> - A project that produces a free, multi-platform 4.4BSD-based UNIX-like operating system. Emphasizes portability, standardization, correctness, proactive security and integrated cryptography.</li>
-  <li><a href="https://www.archlinux.org/">Arch Linux</a> <span class="badge badge-info">GNU/Linux</span> <span class="badge badge-warning" data-toggle="tooltip" title="This software may depend on or recommend non-free software.">contrib <i class="far fa-question-circle"></i></span> - A simple, lightweight Linux distribution. It is composed predominantly of free and open-source software, and supports community involvement. <a href="https://www.parabola.nu/">Parabola</a> is a
-    completely open source version of Arch Linux.</li>
-  <li><a href="https://trisquel.info/">Trisquel</a> <span class="badge badge-info">GNU/Linux</span> - Derived from Ubuntu, this project aims for a fully free software system without proprietary software or firmware and uses Linux-libre, a version of the Linux kernel with the non-free code (binary blobs) removed.</li>
-  <li><a href="https://www.whonix.org/">Whonix</a> <span class="badge badge-info">GNU/Linux</span> - A Debian-based security-focused Linux distribution. It aims to provide privacy, security and anonymity on the internet. The operating system consists of two virtual machines, a "Workstation"
-    and a Tor "Gateway". All communication are forced through the Tor network to accomplish this.</li>
+  <li><a href="https://www.openbsd.org/">OpenBSD</a>
+    {% include badge.html
+    color="info"
+    text="BSD"
+    %}
+    - A project that produces a free, multi-platform 4.4BSD-based UNIX-like operating system. Emphasizes portability, standardization, correctness, proactive security and integrated cryptography.
+  </li>
+
+  <li>
+    <a href="https://www.archlinux.org/">Arch Linux</a>
+    {% include badge.html
+    color="info"
+    text="GNU/Linux"
+    %}
+    {% include badge.html
+    color="warning"
+    icon="far fa-question-circle"
+    text="contrib"
+    tooltip="This software may depend on or recommend non-free software."
+    %}
+    - A simple, lightweight Linux distribution. It is composed predominantly of free and open-source software, and supports community involvement. <a href="https://www.parabola.nu/">Parabola</a> is a
+    completely open source version of Arch Linux.
+  </li>
+
+  <li>
+    <a href="https://trisquel.info/">Trisquel</a>
+    {% include badge.html
+    color="info"
+    text="GNU/Linux"
+    %}
+    - Derived from Ubuntu, this project aims for a fully free software system without proprietary software or firmware and uses Linux-libre, a version of the Linux kernel with the non-free code (binary blobs) removed.
+  </li>
+
+  <li>
+    <a href="https://www.whonix.org/">Whonix</a>
+    {% include badge.html
+    color="info"
+    text="GNU/Linux"
+    %}
+    - A Debian-based security-focused Linux distribution. It aims to provide privacy, security and anonymity on the internet. The operating system consists of two virtual machines, a "Workstation"
+    and a Tor "Gateway". All communication are forced through the Tor network to accomplish this.
+  </li>
 </ul>

_includes/sections/quotes.html

@@ -2,7 +2,7 @@
   <h1>Privacy? I don't have anything to hide.</h1>
 </div>
 <blockquote class="blockquote">
-  <p><a href="https://www.ted.com/talks/glenn_greenwald_why_privacy_matters" title="Glenn Greenwald - Why privacy matters - TED Talk"><img src="/assets/img/png/layout/glenn_greenwald.png" width="170px" class="img-fluid float-right ml-2" alt="Glenn Greenwald: Why privacy matters"></a>
+  <p><a href="https://www.ted.com/talks/glenn_greenwald_why_privacy_matters" title="Glenn Greenwald - Why privacy matters - TED Talk"><img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/png/layout/glenn_greenwald.png" width="170px" class="img-fluid float-right ml-2" alt="Glenn Greenwald: Why privacy matters"></a>
   Over the last 16 months, as I've debated this issue around the world, every single time somebody has said to me, "I don't really worry about invasions of privacy because I don't have anything to hide." I always say the same thing to them. I get out a
   pen, I write down my email address. I say, "Here's my email address. What I want you to do when you get home is email me the passwords to all of your email accounts, not just the nice, respectable work one in your name, but all of them, because I
   want to be able to just troll through what it is you're doing online, read what I want to read and publish whatever I find interesting. After all, if you're not a bad person, if you're doing nothing wrong, you should have nothing to hide." <strong>Not a single person has taken me up on that offer.</strong></p>

_includes/sections/router-firmware.html

@@ -36,6 +36,27 @@ git="https://gogs.librecmc.org/libreCMC/libreCMC"
 <h3>Worth Mentioning</h3>
 
 <ul>
-  <li><a href="https://www.openbsd.org/">OpenBSD</a> <span class="badge badge-info">BSD</span> - A project that produces a free, multi-platform 4.4BSD-based UNIX-like operating system. Emphasizes portability, standardization, correctness, proactive security and integrated cryptography.</li>
-  <li><a href="https://dd-wrt.com/">DD-WRT</a> <span class="badge badge-info">Linux</span> <span class="badge badge-warning" data-toggle="tooltip" title="This software may depend on or recommend non-free software.">contrib <i class="far fa-question-circle"></i></span> - A Linux-based open-source firmware compatible with several models of routers and access points.</li>
+  <li>
+    <a href="https://www.openbsd.org/">OpenBSD</a>
+    {% include badge.html
+    color="info"
+    text="BSD"
+    %}
+    - A project that produces a free, multi-platform 4.4BSD-based UNIX-like operating system. Emphasizes portability, standardization, correctness, proactive security and integrated cryptography.
+  </li>
+
+  <li>
+    <a href="https://dd-wrt.com/">DD-WRT</a>
+    {% include badge.html
+    color="info"
+    text="GNU/Linux"
+    %}
+    {% include badge.html
+    color="warning"
+    icon="far fa-question-circle"
+    text="contrib"
+    tooltip="This software may depend on or recommend non-free software."
+    %}
+    - A Linux-based open-source firmware compatible with several models of routers and access points.
+  </li>
 </ul>

_includes/sections/self-contained-networks.html

@@ -61,15 +61,43 @@ github="https://github.com/freenet/"
 <h3>Worth Mentioning</h3>
 
 <ul>
-  <li><a href="https://zeronet.io/">ZeroNet</a> - Open, free, and uncensorable websites, using Bitcoin cryptography and BitTorrent network. <span class="badge badge-danger" data-toggle="tooltip" title="Your IP address isn't hidden by default and won't be, unless you enforce Tor usage.">privacy warning <span class="far fa-question-circle"></span></span></li>
+  <li>
+    <a href="https://zeronet.io/">ZeroNet</a> - Open, free, and uncensorable websites, using Bitcoin cryptography and BitTorrent network.
+    {% include badge.html
+    color="danger"
+    icon="fas fa-exclamation-triangle"
+    tooltip="Your IP address isn't hidden by default and won't be, unless you enforce Tor usage."
+    text="Not anonymous"
+    %}
+  </li>
   <li><a href="https://retroshare.cc/">RetroShare</a> - An open source, cross-platform, friend-to-friend, secure, and decentralized communication platform.</li>
   <li><a href="https://i2pbote.xyz/">I2P-Bote</a> - End-to-end encrypted decentralized mail system within the I2P network.</li>
   <li><a href="https://gnunet.org/">GNUnet</a> - GNUnet provides a strong foundation of free software for a global, distributed network that provides security and privacy.</li>
-  <li><a href="https://ipfs.io/">IPFS</a> <em>and</em> <a href="https://github.com/ipfs-shipyard/ipfs-companion">IPFS Companion</a>- A peer-to-peer hypermedia protocol to make the web faster, safer, and more open. IPFS Companion is a browser extension for redirecting queries to a gateway of your choice (generally local). <a href="https://github.com/privacytools/privacytools.io/pull/361#issuecomment-344414022">
-    <span class="badge badge-danger" data-toggle="tooltip" title="">
-    <span class="fas fa-exclamation-triangle"></span>
-        Important privacy warning
-      </span>
-          </a></li>
-  <li><a href="https://yggdrasil-network.github.io/">Yggdrasil</a> - An early-stage implementation of a fully end-to-end encrypted IPv6 network. It is lightweight, self-arranging, supported on multiple platforms, and allows pretty much any IPv6-capable application to communicate securely with other Yggdrasil nodes. Yggdrasil does not require you to have IPv6 Internet connectivity - it also works over IPv4. <span class="badge badge-warning" data-toggle="tooltip" title="The project is currently in early stages but it is being actively developed.">experimental <i class=\"far fa-question-circle\"></i></span> <span class="badge badge-danger" data-toggle="tooltip" title="Yggdrasil doesn't have a goal of providing anonymity and your peers know your IP address unless you are only using Tor/I2P peers.">privacy warning <i class="far fa-question-circle"></i></span></li>
+  <li>
+    <a href="https://ipfs.io/">IPFS</a> <em>and</em> <a href="https://github.com/ipfs-shipyard/ipfs-companion">IPFS Companion</a>- A peer-to-peer hypermedia protocol to make the web faster, safer, and more open. IPFS Companion is a browser extension for redirecting queries to a gateway of your choice (generally local).
+    {% include badge.html
+    color="warning"
+    icon="fas fa-exclamation-triangle"
+    link="https://github.com/privacytools/privacytools.io/pull/361#issuecomment-344414022"
+    text="Supercookie warning"
+    %}
+  </li>
+  <li>
+    <a href="https://yggdrasil-network.github.io/">Yggdrasil</a>
+    - An early-stage implementation of a fully end-to-end encrypted IPv6 network. It is lightweight, self-arranging, supported on multiple platforms, and allows pretty much any IPv6-capable application to communicate securely with other Yggdrasil nodes. Yggdrasil does not require you to have IPv6 Internet connectivity - it also works over IPv4.
+
+    {% include badge.html
+    color="warning"
+    icon="far fa-question-circle"
+    tooltip="The project is currently in early stages but it is being actively developed."
+    text="Experimental"
+    %}
+    {% include badge.html
+    color="danger"
+    icon="fas fa-exclamation-triangle"
+    link=""
+    tooltip="Yggdrasil doesn't provide anonymity by default. Your peers know your IP address unless you configure it to only use Tor/I2P peers."
+    text="Not anonymous by default"
+    %}
+  </li>
 </ul>

_includes/sections/teamchat.html

@@ -50,7 +50,7 @@
   title="Keybase"
   image="/assets/img/svg/3rd-party/keybase.svg"
   description='Keybase provides a hosted team chat with E2EE. Its protocol has also been <a href="https://keybase.io/docs-assets/blog/NCC_Group_Keybase_KB2018_Public_Report_2019-02-27_v1.3.pdf">indepedently audited (PDF)</a>. Keybase can help you prove you own social media accounts through the use of cryptographic signing of "<a href="https://en.wikipedia.org/wiki/Keybase#Identity_proofs">identity proofs</a>".'
-  labels="color==warning::link==https://github.com/keybase/client/issues/6374::text==Warning::tooltip==This software relies on a closed-source central server."
+  labels="color==warning::link==https://github.com/keybase/client/issues/6374::text==Warning::tooltip==This software relies on a closed-source central server.| color==info::link==https://github.com/privacytools/privacytools.io/issues/1894::text==Ownership change::tooltip==Keybase has recently been acquired by Zoom."
   website="https://keybase.io/"
   privacy-policy="https://keybase.io/docs/privacypolicy"
   forum="https://forum.privacytools.io/t/discussion-keybase/1224"

_includes/sections/voice-video-messenger.html

@@ -1,7 +1,7 @@
 <h1 id="voip" class="anchor"><a href="#voip"><i class="fas fa-link anchor-icon"></i></a> Video/Voice Calling</h1>
 
 <div class="alert alert-warning" role="alert">
-  <strong>If you are currently using a Video/Voice Calling app like Google Hangouts, Skype, Viber or <a href="https://blog.privacytools.io/protecting-your-privacy-while-using-zoom-at-home/">Zoom</a>, you should pick an alternative here.</strong> Please note that many of the above instant messengers also support <span class="badge badge-success">VoIP</span>. The software listed below are <em>primarily</em> Voice/Video focused.
+  <strong>If you are currently using a Video/Voice Calling app like Google Hangouts, Skype, Viber or <a href="https://blog.privacytools.io/protecting-your-privacy-while-using-zoom-at-home/">Zoom</a>, you should pick an alternative here.</strong> Please note that many of the above instant messengers also support {% include badge.html color="info" text="VoIP" %}. The software listed below are <em>primarily</em> Voice/Video focused.
 </div>
 
 {% include cardv2.html
@@ -39,17 +39,24 @@ ios="https://apps.apple.com/us/app/mumble/id443472808?ls=1"
 <ul>
   <li>
     <a href="https://jitsi.org/jitsi-meet/">Jitsi Meet</a> - Jitsi Meet is a free and open-source multiplatform voice (VoIP), video conferencing, and instant messaging application.
-    <span class="badge badge-warning"
-      data-toggle="tooltip"
-      title="Our Firefox tweaks recommend disabling WebRTC as it can be used to leak your IP address even behind a VPN, which is why Tor Browser disables it.">Requires WebRTC
-    </span>
-    <span class="badge badge-warning">
-      <a href="https://jitsi.org/security">Multiparty meetings are not E2EE</a>
-    </span>
+
+    {% include badge.html
+    color="warning"
+    icon="fas fa-exclamation-triangle"
+    text="Requires WebRTC"
+    tooltip="Our Firefox tweaks recommend disabling WebRTC as it can be used to leak your IP address even behind a VPN, which is why Tor Browser disables it."
+    %}
+
+    {% include badge.html
+    color="warning"
+    icon="fas fa-exclamation-triangle"
+    link="https://jitsi.org/security"
+    text="Multiparty meetings are not E2EE"
+    %}
+
     See also <a href="https://github.com/jitsi/jitsi-meet/wiki/Jitsi-Meet-Instances">list of public Jitsi Meet instances</a>.
   </li>
 </ul>
-
 <h3>Related Information</h3>
 
 <ul>

_includes/sections/vpn.html

@@ -9,8 +9,8 @@
   <div class="row mb-2">
     <div class="col-lg-3 col-sm-12 pt-lg-5">
       <img
-        src="/assets/img/svg/3rd-party/mullvad.svg"
-        data-theme-src="/assets/img/svg/3rd-party/mullvad-dark.svg"
+        src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/mullvad.svg"
+        data-theme-src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/mullvad-dark.svg"
         height="70"
         width="200"
         class="img-fluid d-block mr-auto ml-auto align-middle"
@@ -19,89 +19,89 @@
     <div class="col">
     <h2 id="mullvad" class="anchor">
       <a href="#mullvad"><i class="fas fa-link anchor-icon"></i></a> Mullvad
-      <span class="badge badge-info">EUR €60/y</span>
+      {% include badge.html color="info" text="EUR €60/y" %}
     </h2>
     <p><strong><a href="https://mullvad.net/">Mullvad.net</a> </strong> is a fast and inexpensive VPN with a serious focus on transparency and security. They have been in operation since <strong>2009</strong>. Mullvad is based in <span class="flag-icon flag-icon-se"></span> Sweden and does not have a free trial.</p>
-    <h5><span class="badge badge-success">35 Countries</span></h5>
+    <h5>{% include badge.html color="success" text="35 Countries" %}</h5>
     <p>Mullvad has <a href="https://mullvad.net/en/servers/">servers in 35 countries</a> at the time of writing this page. Picking a VPN provider with a server nearest to you will reduce latency of the network traffic you send. This is because of a shorter route (less hops) to the destination.</p>
     <p>We also think it's better for the security of the VPN provider's private keys if they use <a href="https://en.wikipedia.org/wiki/Dedicated_hosting_service">dedicated servers</a>, instead of cheaper shared solutions (with other customers) such as <a href="https://en.wikipedia.org/wiki/Virtual_private_server">virtual private servers</a>.</p>
-    <h5><span class="badge badge-success">Independently Audited</span></h5>
+    <h5>{% include badge.html color="success" text="Independently Audited" %}</h5>
     <p>Mullvad's VPN clients have been audited by Cure53 and Assured AB in a pentest report <a href="https://cure53.de/pentest-report_mullvad_v2.pdf">published at cure53.de</a>. The security researchers concluded:</p>
     <blockquote class="blockquote">
       <p class="mb-0">...Cure53 and Assured AB are happy with the results of the audit and the software leaves an overall positive impression. With security dedication of the in-house team at the Mullvad VPN compound, the testers have no doubts about the project being on the right track from a security standpoint.</p>
     </blockquote>
-    <h5><span class="badge badge-success">Open Source Clients</span></h5>
+    <h5>{% include badge.html color="success" text="Open Source Clients" %}</h5>
     <p>Mullvad provides the source code for their desktop and mobile clients in their <a href="https://github.com/mullvad/mullvadvpn-app">GitHub organization</a>.</p>
-    <h5><span class="badge badge-success">Accepts Bitcoin</span></h5>
+    <h5>{% include badge.html color="success" text="Accepts Bitcoin" %}</h5>
     <p>Mullvad in addition to accepting credit/debit cards and PayPal, accepts <strong>Bitcoin</strong>, <strong>Bitcoin Cash</strong>, and <strong>cash/local currency</strong> as anonymous forms of payment. They also accept Swish and bank wire transfers.</p>
-    <h5><span class="badge badge-success">WireGuard Support</span></h5>
+    <h5>{% include badge.html color="success" text="WireGuard Support" %}</h5>
     <p>In addition to standard OpenVPN connections, Mullvad supports WireGuard. WireGuard is an experimental protocol with theoretically better security and higher reliability, although it is not currently recommended for production use.</p>
-    <h5><span class="badge badge-success">IPv6 Support</span></h5>
+    <h5>{% include badge.html color="success" text="IPv6 Support" %}</h5>
     <p>Mullvad supports the future of networking <a href="https://en.wikipedia.org/wiki/IPv6">IPv6</a>. Their network allows users to <a href="https://mullvad.net/en/blog/2014/9/15/ipv6-support/">access services hosted on IPv6</a> as opposed to other providers who block IPv6 connections.</p>
-    <h5><span class="badge badge-success">Remote Port Forwarding</span></h5>
+    <h5>{% include badge.html color="success" text="Remote Port Forwarding" %}</h5>
     <p>Remote <a href="https://en.wikipedia.org/wiki/Port_forwarding">port forwarding</a> is allowed on Mullvad, see <a href="https://mullvad.net/help/port-forwarding-and-mullvad/">Port forwarding with Mullvad VPN</a>.</p>
-    <h5><span class="badge badge-success">Mobile Clients</span></h5>
+    <h5>{% include badge.html color="success" text="Mobile Clients" %}</h5>
     <p>Mullvad has published <a href ="https://apps.apple.com/app/mullvad-vpn/id1488466513">App Store</a> and <a href="https://play.google.com/store/apps/details?id=net.mullvad.mullvadvpn">Google Play</a> clients, both supporting an easy-to use interface as opposed to requiring users to manual configure their WireGuard connections.</p>
-    <h5><span class="badge badge-info">Extra Functionality</span></h5>
+    <h5>{% include badge.html color="info" text="Extra Functionality" %}</h5>
     <p>The Mullvad VPN clients have a built-in killswitch to block internet connections outside of the VPN. They also are able to automatically start on boot. The Mullvad website is also accessible via Tor at <a href="http://xcln5hkbriyklr6n.onion/">xcln5hkbriyklr6n.onion</a>.</p>
     </div>
   </div>
   <div class="row mb-2">
     <div class="col-lg-3 col-sm-12 pt-lg-5">
-      <img src="/assets/img/svg/3rd-party/protonvpn.svg" height="70" width="200" class="img-fluid d-block mr-auto ml-auto align-middle" alt="ProtonVPN">
+      <img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/protonvpn.svg" height="70" width="200" class="img-fluid d-block mr-auto ml-auto align-middle" alt="ProtonVPN">
     </div>
     <div class="col">
     <h2 id="protonvpn" class="anchor">
       <a href="#protonvpn"><i class="fas fa-link anchor-icon"></i></a> ProtonVPN
-      <span class="badge badge-info">Free</span>
-      <span class="badge badge-info">Basic USD $48/y</span>
-      <span class="badge badge-secondary">Plus USD $96/y</span>
+      {% include badge.html color="info" text="Free" %}
+      {% include badge.html color="info" text="Basic USD $48/y" %}
+      {% include badge.html color="secondary" text="Plus USD $96/y" %}
     </h2>
     <p><strong><a href="https://protonvpn.com/">ProtonVPN.com</a></strong> is a strong contender in the VPN space, and they have been in operation since <strong>2016</strong>. ProtonVPN is based in <span class="flag-icon flag-icon-ch"></span> Switzerland and offers a limited free pricing tier, as well as premium options. They offer a further 14% discount for buying a 2 year subscription.</p>
-    <h5><span class="badge badge-success">44 Countries</span></h5>
+    <h5>{% include badge.html color="success" text="44 Countries" %}</h5>
     <p>ProtonVPN has <a href="https://protonvpn.com/vpn-servers">servers in 44 countries</a> at the time of writing this page. Picking a VPN provider with a server nearest to you will reduce latency of the network traffic you send. This is because of a shorter route (less hops) to the destination.</p>
     <p>We also think it's better for the security of the VPN provider's private keys if they use <a href="https://en.wikipedia.org/wiki/Dedicated_hosting_service">dedicated servers</a>, instead of cheaper shared solutions (with other customers) such as <a href="https://en.wikipedia.org/wiki/Virtual_private_server">virtual private servers</a>.</p>
-    <h5><span class="badge badge-success">Independently Audited</span></h5>
+    <h5>{% include badge.html color="success" text="Independently Audited" %}</h5>
     <p>As of January 2020 ProtonVPN has undergone an independent audit by SEC Consult. SEC Consult found some medium and low risk vulnerabilities in ProtonVPN's Windows, Android, and iOS applications, all of which were "properly fixed" by ProtonVPN before the reports were published. None of the issues identified would have provided an attacker remote access to a user's device or traffic. You can view individual reports for each platform at <a href="https://protonvpn.com/blog/open-source/">protonvpn.com</a>.
-    <h5><span class="badge badge-success">Open Source Clients</span></h5>
+    <h5>{% include badge.html color="success" text="Open Source Clients" %}</h5>
     <p>ProtonVPN provides the source code for their desktop and mobile clients in their <a href="https://github.com/ProtonVPN">GitHub organization</a>.</p>
-    <h5><span class="badge badge-success">Accepts Bitcoin</span></h5>
+    <h5>{% include badge.html color="success" text="Accepts Bitcoin" %}</h5>
     <p>ProtonVPN does technically accept Bitcoin payments; however, you either need to have an existing account, or contact their support team in advance to register with Bitcoin.</p>
-    <h5><span class="badge badge-success">Mobile Clients</span></h5>
+    <h5>{% include badge.html color="success" text="Mobile Clients" %}</h5>
     <p>In addition to providing standard OpenVPN configuration files, ProtonVPN has mobile clients for <a href="https://apps.apple.com/us/app/protonvpn-fast-secure-vpn/id1437005085">App Store</a> and <a href="https://play.google.com/store/apps/details?id=ch.protonvpn.android&hl=en_US">Google Play</a> allowing for easy connections to their servers. The mobile client on Android is also available in <a href="https://f-droid.org/en/packages/ch.protonvpn.android">F-Droid</a>, which ensures that it is compiled with <a href="https://www.f-droid.org/en/2019/05/05/trust-privacy-and-free-software.html">reproducable builds</a>.</p>
-    <h5><span class="badge badge-warning">No Port Forwarding</span></h5>
+    <h5>{% include badge.html color="warning" text="No Port Forwarding" %}</h5>
     <p>ProtonVPN does not currently support remote port forwarding, which may impact some applications. Especially Peer-to-Peer applications like Torrent clients.</p>
-    <h5><span class="badge badge-info">Extra Functionality</span></h5>
+    <h5>{% include badge.html color="info" text="Extra Functionality" %}</h5>
     <p>The ProtonVPN clients have a built-in killswitch to block internet connections outside of the VPN. They also are able to automatically start on boot. ProtonVPN also offers "Tor" servers allowing you to easily connect to onion sites, but we still strongly recommend using <a href="https://www.torproject.org/">the official Tor Browser</a> for this purpose.</p>
     </div>
   </div>
   <div class="row mb-2">
     <div class="col-lg-3 col-sm-12 pt-lg-5">
-      <img src="/assets/img/svg/3rd-party/ivpn.svg" height="70" width="200" class="img-fluid d-block mr-auto ml-auto align-middle" alt="IVPN">
+      <img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/ivpn.svg" height="70" width="200" class="img-fluid d-block mr-auto ml-auto align-middle" alt="IVPN">
     </div>
     <div class="col">
     <h2 id="ivpn" class="anchor">
       <a href="#ivpn"><i class="fas fa-link anchor-icon"></i></a> IVPN
-      <span class="badge badge-info">Standard USD $60/y</span>
-      <span class="badge badge-secondary">Pro USD $100/y</span>
+      {% include badge.html color="info" text="Standard USD $60/y" %}
+      {% include badge.html color="secondary" text="Pro USD $100/y" %}
     </h2>
     <p><strong><a href="https://www.ivpn.net">IVPN.net</a></strong> is another premium VPN provider, and they have been in operation since <strong>2009</strong>. IVPN is based in <span class="flag-icon flag-icon-gi"></span> Gibraltar and offers a 3 day free trial.</p>
-    <h5><span class="badge badge-success">32 Countries</span></h5>
+    <h5>{% include badge.html color="success" text="32 Countries" %}</h5>
     <p>IVPN has <a href="https://www.ivpn.net/server-locations">servers in 32 countries</a> at the time of writing this page. Picking a VPN provider with a server nearest to you will reduce latency of the network traffic you send. This is because of a shorter route (less hops) to the destination.</p>
     <p>We also think it's better for the security of the VPN provider's private keys if they use <a href="https://en.wikipedia.org/wiki/Dedicated_hosting_service">dedicated servers</a>, instead of cheaper shared solutions (with other customers) such as <a href="https://en.wikipedia.org/wiki/Virtual_private_server">virtual private servers</a>.</p>
-    <h5><span class="badge badge-success">Independently Audited</span></h5>
+    <h5>{% include badge.html color="success" text="Independently Audited" %}</h5>
     <p>IVPN has undergone a <a href="https://cure53.de/audit-report_ivpn.pdf">no-logging audit from Cure53</a> which concluded in agreement with IVPN's no-logging claim. IVPN has also completed a <a href="https://cure53.de/summary-report_ivpn_2019.pdf">comprehensive pentest report Cure53</a> in January 2020. IVPN has also said they plan to have <a href="https://www.ivpn.net/blog/independent-security-audit-concluded">annual reports</a> in the future.</p>
-    <h5><span class="badge badge-success">Open Source Clients</span></h5>
+    <h5>{% include badge.html color="success" text="Open Source Clients" %}</h5>
     <p>As of Feburary 2020 <a href="https://www.ivpn.net/blog/ivpn-applications-are-now-open-source">IVPN applications are now open source</a>. Source code can be obtained from their <a href="https://github.com/ivpn">GitHub organization</a>.</p>
-    <h5><span class="badge badge-success">Accepts Bitcoin</span></h5>
+    <h5>{% include badge.html color="success" text="Accepts Bitcoin" %}</h5>
     <p>In addition to accepting credit/debit cards and PayPal, IVPN accepts <strong>Bitcoin</strong> and <strong>cash/local currency</strong> (on annual plans) as anonymous forms of payment.</p>
-    <h5><span class="badge badge-success">WireGuard Support</span></h5>
+    <h5>{% include badge.html color="success" text="WireGuard Support" %}</h5>
     <p>In addition to standard OpenVPN connections, IVPN supports WireGuard. WireGuard is an experimental protocol with theoretically better security and higher reliability, although it is not currently recommended for production use.</p>
-    <h5><span class="badge badge-success">Remote Port Forwarding</span></h5>
+    <h5>{% include badge.html color="success" text="Remote Port Forwarding" %}</h5>
     <p>Remote <a href="https://en.wikipedia.org/wiki/Port_forwarding">port forwarding</a> is possible with a Pro plan. Port forwarding <a href="https://www.ivpn.net/knowledgebase/81/How-do-I-activate-port-forwarding.html">can be activated</a> via the client area. Port forwarding is only available on IVPN when <a href="https://www.ivpn.net/knowledgebase/116/Port-forwarding-is-not-working-why.html">using OpenVPN and is disabled on US servers</a>.</p>
-    <h5><span class="badge badge-success">Mobile Clients</span></h5>
+    <h5>{% include badge.html color="success" text="Mobile Clients" %}</h5>
     <p>In addition to providing standard OpenVPN configuration files, IVPN has mobile clients for <a href="https://apps.apple.com/us/app/ivpn-serious-privacy-protection/id1193122683">App Store</a> and <a href="https://play.google.com/store/apps/details?id=net.ivpn.client">Google Play</a> allowing for easy connections to their servers. The mobile client on Android is also available in <a href="https://f-droid.org/en/packages/net.ivpn.client">F-Droid</a>, which ensures that it is compiled with <a href="https://www.f-droid.org/en/2019/05/05/trust-privacy-and-free-software.html">reproducable builds</a>.</p>
-    <h5><span class="badge badge-info">Extra Functionality</span></h5>
+    <h5>{% include badge.html color="info" text="Extra Functionality" %}</h5>
     <p>The IVPN clients have a built-in killswitch to block internet connections outside of the VPN. They also are able to automatically start on boot. IVPN also provides "<a href="https://www.ivpn.net/antitracker">AntiTracker</a>" functionality, which blocks advertising networks and trackers from the network level.</p>
     </div>
   </div>

_includes/sections/warrant-canary.html

@@ -1,6 +1,6 @@
 <h1 id="wc" class="anchor"><a href="#wc"><i class="fas fa-link anchor-icon"></i></a> What is a warrant canary?</h1>
 
-<img src="/assets/img/svg/layout/warrant_canary_example.svg" width="450px" class="img-fluid float-right ml-3" alt="Warrant Canary Example">
+<img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/layout/warrant_canary_example.svg" width="450px" class="img-fluid float-right ml-3" alt="Warrant Canary Example">
 
 <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>
 

_includes/sections/windows10.html

@@ -4,7 +4,7 @@
   <strong>Microsoft introduced a lot of new features in Windows 10 such as Cortana. However, most of them are violating your privacy.</strong>
 </div>
 
-<img src="/assets/img/svg/layout/windows_privacy.svg" width="367" height="369" class="img-fluid float-right ml-3" alt="Windows 10 Privacy">
+<img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/layout/windows_privacy.svg" width="367" height="369" class="img-fluid float-right ml-3" alt="Windows 10 Privacy">
 
 <ol>
   <li><strong>Data syncing is by default enabled.</strong>

_includes/sponsors/gold.html

@@ -1,8 +1,8 @@
 <div class="d-flex flex-wrap justify-content-center">
   <a class="m-3" href="https://safing.io" target="_blank" rel="noreferrer">
     <img
-      src="/assets/img/svg/3rd-party/sponsors/safing.svg"
-      data-theme-src="/assets/img/svg/3rd-party/sponsors/safing-dark.svg"
+      src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/sponsors/safing.svg"
+      data-theme-src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/sponsors/safing-dark.svg"
       width="210rem"
       title="Safing Privacy Network - Launching on Kickstarter January 2nd, 2020"
       alt="Safing Privacy Network - Safing.io Logo" />

_layouts/minimal.html

@@ -2,7 +2,7 @@
 <html lang="en">
 {% include head.html %}
 <body data-spy="scroll" data-target="#navbar">
-  <script src="/assets/js/applytheme.js?v=1"></script>
+  <script src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/js/applytheme.js?v=1"></script>
   <header>
   {% include nav.html %}
   <div id="top" class="py-4"></div>

assets/img/png/favicons/browserconfig.xml

@@ -2,7 +2,7 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/assets/img/png/favicons/mstile-150x150.png"/>
+            <square150x150logo src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/png/favicons/mstile-150x150.png"/>
             <TileColor>#3498db</TileColor>
         </tile>
     </msapplication>

index.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<script src="/assets/js/redirects.js"></script>
+<script src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/js/redirects.js"></script>
 {% include sections/header.html %}
 {% include sections/resources.html %}
 

nginx/010-headers.conf

@@ -1,7 +1,7 @@
 add_header X-Frame-Options DENY always;
 add_header X-XSS-Protection "1; mode=block" always;
 add_header X-Content-Type-Options nosniff always;
-add_header Content-Security-Policy "default-src 'none'; script-src 'self' https://stats.privacytools.io; style-src 'self'; img-src 'self' data: https://*.privacytools.io; object-src 'none'; frame-src https://stats.privacytools.io; font-src 'self'; base-uri 'none'; form-action 'self' https://search.privacytools.io; frame-ancestors 'none'; manifest-src 'self';" always;
+add_header Content-Security-Policy "default-src 'none'; script-src 'self' https://cdn.privacytools.io https://stats.privacytools.io; style-src 'self' https://cdn.privacytools.io; img-src 'self' https://cdn.privacytools.io data: https://*.privacytools.io; object-src 'none'; frame-src https://stats.privacytools.io; font-src 'self' https://cdn.privacytools.io; base-uri 'none'; form-action 'self' https://search.privacytools.io; frame-ancestors 'none'; manifest-src 'self' https://cdn.privacytools.io;" always;
 add_header 'Access-Control-Allow-Origin' '*';
 add_header Strict-Transport-Security "max-age=31557600; includeSubDomains; preload";
 add_header Alt-Svc 'h2="privacy2zbidut4m4jyj3ksdqidzkw3uoip2vhvhbvwxbqux5xy5obyd.onion:443"; ma=86400; persist=1';

pages/donate.html

@@ -8,7 +8,7 @@ permalink: /donate/
     <div class="mx-auto text-center">
       <div class="mt-4 mb-4">
         <a href="{{ site.production_url }}">
-          <img class="img-fluid" src="/assets/img/svg/layout/brand/horizontal.svg" width="450px" alt="{{ site.name }}">
+          <img class="img-fluid" src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/layout/brand/horizontal.svg" width="450px" alt="{{ site.name }}">
         </a>
       </div>
 

pages/providers/dns.html

@@ -13,10 +13,21 @@ breadcrumb: "DNS"
 <ul>
   <li>DNS-over-TLS (DoT) - A security protocol for encrypted DNS on a dedicated port 853. Some providers support port 443 which generally works everywhere while port 853 is often blocked by restrictive firewalls. DoT has two modes:</li>
     <ul>
-        <li>Oppurtunistic mode: the client attempts to form a DNS-over-TLS connection to the server on port 853 without performing certificate validation. If it fails, it will use unencrypted DNS. <span class="badge badge-warning" data-toggle="tooltip" data-original-title="In other words automatic mode leaves your DNS traffic vulnerable to SSL strip and MITM attacks"><i class="fas fa-exclamation-triangle"></i></span></li>
+        <li>Oppurtunistic mode: the client attempts to form a DNS-over-TLS connection to the server on port 853 without performing certificate validation. If it fails, it will use unencrypted DNS.
+        {% include badge.html
+        color="warning"
+        icon="fas fa-exclamation-triangle"
+        tooltip="In other words automatic mode leaves your DNS traffic vulnerable to SSL strip and MITM attacks."
+        %}</li>
         <li>Strict mode: the client connects to a specific hostname and performs certificate validation for it. If it fails, no DNS queries are made until it succeeds.</li>
     </ul>
-  <li>DNS-over-HTTPS (DoH) - Similar to DoT, but uses HTTPS instead, being indistinguishable from "normal" HTTPS traffic on port 443. <span class="badge badge-warning" data-toggle="tooltip" data-original-title="DoH contains metadata such as user-agent (which may include system information) that is sent to the DNS server."><a href="https://tools.ietf.org/html/rfc8484#section-8.2"><i class="fas fa-exclamation-triangle"></i></a></span></li>
+  <li>DNS-over-HTTPS (DoH) - Similar to DoT, but uses HTTPS instead, being indistinguishable from "normal" HTTPS traffic on port 443.
+    {% include badge.html
+    color="warning"
+    icon="fas fa-exclamation-triangle"
+    link="https://tools.ietf.org/html/rfc8484#section-8.2"
+    tooltip="DoH contains metadata such as user-agent (which may include system information) that is sent to the DNS server."
+    %}</li>
   <li>DNSCrypt - An older yet robust method of encrypting DNS.</li>
 </ul>
 
@@ -25,9 +36,20 @@ breadcrumb: "DNS"
 <ul>
   <li>DoH / DoT
     <ul>
-      <li>Check <a href="https://www.dnsleaktest.com/">DNSLeakTest.com</a>. <span class="badge badge-warning" data-toggle="tooltip" data-placement="bottom" data-original-title="Your DNS provider may not appear with their own name, so compare the responses to what you know or can find about your DNS provider. Just ensure you don't see your ISP or old unencrypted DNS provider."><i class="fas fa-exclamation-triangle"></i></span></li>
+      <li>Check <a href="https://www.dnsleaktest.com/">DNSLeakTest.com</a>.
+        {% include badge.html
+        color="warning"
+        icon="fas fa-exclamation-triangle"
+        tooltip="Your DNS provider may not appear with their own name, so compare the responses to what you know or can find about your DNS provider. Just ensure you don't see your ISP or old unencrypted DNS provider."
+        %}</li>
       <li>Check the website of your DNS provider. They may have a page for telling "you are using our DNS." Examples include <a href="https://adguard.com/en/adguard-dns/overview.html">AdGuard</a> and <a href="https://1.1.1.1/help">Cloudflare</a>.</li>
-      <li>If using Firefox's trusted recursive resolver (TRR), navigate to <code>about:networking#dns</code>. If the TRR column says "true" for some fields, you are using DoH. <span class="badge badge-warning" data-toggle="tooltip" data-placement="bottom" data-original-title='Some fields will say "false" depending on the the value of network.trr.mode in about:config'><a href="https://wiki.mozilla.org/Trusted_Recursive_Resolver"><i class="fas fa-exclamation-triangle"></i></a></span></li>
+      <li>If using Firefox's trusted recursive resolver (TRR), navigate to <code>about:networking#dns</code>. If the TRR column says "true" for some fields, you are using DoH.
+        {% include badge.html
+        color="warning"
+        icon="fas fa-exclamation-triangle"
+        link="https://wiki.mozilla.org/Trusted_Recursive_Resolver"
+        tooltip="Some fields will say 'false' depending on the the value of network.trr.mode in about:config"
+        %}</li>
     </ul>
   </li>
   <li>dnscrypt-proxy - Check <a href="https://github.com/jedisct1/dnscrypt-proxy/wiki/Checking">dnscrypt-proxy's wiki on how to verify that your DNS is encrypted</a>.</li>
@@ -40,7 +62,14 @@ breadcrumb: "DNS"
 <ul>
   <li><strong>Encrypted DNS clients for desktop:</strong>
     <ul>
-      <li><em>Firefox</em> comes with built-in DoH support with Cloudflare set as the default resolver, but can be configured to use any DoH resolver. <span class="badge badge-warning" data-toggle="tooltip" data-placement="bottom" data-original-title='"Cloudflare has agreed to collect only a limited amount of data about the DNS requests that are sent to the Cloudflare Resolver for Firefox via the Firefox browser."'><a href="https://developers.cloudflare.com/1.1.1.1/commitment-to-privacy/privacy-policy/firefox/"><i class="fas fa-exclamation-triangle"></i></a></span> Currently Mozilla is <a href="https://blog.mozilla.org/futurereleases/2019/07/31/dns-over-https-doh-update-detecting-managed-networks-and-user-choice/">conducting studies</a> before enabling DoH by default for all US-based Firefox users.</li>
+      <li><em>Firefox</em> comes with built-in DoH support with Cloudflare set as the default resolver, but can be configured to use any DoH resolver.
+        {% include badge.html
+        color="warning"
+        icon="fas fa-exclamation-triangle"
+        link="https://developers.cloudflare.com/1.1.1.1/commitment-to-privacy/privacy-policy/firefox/"
+        tooltip="&quot;Cloudflare has agreed to collect only a limited amount of data about the DNS requests that are sent to the Cloudflare Resolver for Firefox via the Firefox browser.&quot;"
+        %}
+        Currently Mozilla is <a href="https://blog.mozilla.org/futurereleases/2019/07/31/dns-over-https-doh-update-detecting-managed-networks-and-user-choice/">conducting studies</a> before enabling DoH by default for all US-based Firefox users.</li>
           <ul>
               <li>DNS over HTTPS can be enabled in Menu -> Preferences (<code>about:preferences</code>) -> Network Settings -> Enable DNS over HTTPS. Set "Use Provider" to "Custom", and enter your DoH provider's address.</li>
               <li>Advanced users may enable it in <code>about:config</code> by setting <code>network.trr.custom_uri</code> and <code>network.trr.uri</code> as the address you find from the documentation of your DoH provider and <code>network.trr.mode</code> as <code>2</code>. It may also be desirable to set <code>network.security.esni.enabled</code> to <code>True</code> in order to enable encrypted SNI and make sites supporting ESNI a bit more difficult to track.</li>
@@ -49,9 +78,20 @@ breadcrumb: "DNS"
   </li>
   <li><strong>Encrypted DNS clients for mobile:</strong>
     <ul>
-      <li><em>Android 9</em> comes with a DoT client by <a href="https://support.google.com/android/answer/9089903">default</a>. <span class="badge badge-warning" data-toggle="tooltip" data-original-title="...but with some caveats"><a href="https://www.quad9.net/private-dns-quad9-android9/"><i class="fas fa-exclamation-triangle"></i></a></span></li>
+      <li><em>Android 9</em> comes with a DoT client by <a href="https://support.google.com/android/answer/9089903">default</a>.
+        {% include badge.html
+        color="warning"
+        icon="fas fa-exclamation-triangle"
+        link="https://www.quad9.net/private-dns-quad9-android9/"
+        tooltip="...but with some caveats"
+        %}</li>
         <ul>
-          <li>We recommend selecting <em>Private DNS provider hostname</em> and entering the DoT address from documentation of your DoT provider to enable strict mode (see Terms above). <span class="badge badge-warning" data-toggle="tooltip" data-original-title="If you are on a network blocking access to port 853, Android will error about the network not having internet connectivity."><i class="fas fa-exclamation-triangle"></i></span></li>
+          <li>We recommend selecting <em>Private DNS provider hostname</em> and entering the DoT address from documentation of your DoT provider to enable strict mode (see Terms above).
+            {% include badge.html
+            color="warning"
+            icon="fas fa-exclamation-triangle"
+            tooltip="If you are on a network blocking access to port 853, Android will error about the network not having internet connectivity."
+            %}</li>
         </ul>
       <li><em><a href="https://apps.apple.com/app/id1452162351">DNSCloak</a></em> - An <a href="https://github.com/s-s/dnscloak">open-source</a> DNSCrypt and DoH client for iOS by <td><a data-toggle="tooltip" data-placement="bottom" data-original-title='"A charitable non-profit host organization for international Free Software projects."' href="https://techcultivation.org/">the Center for the Cultivation of Technology gemeinnuetzige GmbH</a>.</li>
       <li><em><a href="https://git.frostnerd.com/PublicAndroidApps/smokescreen/blob/master/README.md">Nebulo</a></em> - An open-source application for Android supporting DoH and DoT. It also supports caching DNS responses and locally logging DNS queries.</li>

pages/providers/email.html

@@ -17,7 +17,7 @@ description: "Find a secure email provider that will keep your privacy in mind.
 <div class="container">
   <div class="row">
     <div class="col-12">
-      <h3><span class="badge badge-info">Jurisdiction</span></h3>
+      <h3>{% include badge.html color="info" text="Jurisdiction" %}</h3>
       <p>Operating outside the five/nine/fourteen-eyes countries is not necessarily a guarantee of privacy, and there are other factors to consider. However, we believe that avoiding these countries is important if you wish to avoid mass government dragnet surveillance, especially from the United States. Read our page on <a href="/providers/#ukusa">global mass surveillance and avoiding the US and UK</a> to learn more about why we feel this is important.</p>
     </div>
     <div class="col-md-6">
@@ -35,7 +35,7 @@ description: "Find a secure email provider that will keep your privacy in mind.
     </div>
 
     <div class="col-12">
-      <h3><span class="badge badge-info">Technology</span></h3>
+      <h3>{% include badge.html color="info" text="Technology" %}</h3>
       <p>We regard these features as important in order to provide a safe and optimal service to users. Users should consider the provider which has the features they require.</p>
     </div>
     <div class="col-md-6">
@@ -60,7 +60,7 @@ description: "Find a secure email provider that will keep your privacy in mind.
     </div>
 
     <div class="col-12">
-      <h3><span class="badge badge-info">Privacy</span></h3>
+      <h3>{% include badge.html color="info" text="Privacy" %}</h3>
       <p>We prefer our recommended providers to collect as little data as possible.</p>
     </div>
     <div class="col-md-6">
@@ -79,7 +79,7 @@ description: "Find a secure email provider that will keep your privacy in mind.
     </div>
 
     <div class="col-12">
-      <h3><span class="badge badge-info">Security</span></h3>
+      <h3>{% include badge.html color="info" text="Security" %}</h3>
       <p>Email servers deal with a lot of very sensitive data. We expect that providers will adopt best industry practices in order to protect their users.</p>
     </div>
     <div class="col-md-6">
@@ -118,7 +118,7 @@ description: "Find a secure email provider that will keep your privacy in mind.
     </div>
 
     <div class="col-12">
-      <h3><span class="badge badge-info">Trust</span></h3>
+      <h3>{% include badge.html color="info" text="Trust" %}</h3>
       <p>You wouldn't trust your finances to someone with a fake identity, so why trust them with your email? We require our recommended providers to be public about their ownership or leadership. We also would like to see frequent transparency reports, especially in regard to how government requests are handled.</p>
     </div>
     <div class="col-md-6">
@@ -136,7 +136,7 @@ description: "Find a secure email provider that will keep your privacy in mind.
     </div>
 
     <div class="col-12">
-      <h3><span class="badge badge-info">Marketing</span></h3>
+      <h3>{% include badge.html color="info" text="Marketing" %}</h3>
       <p>With the email providers we recommend we like to see responsible marketing.</p>
     </div>
     <div class="col-md-6">
@@ -162,7 +162,7 @@ description: "Find a secure email provider that will keep your privacy in mind.
     </div>
 
     <div class="col-12">
-      <h3><span class="badge badge-info">Additional Functionality</span></h3>
+      <h3>{% include badge.html color="info" text="Additional Functionality" %}</h3>
       <p>While not strictly requirements, there are some factors we looked into when determining which providers to recommend.</p>
     </div>
   </div>
@@ -217,15 +217,15 @@ description: "Find a secure email provider that will keep your privacy in mind.
 <h1 id="cloaking" class="anchor"><a href="#cloaking"><i class="fas fa-link anchor-icon"></i></a> Email cloaking services</h1>
 <div class="container">
   <a href="https://anonaddy.com">
-    <img src="/assets/img/svg/3rd-party/anonaddy.svg"
-        data-theme-src="/assets/img/svg/3rd-party/anonaddy-dark.svg"
+    <img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/anonaddy.svg"
+        data-theme-src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/anonaddy-dark.svg"
          width="180rem" class="img-fluid float-left mr-3"
          alt="AnonAddy">
   </a>
   <br>
   <p><strong><a href="https://anonaddy.com">AnonAddy</a></strong> lets users create aliases that forward to their email address. Can be self-hosted. <a href="https://github.com/anonaddy/anonaddy">Source code on GitHub</a>.</p>
   <a href="https://simplelogin.io">
-    <img src="/assets/img/svg/3rd-party/simplelogin.svg"
+    <img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/simplelogin.svg"
          width="180rem" class="img-fluid float-left mr-3"
          alt="SimpleLogin">
   </a>
@@ -238,14 +238,14 @@ description: "Find a secure email provider that will keep your privacy in mind.
   <p>Advanced users may consider setting up their own email server. Mailservers require attention and continuous maintenance in order to keep things secure and mail delivery reliable.</p>
   <h3>Combined software solutions</h3>
   <a href="https://mailinabox.email/">
-    <img src="/assets/img/svg/3rd-party/mail-in-a-box.svg"
+    <img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/mail-in-a-box.svg"
          width="80rem" class="img-fluid float-left mr-3"
          alt="Mail-in-a-Box">
   </a>
   <br>
   <p><strong><a href="https://mailinabox.email">Mail-in-a-Box</a></strong> is an automated setup script for deploying a mail server on Ubuntu. Its goal is to make it easier for users to set up their own mail server.</p>
   <a href="https://mailcow.email/">
-    <img src="/assets/img/svg/3rd-party/mailcow.svg"
+    <img src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/svg/3rd-party/mailcow.svg"
          width="80rem" class="img-fluid float-left mr-3"
          alt="Mailcow">
   </a>

pages/providers/vpn.html

@@ -29,7 +29,7 @@ breadcrumb: "VPN"
 <div class="container">
   <div class="row">
     <div class="col-12">
-      <h3><span class="badge badge-info">Jurisdiction</span></h3>
+      <h3>{% include badge.html color="info" text="Jurisdiction" %}</h3>
       <p>Operating outside the five/nine/fourteen-eyes countries is not a guarantee of privacy necessarily, and there are other factors to consider. However, we believe that avoiding these countries is important if you wish to avoid mass government dragnet surveillance, especially from the United States. Read our page on <a href="/providers/#ukusa">global mass surveillance and avoiding the US and UK</a> to learn more about why we feel this is important.</p>
     </div>
     <div class="col-md-6">
@@ -47,7 +47,7 @@ breadcrumb: "VPN"
     </div>
 
     <div class="col-12">
-      <h3><span class="badge badge-info">Technology</span></h3>
+      <h3>{% include badge.html color="info" text="Technology" %}</h3>
       <p>We require all our recommended VPN providers to provide OpenVPN configuration files to be used in any client. <strong>If</strong> a VPN provides their own custom client, we require a killswitch to block network data leaks when disconnected.</p>
     </div>
     <div class="col-md-6">
@@ -70,7 +70,7 @@ breadcrumb: "VPN"
     </div>
 
     <div class="col-12">
-      <h3><span class="badge badge-info">Privacy</span></h3>
+      <h3>{% include badge.html color="info" text="Privacy" %}</h3>
       <p>We prefer our recommended providers to collect as little data as possible. Not collecting personal information on registration, and accepting anonymous forms of payment are required.</p>
     </div>
     <div class="col-md-6">
@@ -89,7 +89,7 @@ breadcrumb: "VPN"
     </div>
 
     <div class="col-12">
-      <h3><span class="badge badge-info">Security</span></h3>
+      <h3>{% include badge.html color="info" text="Security" %}</h3>
       <p>A VPN is pointless if it can't even provide adequate security. We require all our recommended providers to abide by current security standards for their OpenVPN connections. Ideally, they would use more future-proof encryption schemes by default. We also require an independent third-party to audit the provider's security, ideally in a very comprehensive manner and on a repeated (yearly) basis.</p>
     </div>
     <div class="col-md-6">
@@ -111,7 +111,7 @@ breadcrumb: "VPN"
     </div>
 
     <div class="col-12">
-      <h3><span class="badge badge-info">Trust</span></h3>
+      <h3>{% include badge.html color="info" text="Trust" %}</h3>
       <p>You wouldn't trust your finances to someone with a fake identity, so why trust them with your internet data? We require our recommended providers to be public about their ownership or leadership. We also would like to see frequent transparency reports, especially in regard to how government requests are handled.</p>
     </div>
     <div class="col-md-6">
@@ -129,7 +129,7 @@ breadcrumb: "VPN"
     </div>
 
     <div class="col-12">
-      <h3><span class="badge badge-info">Marketing</span></h3>
+      <h3>{% include badge.html color="info" text="Marketing" %}</h3>
       <p>With the VPN providers we recommend we like to see responsible marketing.</p>
     </div>
     <div class="col-md-6">
@@ -159,7 +159,7 @@ breadcrumb: "VPN"
     </div>
 
     <div class="col-12">
-      <h3><span class="badge badge-info">Additional Functionality</span></h3>
+      <h3>{% include badge.html color="info" text="Additional Functionality" %}</h3>
       <p>While not strictly requirements, there are some factors we looked into when determining which providers to recommend. These include adblocking/tracker-blocking functionality, warrant canaries, multihop connections, excellent customer support, the number of allowed simultaneous connections, etc.</p>
     </div>
   </div>
@@ -230,21 +230,33 @@ breadcrumb: "VPN"
           <li><a href="https://gist.github.com/kennwhite/1f3bc4d889b02b35d8aa">Don't use LT2P IPSec, use other protocols.</a></li>
           <li>
             <a href="https://www.top10vpn.com/free-vpn-app-investigation/">Free VPN App Investigation</a>
-            <span class="badge badge-warning" data-toggle="tooltip" title="This site has affiliate based recommendations">
-              <a href="https://blog.privacytools.io/the-trouble-with-vpn-and-privacy-reviews"/>Warning</a>
-            </span>
+            {% include badge.html
+            color="warning"
+            icon="fas fa-exclamation-triangle"
+            link="https://blog.privacytools.io/the-trouble-with-vpn-and-privacy-reviews"
+            tooltip="This site has affiliate based recommendations. They get paid for referring visitors to specific VPN providers."
+            text="Affiliate program"
+            %}
           </li>
           <li>
             <a href="https://vpnpro.com/blog/hidden-vpn-owners-unveiled-97-vpns-23-companies/">Hidden VPN owners unveiled: 101 VPN products run by just 23 companies</a>
-            <span class="badge badge-warning" data-toggle="tooltip" title="This site has affiliate based recommendations">
-              <a href="https://blog.privacytools.io/the-trouble-with-vpn-and-privacy-reviews"/>Warning</a>
-            </span>
+            {% include badge.html
+            color="warning"
+            icon="fas fa-exclamation-triangle"
+            link="https://blog.privacytools.io/the-trouble-with-vpn-and-privacy-reviews"
+            tooltip="This site has affiliate based recommendations. They get paid for referring visitors to specific VPN providers."
+            text="Affiliate program"
+            %}
           </li>
           <li>
             <a href="https://vpnpro.com/blog/chinese-company-secretly-behind-popular-apps-seeking-dangerous-permissions/">This Chinese company is secretly behind 24 popular apps seeking dangerous permissions</a>
-            <span class="badge badge-warning" data-toggle="tooltip" title="This site has affiliate based recommendations">
-              <a href="https://blog.privacytools.io/the-trouble-with-vpn-and-privacy-reviews"/>Warning</a>
-            </span>
+            {% include badge.html
+            color="warning"
+            icon="fas fa-exclamation-triangle"
+            link="https://blog.privacytools.io/the-trouble-with-vpn-and-privacy-reviews"
+            tooltip="This site has affiliate based recommendations. They get paid for referring visitors to specific VPN providers."
+            text="Affiliate program"
+            %}
           </li>
         </ul>
 
@@ -260,7 +272,7 @@ breadcrumb: "VPN"
       <h3>Related Videos</h3>
         <a href="https://invidio.us/watch?v=WVDQEoe6ZWY" target="_blank">
           <img
-            src="/assets/img/png/layout/this-video-is-sponsored-by-vpn.png"
+            src="{% if jekyll.environment == "production" and site.pull_cdn %}{{site.pull_cdn}}{% endif %}/assets/img/png/layout/this-video-is-sponsored-by-vpn.png"
             class="img-fluid float-left mr-3"
             alt="This Video Is Sponsored By censored VPN">
         </a>