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">
+{% include cardv2.html
-    <div class="col-lg-3 col-sm-12">
+title="Privacy Badger: Stop Tracking"
-      <img src="/assets/img/addons/uBlock.png" width="200" height="70" class="img-fluid d-block mr-auto ml-auto align-middle" alt="uBlock">
+image="/assets/img/addons/privacy-badger.png"
-    </div>
+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."
-    <div class="col">
+website="https://www.eff.org/privacybadger"
-      <h3>Block Ads and Trackers with <a href="https://addons.mozilla.org/firefox/addon/ublock-origin/">uBlock Origin</a></h3>
+discussion="https://forum.privacytools.io/t/discussion-privacy-badger/265"
-      <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>
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
-    </div>
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
-  </div>
+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">
+{% include cardv2.html
-    <div class="col-lg-3 col-sm-12">
+title="uBlock Origin: Block Ads and Trackers"
-      <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">
+image="/assets/img/addons/ublock-origin.png"
-    </div>
+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."
-    <div class="col">
+website="https://addons.mozilla.org/firefox/addon/ublock-origin/"
-      <h3>Automatically Delete Cookies with <a href="https://addons.mozilla.org/firefox/addon/cookie-autodelete">Cookie AutoDelete</a></h3>
+discussion="https://forum.privacytools.io/t/discussion-ublock-origin/266"
-      <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>
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
-    </div>
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
-  </div>
+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">
+{% include cardv2.html
-    <div class="col-lg-3 col-sm-12">
+title="Cookie AutoDelete: Automatically Delete Cookies"
-      <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">
+image="/assets/img/addons/cookie-autodelete.png"
-    </div>
+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."
-    <div class="col">
+website="https://addons.mozilla.org/firefox/addon/cookie-autodelete/"
-      <h3>Encryption with <a href="https://www.eff.org/https-everywhere">HTTPS Everywhere</a></h3>
+discussion="https://forum.privacytools.io/t/discussion-cookie-autodelete/267"
-      <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>
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
-    </div>
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
-  </div>
+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">
+{% include cardv2.html
-    <div class="col-lg-3 col-sm-12">
+title="HTTPS Everywhere: Secure Connections"
-      <img src="/assets/img/addons/Decentraleyes.png" width="200" height="70" class="img-fuid d-block mr-auto ml-auto align-middle" alt="Decentraleyes">
+image="/assets/img/addons/https-everywhere.png"
-    </div>
+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."
-    <div class="col">
+website="https://www.eff.org/https-everywhere"
-      <h3>Block Content Delivery Networks with <a href="https://addons.mozilla.org/firefox/addon/decentraleyes/">Decentraleyes</a></h3>
+discussion="https://forum.privacytools.io/t/discussion-https-everywhere/268"
-      <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>
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
-    </div>
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
-  </div>
+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">
+{% include cardv2.html
-    <div class="col-lg-3 col-sm-12">
+title="Decentraleyes: Block Content Delivery Networks"
-      <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">
+image="/assets/img/addons/decentraleyes.png"
-    </div>
+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."
-    <div class="col">
+website="https://decentraleyes.org/"
-      <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>
+discussion="https://forum.privacytools.io/t/discussion-decentraleyes/269"
-      <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>
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
-    </div>
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
-  </div>
+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">
+{% include cardv2.html
-  <div class="row mb-2">
+title="uMatrix: Stop Cross-Site Requests"
-    <div class="col-lg-3 col-sm-12">
+image="/assets/img/addons/umatrix.png"
-      <img src="/assets/img/addons/uMatrix.png" width="200" height="70" class="img-fuid d-block mr-auto ml-auto align-middle" alt="uMatrix">
+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."
-    </div>
+website="https://addons.mozilla.org/firefox/addon/umatrix/"
-    <div class="col">
+discussion="https://forum.privacytools.io/t/discussion-umatrix/271"
-      <h3>Stop cross-site requests with <a href="https://addons.mozilla.org/firefox/addon/umatrix/">uMatrix</a></h3>
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
-      <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>
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
-    </div>
+icon3='<i class="fab fa-opera fa-2x fa-fw"></i>'
-  </div>
+icon4='<a href="https://github.com/gorhill/uMatrix"><i class="fab fa-github fa-2x fa-fw"></i></a>'
+%}
 
-  <div class="row mb-2">
+{% include cardv2.html
-    <div class="col-lg-3 col-sm-12">
+title="NoScript Security Suite: Be in total control"
-      <img src="/assets/img/addons/NoScript.png" width="200" height="70" class="img-fuid d-block mr-auto ml-auto align-middle" alt="NoScript">
+image="/assets/img/addons/noscript.png"
-    </div>
+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."
-    <div class="col">
+website="https://addons.mozilla.org/firefox/addon/noscript/"
-      <h3>Be in total control with <a href="https://addons.mozilla.org/firefox/addon/noscript/">NoScript Security Suite</a></h3>
+discussion="https://forum.privacytools.io/t/discussion-noscript-security-suite/272"
-      <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>
+icon1='<i class="fab fa-firefox fa-2x fa-fw"></i>'
-    </div>
+icon2='<i class="fab fa-chrome fa-2x fa-fw"></i>'
-  </div>
+icon3='<a href="https://github.com/hackademix/noscript"><i class="fab fa-github fa-2x fa-fw"></i></a>'
-</div>
+%}