Add Key icon and links in the /about/ page (#1498)

_includes/team.html

@@ -14,31 +14,38 @@
       <meta itemprop="affiliation" content="PrivacyTools" />
       <h6 class="card-subtitle mb-2 text-muted" itemprop="jobTitle">{{ include.role | default: "Contributor" }}</h6>
       <p class="card-text" {% if include.bio %}itemprop="description"{% endif %}>{{ include.bio | default: "<i>Hmm, this user hasn't written a bio quite yet :(</i>" }}</p>
-      {% if include.email %}
+      <div class="mx-n2">
-      <a href="mailto:{{ include.email }}" aria-label="Email" class="card-link" itemprop="email">
+        {% if include.email %}
-        <i class="fas fa-envelope" aria-hidden="true" title="{{ include.email }}"></i>
+        <a href="mailto:{{ include.email }}" aria-label="Email" class="mx-2 text-decoration-none" itemprop="email">
-      </a>
+          <i class="fas fa-envelope" aria-hidden="true" title="{{ include.email }}"></i>
-      {% endif %}
+        </a>
-      {% if include.website %}
+        {% endif %}
-      <a href="{{ include.website }}" aria-label="Website" class="card-link" itemprop="url">
+        {% if include.website %}
-        <i class="fas fa-link" aria-hidden="true" title="Website"></i>
+        <a href="{{ include.website }}" aria-label="Website" class="mx-2 text-decoration-none" itemprop="url">
-      </a>
+          <i class="fas fa-link" aria-hidden="true" title="Website"></i>
-      {% endif %}
+        </a>
-      {% if include.mastodon %}
+        {% endif %}
-      <a href="{{ include.mastodon }}" aria-label="Mastodon" class="card-link" itemprop="sameAs">
+        {% if include.keys %}
-        <i class="fab fa-mastodon" aria-hidden="true" title="Mastodon Profile"></i>
+        <a href="{{ include.keys }}" aria-label="Keys" class="mx-2 text-decoration-none" itemprop="sameAs">
-      </a>
+          <i class="fas fa-key" aria-hidden="true" title="Keys"></i>
-      {% endif %}
+        </a>
-      {% if include.twitter %}
+        {% endif %}
-      <a href="https://twitter.com/{{ include.twitter }}" aria-label="Twitter" class="card-link" itemprop="sameAs">
+        {% if include.mastodon %}
-        <i class="fab fa-twitter" aria-hidden="true" title="Twitter Profile"></i>
+        <a href="{{ include.mastodon }}" aria-label="Mastodon" class="mx-2 text-decoration-none" itemprop="sameAs">
-      </a>
+          <i class="fab fa-mastodon" aria-hidden="true" title="Mastodon Profile"></i>
-      {% endif %}
+        </a>
-      {% if include.blog %}
+        {% endif %}
-      <a href="https://blog.privacytools.io/author/{{ include.blog }}" aria-label="Blog" class="card-link" itemprop="sameAs">
+        {% if include.twitter %}
-        <i class="fas fa-pen-nib" aria-hidden="true" title="PrivacyTools Blog Author"></i>
+        <a href="https://twitter.com/{{ include.twitter }}" aria-label="Twitter" class="mx-2 text-decoration-none" itemprop="sameAs">
-      </a>
+          <i class="fab fa-twitter" aria-hidden="true" title="Twitter Profile"></i>
-      {% endif %}
+        </a>
+        {% endif %}
+        {% if include.blog %}
+        <a href="https://blog.privacytools.io/author/{{ include.blog }}" aria-label="Blog" class="mx-2 text-decoration-none" itemprop="sameAs">
+          <i class="fas fa-pen-nib" aria-hidden="true" title="PrivacyTools Blog Author"></i>
+        </a>
+        {% endif %}
+      </div>
     </div>
   </div>
 </div>

assets/css/style.scss

@@ -220,6 +220,22 @@ footer {
 }
 
 
+
+/*
+ * Bootstrap 4.2+ features
+ */
+
+.text-decoration-none {
+  text-decoration: none !important;
+}
+
+.mx-n2 {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+
+
+
 /*
  * Navbar
  */

pages/about.html

@@ -30,6 +30,7 @@ name="Burung Hantu"
 role="Founder"
 bio="I founded PrivacyTools in 2015 to share resources and tools, allowing users to avoid international mass-surveillance programs."
 email="dude@privacytools.io"
+keys="https://keybase.io/privacytools"
 mastodon="https://social.privacytools.io/@BurungHantu"
 twitter="privacytoolsIO"
 %}
@@ -42,6 +43,7 @@ role="Administrator"
 bio="I run the website and services for PrivacyTools. My goal is to spread the word about data privacy as widely as possible."
 email="jonah@privacytools.io"
 website="https://www.jonaharagon.com"
+keys="https://keybase.io/jonaharagon"
 mastodon="https://social.privacytools.io/@jonah"
 twitter="JonahAragon"
 blog="jonah"
@@ -62,6 +64,7 @@ name="Dan Arel"
 role="ThinkPrivacy Editor"
 bio="I'm an author, columnist, and privacy advocate whose work has appeared in Time, Huff Post, OpenSource, and more."
 website="https://danarel.com"
+keys="https://keybase.io/dan_arel"
 twitter="danarel"
 mastodon="https://mastodon.technology/@danarel"
 blog="danarel"
@@ -74,6 +77,7 @@ role="Developer"
 bio="I'm a student interested in software development. I help improve PrivacyTools and promote using free libre software."
 website="https://dawidpotocki.com"
 email="dawidpotocki@privacytools.io"
+keys="https://dawidpotocki.com/accounts/#pgp"
 mastodon="https://social.privacytools.io/@dawidpotocki"
 %}
 
@@ -83,6 +87,7 @@ name="dngray"
 nick="Daniel Gray"
 bio="I research and communicate with privacy-focused service providers to refine our recommendations, like email and VPN providers."
 email="dngray@privacytools.io"
+keys="https://keybase.io/dngray"
 %}
 
 {% include team.html
@@ -91,6 +96,7 @@ name="Mikaela Suomalainen"
 nick="Mikaela"
 bio="I am interested in instant messengers. I review privacy tools, and participate in our forum, Matrix room, and issue tracker."
 website="https://mikaela.info/"
+keys="https://keybase.io/mikaela/"
 mastodon="https://mastodon.partipirate.org/@mikaela"
 %}
 
@@ -101,6 +107,7 @@ nick="nitrohorse"
 role="Developer"
 bio="I'm a privacy advocate and software developer. I write web extensions, help research, and make updates to the site."
 website="https://nitrohorse.com/"
+keys="https://keybase.io/513"
 mastodon="https://nitro.horse/@andreas"
 blog="nitrohorse"
 %}