Card v2 for browser addons (#903)

_includes/cardv2.html

@@ -0,0 +1,22 @@
+<div class="card">
+  <div class="card-header text-white bg-secondary">
+    <h3 class="h5">{{include.title}}</h3>
+  </div>
+  <div class="card-body">
+    <p class="card-text">
+      <img src="{{include.image}}" height="128" width="128" class="panel-pic" alt="{{include.title}}">
+      {{include.description}}
+    </p>
+    <a href="{{include.website}}" class="btn btn-primary"><i class="fas fa-external-link-alt fa-fw"></i> Website</a>
+    {% if include.discussion %}
+    <a href="{{include.discussion}}" class="btn btn-success"><i class="fab fa-discourse fa-fw"></i>iscussion</a>
+    {% endif %}
+    {% if include.tor %}
+    <a class="mb-1" data-toggle="tooltip" data-placement="bottom" data-original-title="Requires specific software to access: torproject.org" href="{{include.tor}}"><img alt="Tor" src="/assets/img/layout/tor.png" width="35" height="35"></a>
+    {% endif %}
+    <div class="float-right">
+        {{include.icon1}}{{include.icon2}}{{include.icon3}}{{include.icon4}}{{include.icon5}}{{include.icon6}}{{include.icon7}}{{include.icon8}}
+    </div>
+  </div>
+</div>
+<br>

_includes/sections/browser-addons.html

@@ -1,94 +1,111 @@
 <h1 id="addons" class="anchor"><a href="#addons"><i class="fas fa-link anchor-icon"></i></a> Excellent Firefox Privacy Add-ons</h1>
 
-<div class="alert alert-success" role="alert">
+<div class="alert alert-primary" role="alert">
   <strong>Improve your privacy with these excellent Firefox add-ons.</strong>
 </div>
 
-<div class="container-fluid">
-  <div class="row mb-2">
-    <div class="col-lg-3 col-sm-12">
-      <img src="/assets/img/addons/Privacy-Badger.png" height="70" width="200" class="img-fluid d-block mr-auto ml-auto align-middle" alt="Privacy Badger">
-    </div>
-    <div class="col">
-      <h3>Stop Tracking with <a href="https://www.eff.org/privacybadger">Privacy Badger</a></h3>
-      <p><strong>Privacy Badger</strong> is a browser add-on that stops advertisers and other third-party trackers from secretly tracking where you go and what pages you look at on the web. Privacy Badger learns about trackers as you browse by inspecting external resources websites request. Please be aware that Google Analytics is considered first-party by Privacy Badger, which means that Google Analytics will not be blocked if you do not use another blocker, such as uBlock Origin.</p>
-    </div>
-  </div>
 
-  <div class="row mb-2">
-    <div class="col-lg-3 col-sm-12">
-      <img src="/assets/img/addons/uBlock.png" width="200" height="70" class="img-fluid d-block mr-auto ml-auto align-middle" alt="uBlock">
-    </div>
-    <div class="col">
-      <h3>Block Ads and Trackers with <a href="https://addons.mozilla.org/firefox/addon/ublock-origin/">uBlock Origin</a></h3>
-      <p>An efficient <a href="https://github.com/gorhill/uBlock/wiki/Blocking-mode">wide-spectrum-blocker</a> that's easy on memory, and yet can load and enforce thousands more filters than other popular blockers out there. It has no monetization strategy and is completely <a href="https://github.com/gorhill/uBlock/">open source</a>. We recommend Firefox but uBlock Origin also works in other browsers such as Safari, Opera, and Chromium. Unlike AdBlock Plus, uBlock does not allow so-called <a href="https://adblockplus.org/acceptable-ads">"acceptable ads"</a>.</p>
-    </div>
-  </div>
+{% include cardv2.html
+title="Privacy Badger: Stop Tracking"
+image="/assets/img/addons/privacy-badger.png"
+description="<strong>Privacy Badger</strong> is a browser add-on that stops advertisers and other third-party trackers from secretly tracking where you go and what pages you look at on the web. Privacy Badger learns about trackers as you browse."
+website="https://www.eff.org/privacybadger"
+discussion="https://forum.privacytools.io/t/discussion-privacy-badger/265"
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
+icon3='<i class="fab fa-opera fa-2x fa-fw"></i>'
+icon4='<i class="fab fa-android fa-2x fa-fw"></i>'
+icon5='<a href="https://github.com/EFForg/privacybadger"><i class="fab fa-github fa-2x fa-fw"></i></a>'
+%}
 
-  <div class="row mb-2">
-    <div class="col-lg-3 col-sm-12">
-      <img src="/assets/img/addons/Cookie-AutoDelete.png" width="200" height="70" class="img-fuid d-block mr-auto ml-auto align-middle" alt="Cookie AutoDelete">
-    </div>
-    <div class="col">
-      <h3>Automatically Delete Cookies with <a href="https://addons.mozilla.org/firefox/addon/cookie-autodelete">Cookie AutoDelete</a></h3>
-      <p>Automatically removes cookies when they are no longer used by open browser tabs. With the cookies, lingering sessions, as well as information used to spy on you, will be expunged.</p>
-    </div>
-  </div>
+{% include cardv2.html
+title="uBlock Origin: Block Ads and Trackers"
+image="/assets/img/addons/ublock-origin.png"
+description="<strong>uBlock Origin</strong> is an efficient <a href=https://github.com/gorhill/uBlock/wiki/Blocking-mode>wide-spectrum-blocker</a> that's easy on memory, and yet can load and enforce thousands more filters than other popular blockers out there. It has no monetization strategy and is completely open source."
+website="https://addons.mozilla.org/firefox/addon/ublock-origin/"
+discussion="https://forum.privacytools.io/t/discussion-ublock-origin/266"
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
+icon3='<i class="fab fa-edge fa-2x fa-fw"></i>'
+icon4='<i class="fab fa-android fa-2x fa-fw"></i>'
+icon5='<i class="fab fa-safari fa-2x fa-fw"></i>'
+icon6='<i class="fab fa-opera fa-2x fa-fw"></i>'
+icon7='<a href="https://github.com/gorhill/uBlock/"><i class="fab fa-github fa-2x fa-fw"></i></a>'
+%}
 
-  <div class="row mb-2">
-    <div class="col-lg-3 col-sm-12">
-      <img src="/assets/img/addons/HTTPS-Everywhere.png" width="200" height="70" class="img-fuid d-block mr-auto ml-auto align-middle" alt="HTTPS Everywhere">
-    </div>
-    <div class="col">
-      <h3>Encryption with <a href="https://www.eff.org/https-everywhere">HTTPS Everywhere</a></h3>
-      <p>A Firefox, Chrome, and Opera extension that encrypts your communications with many major websites, making your browsing more secure. A collaboration between The Tor Project and the Electronic Frontier Foundation.</p>
-    </div>
-  </div>
+{% include cardv2.html
+title="Cookie AutoDelete: Automatically Delete Cookies"
+image="/assets/img/addons/cookie-autodelete.png"
+description="<strong>Cookie AutoDelete</strong> automatically removes cookies when they are no longer used by open browser tabs. With the cookies, lingering sessions, as well as information used to spy on you, will be expunged."
+website="https://addons.mozilla.org/firefox/addon/cookie-autodelete/"
+discussion="https://forum.privacytools.io/t/discussion-cookie-autodelete/267"
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
+icon3='<a href="https://github.com/Cookie-AutoDelete/Cookie-AutoDelete"><i class="fab fa-github fa-2x fa-fw"></i></a>'
+%}
 
-  <div class="row mb-2">
-    <div class="col-lg-3 col-sm-12">
-      <img src="/assets/img/addons/Decentraleyes.png" width="200" height="70" class="img-fuid d-block mr-auto ml-auto align-middle" alt="Decentraleyes">
-    </div>
-    <div class="col">
-      <h3>Block Content Delivery Networks with <a href="https://addons.mozilla.org/firefox/addon/decentraleyes/">Decentraleyes</a></h3>
-      <p>Emulates Content Delivery Networks locally by intercepting requests, finding the required resource and injecting it into the environment. This all happens instantaneously, automatically, and no prior configuration is required. <i>Source code: <a href="https://git.synz.io/Synzvato/decentraleyes">GitLab (self-hosted)</a>.</i></p>
-    </div>
-  </div>
+{% include cardv2.html
+title="HTTPS Everywhere: Secure Connections"
+image="/assets/img/addons/https-everywhere.png"
+description="<strong>HTTPS Everywhere</strong> encrypts your communications with many major websites, making your browsing more secure. A collaboration between The Tor Project and the Electronic Frontier Foundation."
+website="https://www.eff.org/https-everywhere"
+discussion="https://forum.privacytools.io/t/discussion-https-everywhere/268"
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
+icon3='<i class="fab fa-android fa-2x fa-fw"></i>'
+icon4='<i class="fab fa-opera fa-2x fa-fw"></i>'
+icon5='<a href="https://github.com/EFForg/https-everywhere"><i class="fab fa-github fa-2x fa-fw"></i></a>'
+%}
 
-  <div class="row mb-2">
-    <div class="col-lg-3 col-sm-12">
-      <img src="/assets/img/addons/ToSDR.png" width="200" height="70" class="img-fuid d-block mr-auto ml-auto align-middle" alt="Terms of Service - Didn't Read">
-    </div>
-    <div class="col">
-      <h3>Be informed with <a href="https://addons.mozilla.org/firefox/addon/terms-of-service-didnt-read/">Terms of Service; Didn’t Read</a></h3>
-      <p>“I have read and agree to the Terms” is the biggest lie on the web. This addon aims to fix that by grading websites based on their Terms of Service agreements and gives short summaries. <i>Source code: <a href="https://github.com/tosdr/">GitHub</a>.</i></p>
-    </div>
-  </div>
+{% include cardv2.html
+title="Decentraleyes: Block Content Delivery Networks"
+image="/assets/img/addons/decentraleyes.png"
+description="<strong>Decentraleyes</strong> emulates Content Delivery Networks locally by intercepting requests, finding the required resource and injecting it into the environment. This all happens instantaneously, automatically, and no prior configuration is required."
+website="https://decentraleyes.org/"
+discussion="https://forum.privacytools.io/t/discussion-decentraleyes/269"
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
+icon3='<i class="fab fa-opera fa-2x fa-fw"></i>'
+icon4='<a href="https://git.synz.io/Synzvato/decentraleyes"><i class="fab fa-gitlab fa-2x fa-fw"></i></a>'
+%}
+
+{% include cardv2.html
+title="Terms of Service; Didn’t Read: Be Informed"
+image="/assets/img/addons/tosdr.png"
+description="<strong>Terms of Service; Didn’t Read</strong> “I have read and agree to the Terms” is the biggest lie on the web. This addon aims to fix that by grading websites based on their Terms of Service agreements and gives short summaries."
+website="https://tosdr.org/"
+discussion="https://forum.privacytools.io/t/discussion-decentraleyes/270"
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
+icon3='<i class="fab fa-opera fa-2x fa-fw"></i>'
+icon4='<i class="fab fa-safari fa-2x fa-fw"></i>'
+icon5='<a href="https://github.com/tosdr/"><i class="fab fa-github fa-2x fa-fw"></i></a>'
+%}
 
-</div>
 
 <div class="alert alert-warning" role="alert">
   <strong>The following add-ons require quite a lot of interaction from the user to get things working. Some sites will not work properly until you have configured the add-ons.</strong>
 </div>
 
-<div class="container-fluid">
-  <div class="row mb-2">
-    <div class="col-lg-3 col-sm-12">
-      <img src="/assets/img/addons/uMatrix.png" width="200" height="70" class="img-fuid d-block mr-auto ml-auto align-middle" alt="uMatrix">
-    </div>
-    <div class="col">
-      <h3>Stop cross-site requests with <a href="https://addons.mozilla.org/firefox/addon/umatrix/">uMatrix</a></h3>
-      <p>Many websites integrate features which let other websites track you, such as Facebook Like Buttons or Google Analytics. uMatrix gives you control over the requests that websites make to other websites. This gives you greater and more fine-grained control over the information that you leak online.</p>
-    </div>
-  </div>
+{% include cardv2.html
+title="uMatrix: Stop Cross-Site Requests"
+image="/assets/img/addons/umatrix.png"
+description="<strong>uMatrix</strong> gives you control over the requests that websites make to other websites. Many websites integrate features which let other websites track you, such as Facebook Like Buttons or Google Analytics. This gives you greater and more fine-grained control over the information that you leak online."
+website="https://addons.mozilla.org/firefox/addon/umatrix/"
+discussion="https://forum.privacytools.io/t/discussion-umatrix/271"
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
+icon3='<i class="fab fa-opera fa-2x fa-fw"></i>'
+icon4='<a href="https://github.com/gorhill/uMatrix"><i class="fab fa-github fa-2x fa-fw"></i></a>'
+%}
 
-  <div class="row mb-2">
-    <div class="col-lg-3 col-sm-12">
-      <img src="/assets/img/addons/NoScript.png" width="200" height="70" class="img-fuid d-block mr-auto ml-auto align-middle" alt="NoScript">
-    </div>
-    <div class="col">
-      <h3>Be in total control with <a href="https://addons.mozilla.org/firefox/addon/noscript/">NoScript Security Suite</a></h3>
-      <p> Highly customizable plugin to selectively allow JavaScript, Java, and Flash to run only on websites you trust. Not for casual users, it requires technical knowledge to configure.</p>
-    </div>
-  </div>
-</div>
+{% include cardv2.html
+title="NoScript Security Suite: Be in total control"
+image="/assets/img/addons/noscript.png"
+description="<strong>NoScript</strong> is a highly customizable plugin to selectively allow JavaScript, Java, and Flash to run only on websites you trust. Not for casual users, it requires technical knowledge to configure."
+website="https://addons.mozilla.org/firefox/addon/noscript/"
+discussion="https://forum.privacytools.io/t/discussion-noscript-security-suite/272"
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
+icon3='<a href="https://github.com/hackademix/noscript"><i class="fab fa-github fa-2x fa-fw"></i></a>'
+%}