feat(social): use svg icons instead of font-awesome

BREAKING CHANGE: Style customization and configuration of social icons in the sidebar has changed. New icons have better colors and bigger sizes.
Pelican-Elegant · Aug 12, 2019 · 19f458b · 19f458b
1 parent 9ef3ac8
commit 19f458b
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 88 deletions.
diff --git a/static/css/elegant.css b/static/css/elegant.css
@@ -295,69 +295,17 @@ ul.articles-timeline .previous-article {
   float: left;
   margin: 0;
 }
-i.sidebar-social-links {
-  border-radius: 20%;
-  border: solid transparent 1px;
-  color: #a2a2a2;
-  font-size: 1.3em;
-  margin: 0;
-  padding: 1px;
-  text-align: center;
-  text-decoration: none;
-  width: 12%;
-}
-i.sidebar-social-links:hover {
-  background-color: #a2a2a2;
-  color: #fff;
-}
-i.fa-twitter:hover,
-i.fa-twitter-square:hover {
-  background-color: #00aced;
-}
-i.fa-facebook:hover,
-i.fa-facebook-square:hover {
-  background-color: #3b5998;
-}
-i.fa-google-plus:hover,
-i.fa-google-plus-square:hover {
-  background-color: #d34836;
-}
-i.fa-adn:hover {
-  background-color: #49484d;
+div#sidebar-social-link a svg {
+  filter: saturate(0%) brightness(0.7);
+  height: 35px;
+  width: 35px;
+  margin-right: 4px;
 }
-i.fa-envelope:hover {
-  background-color: #5e9eda;
-}
-i.fa-github:hover,
-i.fa-github-square:hover,
-i.fa-github-alt:hover {
-  background-color: #000;
-}
-i.fa-flickr:hover {
-  background-color: #ff0084;
-}
-i.fa-youtube:hover,
-i.fa-youtube-square:hover,
-i.fa-youtube-play:hover {
-  background-color: #bc272f;
-}
-i.fa-linkedin:hover,
-i.fa-linkedin-square:hover {
-  background-color: #107fb9;
-}
-i.fa-gittip:hover {
-  background-color: #663300;
-}
-i.fa-rss:hover,
-i.fa-rss-square:hover {
-  background-color: #ff6600;
-}
-i.fa-bitbucket:hover,
-i.fa-bitbucket-square:hover {
-  background-color: #205081;
+div#sidebar-social-link a {
+  text-decoration: none;
 }
-i.fa-stack-exchange:hover {
-  background-color: #3a7bc8;
+div#sidebar-social-link a svg:hover {
+  filter: none;
 }
 ul.multi-parts-list a {
   color: black;

diff --git a/templates/_includes/social_links.html b/templates/_includes/social_links.html
@@ -1,32 +1,78 @@
 {% if SOCIAL %}
 {% from '_includes/_defaults.html' import SOCIAL_PROFILE_LABEL with context %}
 <h4>{{ SOCIAL_PROFILE_LABEL }}</h4>
-{% for entry in SOCIAL %}
-{% set f_entry = [] %}
-    {%for item in entry %}
-        {# first is for name #}
-        {% if loop.first %}
-            {% set link_title = 'My ' + item + ' Profile' %}
-            {% set link_icon = item.lower() %}
-            {% if item.lower() == 'email' %}
-                {% set link_title = 'My ' + item + ' Address' %}
-                {% set link_icon = 'envelope' %}
-            {% elif item.lower() == 'rss' %}
-                {% set link_title = 'Subscribe in a reader' %}
-                {% set link_icon = 'rss' %}
-            {% endif %}
-            {% if f_entry.insert(0, link_title) %}{% endif %}
-            {% if f_entry.insert(1, link_icon) %}{% endif %}
-        {% elif loop.index0 == 1 %}
-            {% set url = item|e %}
-            {% if f_entry.insert(2, url) %}{% endif %}
-        {% elif loop.index0 == 2 %}
-            {% set link_icon = item.lower() %}
-            {% if f_entry.pop(1) %}{% endif %}
-            {% if f_entry.insert(1, link_icon) %}{% endif %}
-        {% endif %}
+<div id="sidebar-social-link">
+    {% for entry in SOCIAL %}
+    {% if entry[0]|lower == 'email' %}
+    <a href="mailto:{{entry[1]}}" title="{{entry[2]}}">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-label="Mail" role="img" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#328cff"/><path d="m250 186c-46 0-69 35-69 74 0 44 29 72 68 72 43 0 73-32 73-75 0-44-34-71-72-71zm-1-37c30 0 57 13 77 33 0-22 35-22 35 1v150c-1 10 10 16 16 9 25-25 54-128-14-187-64-56-149-47-195-15-48 33-79 107-49 175 33 76 126 99 182 76 28-12 41 26 12 39-45 19-168 17-225-82-38-68-36-185 67-248 78-46 182-33 244 32 66 69 62 197-2 246-28 23-71 1-71-32v-11c-20 20-47 32-77 32-57 0-108-51-108-108 0-58 51-110 108-110" fill="#fff"/></svg>
+    </a>
+    {% endif %}
+    {% if entry[0]|lower == 'github' %}
+    <a href="{{entry[1]}}" title="{{entry[2]}}" target="_blank">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-label="GitHub" role="img" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#1B1817"/><path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/></svg>
+    </a>
+    {% endif %}
+    {% if entry[0]|lower == 'rss' %}
+    <a href="{{entry[1]}}" title="{{entry[2]}}" target="_blank">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-label="RSS" role="img" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#f80"/><circle cx="145" cy="367" r="35" fill="#fff"/><path fill="none" stroke="#fff" stroke-width="60" d="M109 241c89 0 162 73 162 162M109 127c152 0 276 124 276 276"/></svg>
+    </a>
+    {% endif %}
+    {% if entry[0]|lower == 'facebook' %}
+    <a href="{{entry[1]}}" title="{{entry[2]}}" target="_blank">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-label="Facebook" role="img" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#1877f2"/><path d="M355.6 330l11.4-74h-71v-48c0-20.2 9.9-40 41.7-40H370v-63s-29.3-5-57.3-5c-58.5 0-96.7 35.4-96.7 99.6V256h-65v74h65v182h80V330h59.6z" fill="#fff"/></svg>
+    </a>
+    {% endif %}
+    {% if entry[0]|lower == 'twitter' %}
+    <a href="{{entry[1]}}" title="{{entry[2]}}" target="_blank">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-label="Twitter" role="img" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#1da1f3"/><path fill="#fff" d="M437 152a72 72 0 0 1-40 12 72 72 0 0 0 32-40 72 72 0 0 1-45 17 72 72 0 0 0-122 65 200 200 0 0 1-145-74 72 72 0 0 0 22 94 72 72 0 0 1-32-7 72 72 0 0 0 56 69 72 72 0 0 1-32 1 72 72 0 0 0 67 50 200 200 0 0 1-105 29 200 200 0 0 0 309-179 200 200 0 0 0 35-37"/></svg>
+    </a>
+    {% endif %}
+    {% if entry[0]|lower == 'linkedin' %}
+    <a href="{{entry[1]}}" title="{{entry[2]}}" target="_blank">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-label="LinkedIn" role="img" viewBox="0 0 512 512" fill="#fff"><rect width="512" height="512" rx="15%" fill="#0077b5"/><circle cx="142" cy="138" r="37"/><path stroke="#fff" stroke-width="66" d="M244 194v198M142 194v198"/><path d="M276 282c0-20 13-40 36-40 24 0 33 18 33 45v105h66V279c0-61-32-89-76-89-34 0-51 19-59 32"/></svg>
+    </a>
+    {% endif %}
+    {% if entry[0]|lower == 'instagram' %}
+    <a href="{{entry[1]}}" title="{{entry[2]}}" target="_blank">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-label="Instagram" role="img" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#d43377"/><g fill="none" stroke="#fff" stroke-width="29"><rect height="296" rx="78" width="296" x="108" y="108"/><circle cx="256" cy="256" r="69"/></g><circle cx="343" cy="169" fill="#fff" r="19"/></svg>
+    </a>
+    {% endif %}
+    {% if entry[0]|lower == 'reddit' %}
+    <a href="{{entry[1]}}" title="{{entry[2]}}" target="_blank">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-label="Reddit" role="img" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#f40"/><g fill="#fff"><ellipse cx="256" cy="307" rx="166" ry="117"/><circle cx="106" cy="256" r="42"/><circle cx="407" cy="256" r="42"/><circle cx="375" cy="114" r="32"/></g><g stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="m256 196 23-101 73 15" stroke="#fff" stroke-width="16"/><path d="m191 359c33 25 97 26 130 0" stroke="#f40" stroke-width="13"/></g><g fill="#f40"><circle cx="191" cy="287" r="31"/><circle cx="321" cy="287" r="31"/></g></svg>
+    </a>
+    {% endif %}
+    {% if entry[0]|lower == 'youtube' %}
+    <a href="{{entry[1]}}" title="{{entry[2]}}" target="_blank">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-label="YouTube" role="img" viewBox="0 0 512 512" fill="#ed1d24"><rect width="512" height="512" rx="15%"/><path d="m427 169c-4-15-17-27-32-31-34-9-239-10-278 0-15 4-28 16-32 31-9 38-10 135 0 174 4 15 17 27 32 31 36 10 241 10 278 0 15-4 28-16 32-31 9-36 9-137 0-174" fill="#fff"/><path d="m220 203v106l93-53"/></svg>
+    </a>
+    {% endif %}
+    {% if entry[0]|lower == 'gmail' %}
+    <a href="{{entry[1]}}" title="{{entry[2]}}" target="_blank">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-label="Gmail" role="img" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#fff"/><rect width="362" height="272" x="75" y="120" fill="#f2f2f2" rx="8%"/><path fill="#d54c3f" d="M120 392H97c-12 0-22-10-22-23V143h45z"/><path fill="#b63524" d="M392 392h23c12 0 22-10 22-23V143h-45z"/><path fill-opacity=".05" d="M256 286L120 392V187z"/><path fill-opacity=".08" d="M82 159l235 233h75V159z"/><path stroke-linecap="round" fill="none" stroke="#de5145" stroke-width="45" d="M97 143l159 115 159-115"/><path fill="#f2f2f2" d="M415 120c-5 0-10 2-13 4L256 230 110 124c-3-2-8-4-13-4z"/></svg>
+    </a>
+    {% endif %}
+    {% if entry[0]|lower == 'stackoverflow' %}
+    <a href="{{entry[1]}}" title="{{entry[2]}}" target="_blank">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-label="Stack Overflow" role="img" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#f58025"/><path stroke="#fff" stroke-width="30" fill="none" d="M293 89l90 120zm-53 50l115 97zm-41 65l136 64zm-23 69l148 31zm-6 68h150zm-45-44v105h241V297"/></svg>
+    </a>
+    {% endif %}
+    {% if entry[0]|lower == 'hackernews' %}
+    <a href="{{entry[1]}}" title="{{entry[2]}}" target="_blank">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-label="Hacker News" role="img" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#f60"/><path fill="#fff" d="M124 91h51l81 162 81-164h51L276 293v136h-40V293z"/></svg>
+    </a>
+    {% endif %}
+    {% if entry[0]|lower == 'gitlab' %}
+    <a href="{{entry[1]}}" title="{{entry[2]}}" target="_blank">
+        <svg xmlns="http://www.w3.org/2000/svg" aria-label="GitLab" role="img" viewBox="0 0 512 512"><rect width="512" height="512" rx="15%" fill="#30353e"/><path fill="#e24329" d="M84 215l43-133c2-7 12-7 14 0l115 353L371 82c2-7 12-7 14 0l43 133"/><path fill="#fc6d26" d="M256 435L84 215h100.4zm71.7-220H428L256 435l71.6-220z"/><path fill="#fca326" d="M84 215l-22 67c-2 6 0 13 6 16l188 137zm344 0l22 67c2 6 0 13-6 16L256 435z"/></svg>
+    </a>
+    {% endif %}
+    {% if entry[0]|lower == 'calendar' %}
+    <a href="{{entry[1]}}" title="{{entry[2]}}" target="_blank">
+        <svg onload="w()" xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink" aria-label="Calendar" role="img" viewBox="0 0 512 512" style="font-family:monospace;text-anchor:middle;fill:#667777"><script type="text/ecmascript"><![CDATA[w=()=>{c=0;for (i in e={weekday:"long",month:"short",day:'numeric'}) document.getElementsByTagName('text')[c++].textContent=(new Date).toLocaleString(undefined,{[i]:e[i]})}]]></script> <defs><clipPath id="c"><rect width="512" height="512" rx="15%"/></clipPath></defs> <g clip-path="url(#c)"><rect width="512" height="512" fill="#dee"/><rect width="512" height="180" fill="#d34"/></g><g id="b"><circle fill="#eab" cx="384" cy="100" r="14" id="a"/><use x="43" x:href="#a"/><use x="86" x:href="#a"/></g><use y="43" x:href="#b"/><text font-size="64" x="256" y="480" id="w">Sunday</text><text fill="#fff" font-size="140" x="140" y="164" id="m">FEB</text><text font-size="256" x="256" y="400" id="d">29</text></svg>
+    </a>
+    {% endif %}
     {% endfor %}
-    <a href="{{f_entry[2]}}" title="{{f_entry[0]}}" class="sidebar-social-links" target="_blank">
-    <i class="fa fa-{{f_entry[1]}} sidebar-social-links"></i></a>
-{% endfor %}
+</div>
 {% endif %}