Remove inline CSS

_includes/card.html

@@ -32,7 +32,7 @@
               {% elsif include.icon %}
               <i class="{{ include.icon }} panel-icon{% if include.iconcolor %} text-{{include.iconcolor}}{% endif %}"></i>
               {% elsif include.font %}
-              <span class="{{ include.font }} panel-item" style="font-size: 120px;" alt="{{ include.title }}"></span>
+              <span class="{{ include.font }} panel-item panel-font" alt="{{ include.title }}"></span>
               {% endif %}
               {{include.description}}
             </p>

_includes/scripts.html

@@ -11,4 +11,4 @@
   - User privacy protection
 -->
 
-<noscript><img src="https://stats.privacytools.io/matomo.php?idsite=1&amp;rec=1" style="border:0" alt=""/></noscript>
+<noscript><img src="https://stats.privacytools.io/matomo.php?idsite=1&amp;rec=1" class="border-0" alt=""/></noscript>

_includes/sections/email-providers.html

@@ -255,7 +255,7 @@
   <li><a href="https://www.confidantmail.org/">Confidant Mail</a> - An open-source non-SMTP cryptographic email system optimized for large file attachments. It is a secure and spam-resistant alternative to regular email and online file drop services. It
     uses <a href="https://theprivacyguide.org/tutorials/gpg.html">GNU Privacy Guard (GPG)</a> for content encryption and authentication, and TLS 1.2 with ephemeral keys for transport encryption.</li>
 </ul>  <h3>Become Your Own Email Provider with Mail-in-a-Box</h3>
-<a href="https://mailinabox.email/"><img src="/assets/img/provider/Mail-in-a-Box.png" width="200" height="70" class="img-fluid float-left" alt="Mail-in-a-Box" style="margin-right:10px;"></a>
+<a href="https://mailinabox.email/"><img src="/assets/img/provider/Mail-in-a-Box.png" width="200" height="70" class="img-fluid float-left mr-3" alt="Mail-in-a-Box"></a>
 <p>Take it a step further and get control of your email with this easy-to-deploy mail server in a box. Mail-in-a-Box lets you become your own mail service provider in a few easy steps. It's sort of like making your own Gmail, but one you control from top
 to bottom. Technically, Mail-in-a-Box turns a fresh cloud computer into a working mail server. But you don't need to be a technology expert to set it up. <strong>More: <a href="https://mailinabox.email/">https://mailinabox.email/</a></strong></p>
 

_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/layout/UKUSA.png" width="260" height="115" class="img-fluid float-right" alt="UKUSA Agreement" style="margin-left:10px;">
+<img src="/assets/img/layout/UKUSA.png" 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/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/layout/USA.png" width="200" height="200" class="img-fluid float-right" alt="USA" style="margin-left:10px;">
+<img src="/assets/img/layout/USA.png" 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, use of <a href="https://www.eff.org/issues/national-security-letters/faq">National Security Letters</a> (NSLs) and 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/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/layout/warrant-canary.jpg" width="450" height="236" class="img-fluid float-right" alt="Warrant Canary Example" style="margin-left:20px;">
+<img src="/assets/img/layout/warrant-canary.jpg" width="450" height="236" 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/layout/Windows-10-Privacy.png" width="367" height="369" class="img-fluid float-right" alt="Windows 10 Privacy" style="margin-left:10px;">
+<img src="/assets/img/layout/Windows-10-Privacy.png" 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>

assets/css/style.scss

@@ -127,6 +127,10 @@ h2, h3:not(.h5), h4, h5 {
   font-size: 5.5em;
 }
 
+.panel-font {
+  font-size: 120px;
+}
+
 .share-btn {
   border: 0;
   box-shadow: $share-btn-shadow;