[Design] Add icon for external links button (#634)

* add css and svg img for external links
* remove twitter link
* accessibility: add aria-describedby for external links

Author: codeurimpulsif

exodus/static/css/exodus.css

@@ -569,3 +569,27 @@ ul.navbar-nav {
 .w-100 {
   width: 100%;
 }
+
+/* SVG icon style */
+
+.btn-outline-primary > .svg-icon {
+	filter: brightness(0) saturate(100%) invert(32%) sepia(5%) saturate(3675%) hue-rotate(241deg) brightness(90%) contrast(86%);
+}
+
+.btn-outline-primary:hover > .svg-icon {
+	filter: brightness(0) saturate(100%) invert(99%) sepia(4%) saturate(315%) hue-rotate(23deg) brightness(122%) contrast(100%);
+}
+
+/* Accessiblity */
+
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}

exodus/web/templates/base/organization.html

@@ -25,7 +25,7 @@ <h1 class="main-title">
         {% trans "Exodus Privacy is a non-profit organization led by hacktivists. Its purpose is to help people get a better understanding of the Android applications tracking issues." %}
       </p>
       <p class="text-center mb-4 mt-4">
-        <a href="https://exodus-privacy.eu.org/{% if LANGUAGE_CODE == 'fr' %}fr{% endif %}" target="_blank" rel="noreferrer" class="btn btn-primary w-300px">{% trans "Discover Exodus Privacy" %}</a>
+        <a href="https://exodus-privacy.eu.org/{% if LANGUAGE_CODE == 'fr' %}fr{% endif %}" target="_blank" rel="noreferrer" class="btn btn-primary w-300px">{% trans "Discover Exodus Privacy" %} <img class="w-8" aria-describedby="hint-external-link" title="{% trans "Opens external link" %}" src="/static/img/ext.svg"></a>
       </p>
     </div>
     <div class="col-md-8 col-12 mb-5 mt-4">
@@ -34,7 +34,7 @@ <h4>{% trans "Help us!" %}</h4>
         {% trans "Exodus Privacy is an organization managed by volunteers. Whether you would like to draw, translate, code or create any kind of content, feel free: we welcome any help." %}
       </p>
       <p class="text-center mt-4">
-        <a href="https://exodus-privacy.eu.org/{% if LANGUAGE_CODE == 'fr' %}fr{% else %}en{% endif %}/page/contribute/" target="_blank" rel="noreferrer" class="btn btn-outline-primary w-300px">{% trans "How to contribute?" %}</a>
+        <a href="https://exodus-privacy.eu.org/{% if LANGUAGE_CODE == 'fr' %}fr{% else %}en{% endif %}/page/contribute/" target="_blank" rel="noreferrer" class="btn btn-outline-primary w-300px">{% trans "How to contribute?" %} <img class="w-8 svg-icon" aria-describedby="hint-external-link" title="{% trans "Opens external link" %}" src="/static/img/ext.svg"></a>
       </p>
     </div>
     <div class="col-md-8 col-12 mt-4 mb-4">
@@ -45,24 +45,20 @@ <h4>{% trans "Contact us" %}</h4>
     <div class="col-md-4 col-12 mb-4 text-center">
       <p><img src="{% static 'img/contact.svg' %}"></p>
       <p>contact@exodus-privacy.eu.org</p>
-      <p><a href="mailto:contact@exodus-privacy.eu.org" class="btn btn-outline-primary min-w-150px">{% trans "Contact us!" %}</a></p>
+      <p><a href="mailto:contact@exodus-privacy.eu.org" class="btn btn-outline-primary min-w-150px">{% trans "Contact us!" %} <img class="w-12 svg-icon" aria-describedby="hint-external-link" title="{% trans "Opens external link" %}" src="/static/img/ext.svg"></a></p>
     </div>
     <div class="col-md-4 col-12 mb-4 text-center">
       <p><img src="{% static 'img/mastodon.svg' %}"></p>
       <p>@exodus</p>
-      <p><a href="https://framapiaf.org/@exodus" target="_blank" rel="noreferrer" class="btn btn-outline-primary min-w-150px">{% trans "Follow us!" %}</a></p>
+      <p><a href="https://framapiaf.org/@exodus" target="_blank" rel="noreferrer" class="btn btn-outline-primary min-w-150px">{% trans "Follow us!" %} <img class="w-12 svg-icon" aria-describedby="hint-external-link" title="{% trans "Opens external link" %}" src="/static/img/ext.svg"></a></p>
     </div>
   </div>
   <div class="row justify-content-sm-center">
-    <div class="col-md-4 col-12 mb-4 text-center">
-      <p><img src="{% static 'img/twitter.svg' %}"></p>
-      <p>@ExodusPrivacy</p>
-      <p><a href="https://twitter.com/ExodusPrivacy" target="_blank" rel="noreferrer" class="btn btn-outline-primary min-w-150px">{% trans "Follow us!" %}</a></p>
-    </div>
     <div class="col-md-4 col-12 mb-4 text-center">
       <p><img src="{% static 'img/facebook.svg' %}"></p>
       <p>exodusprivacy</p>
-      <p><a href="https://facebook.com/exodusprivacy" target="_blank" rel="noreferrer" class="btn btn-outline-primary min-w-150px">{% trans "Follow us!" %}</a></p>
+      <p><a href="https://facebook.com/exodusprivacy" target="_blank" rel="noreferrer" class="btn btn-outline-primary min-w-150px">{% trans "Follow us!" %} <img class="w-12 svg-icon" aria-describedby="hint-external-link" title="{% trans "Opens external link" %}" src="/static/img/ext.svg"></a></p>
     </div>
   </div>
+  <span id="hint-external-link" class="visually-hidden">{% trans "Opens external link" %}</span>
 {% endblock %}