Change social links display
- Refactored icon matching code (generates cleaner HTML)
- The social links now only show an icon with a tooltip when hovering.
- The normal links now use the icon matching code
diff --git a/static/css/style.less b/static/css/style.less
index 904ef63..32bb0bb 100644
--- a/static/css/style.less
+++ b/static/css/style.less
@@ -68,27 +68,37 @@
}
p {
- margin: 0 0 15px 0;
+ margin: 0px;
font-size: 14px;
}
+ i {
+ width: 30px;
+ text-align: center;
+ vertical-align: middle;
+ }
+
+ div.social {
+ margin-top:15px;
+
+ a {
+ display: inline-block;
+ height: 30px;
+ }
+ }
+
ul {
- margin: 20px 0 0 0;
- padding-left: 0;
+ margin: 0px;
+ padding-left: 0px;
font-size: 16px;
list-style-type: none;
li {
- display: block;
line-height: 2em;
a {
i {
padding-left: 5px;
- color: @black;
- width: 30px;
- text-align: center;
- vertical-align: middle;
}
}
}
diff --git a/templates/base.html b/templates/base.html
index 6fc27ed..4003e03 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -40,6 +40,54 @@
{% include "modules/analytics.html" %}
</head>
+{% macro get_icon(link) %}
+ {%- set class = 'fa-external-link-square' -%}
+
+ {# Attempt to normalize link URLs #}
+ {%- set temp = link|lower|replace('http://', '')|replace('https://', '')|replace('www.', '') -%}
+
+ {# Choosing a specific link icon #}
+ {%- if temp.startswith('bitcoin:') %}{% set class = 'fa-btc' %}
+ {% elif temp.startswith('irc:') %}{% set class = 'fa-comments' %}
+ {% elif temp.startswith('mailto:') %}{% set class = 'fa-envelope' %}
+ {% elif temp.startswith('skype:') %}{% set class = 'fa-skype' -%}
+
+ {%- elif temp.endswith('.pdf') or
+ temp.endswith('.txt') or
+ temp.endswith('.doc') or
+ temp.endswith('.docx') %}{% set class = 'fa-file-text' -%}
+
+ {%- elif temp.startswith('bitbucket.org') %}{% set class = 'fa-bitbucket' %}
+ {% elif temp.startswith('delicious.com') %}{% set class = 'fa-delicious' %}
+ {% elif temp.startswith('deviantart.com') %}{% set class = 'fa-deviantart' %}
+ {% elif temp.startswith('facebook.com') %}{% set class = 'fa-facebook' %}
+ {% elif temp.startswith('flickr.com') %}{% set class = 'fa-flickr' %}
+ {% elif temp.startswith('foursquare.com') %}{% set class = 'fa-foursquare' %}
+ {% elif temp.startswith('github.com') %}{% set class = 'fa-github' %}
+ {% elif temp.startswith('instagram.com') %}{% set class = 'fa-instagram' %}
+ {% elif temp.startswith('last.fm') %}{% set class = 'fa-lastfm' %}
+ {% elif temp.startswith('linkedin.com') %}{% set class = 'fa-linkedin' %}
+ {% elif temp.startswith('news.ycombinator.com') %}{% set class = 'fa-hacker-news' %}
+ {% elif temp.startswith('pinterest.com') %}{% set class = 'fa-pinterest' %}
+ {% elif temp.startswith('plus.google.com') %}{% set class = 'fa-google-plus' %}
+ {% elif temp.startswith('reddit.com') %}{% set class = 'fa-reddit' %}
+ {% elif temp.startswith('spotify.com') %}{% set class = 'fa-spotify' %}
+ {% elif temp.startswith('stackoverflow.com') %}{% set class = 'fa-stack-overflow' %}
+ {% elif temp.startswith('steamcommunity.com') %}{% set class = 'fa-steam' %}
+ {% elif temp.startswith('soundcloud.com') %}{% set class = 'fa-soundcloud' %}
+ {% elif temp.startswith('twitch.tv') %}{% set class = 'fa-twitch' %}
+ {% elif temp.startswith('twitter.com') %}{% set class = 'fa-twitter' %}
+ {% elif temp.startswith('vimeo.com') %}{% set class = 'fa-vimeo-square' %}
+ {% elif temp.startswith('vine.co') %}{% set class = 'fa-vine' %}
+ {% elif temp.startswith('youtube.com') %}{% set class = 'fa-youtube' -%}
+
+ {%- elif '.stackexchange.com' in temp %}{% set class = 'fa-stack-exchange' %}
+ {% elif '.tumblr.com' in temp %}{% set class = 'fa-tumblr' %}
+ {% endif -%}
+
+ <i class="fa {{ class }} fa-lg"></i>
+{%- endmacro -%}
+
<body>
<aside>
<div id="user_meta">
@@ -50,65 +98,18 @@
</a>
<h2><a href="{{ SITEURL }}" class="nohover">{{ SITENAME }}</a></h2>
<p>{{ TAGLINE }}</p>
- <ul>
+ <div class="social">
{% for name, link in SOCIAL %}
-
- {# Attempt to normalize link URLs #}
- {% set temp = link|lower|replace('http://', '')|replace('https://', '')|replace('www.', '') %}
-
- {% set class = 'fa-external-link-square' %}
-
- {% if MANGLE_EMAILS and temp.startswith('mailto:') %}
- <li><a data-email="{{ link|reverse }}" title="You need javascript enabled to view this email" class="email">{{ name }}<i class="fa fa-envelope fa-lg"></i></a></li>
+ {% if MANGLE_EMAILS and link.startswith('mailto:') %}
+ <a data-email="{{ link|reverse }}" data-title="{{ name }}" title="You need javascript enabled to view this email" class="email">{{ get_icon(link) }}</a>
{% else %}
-
- {# Choosing a specific link icon #}
- {% if temp.startswith('bitcoin:') %}{% set class = 'fa-btc' %}
- {% elif temp.startswith('irc:') %}{% set class = 'fa-comments' %}
- {% elif temp.startswith('mailto:') %}{% set class = 'fa-envelope' %}
- {% elif temp.startswith('skype:') %}{% set class = 'fa-skype' %}
-
- {% elif temp.endswith('.pdf') or
- temp.endswith('.txt') or
- temp.endswith('.doc') or
- temp.endswith('.docx') %}{% set class = 'fa-file-text' %}
-
- {% elif temp.startswith('bitbucket.org') %}{% set class = 'fa-bitbucket' %}
- {% elif temp.startswith('delicious.com') %}{% set class = 'fa-delicious' %}
- {% elif temp.startswith('deviantart.com') %}{% set class = 'fa-deviantart' %}
- {% elif temp.startswith('facebook.com') %}{% set class = 'fa-facebook' %}
- {% elif temp.startswith('flickr.com') %}{% set class = 'fa-flickr' %}
- {% elif temp.startswith('foursquare.com') %}{% set class = 'fa-foursquare' %}
- {% elif temp.startswith('github.com') %}{% set class = 'fa-github' %}
- {% elif temp.startswith('instagram.com') %}{% set class = 'fa-instagram' %}
- {% elif temp.startswith('last.fm') %}{% set class = 'fa-lastfm' %}
- {% elif temp.startswith('linkedin.com') %}{% set class = 'fa-linkedin' %}
- {% elif temp.startswith('news.ycombinator.com') %}{% set class = 'fa-hacker-news' %}
- {% elif temp.startswith('pinterest.com') %}{% set class = 'fa-pinterest' %}
- {% elif temp.startswith('plus.google.com') %}{% set class = 'fa-google-plus' %}
- {% elif temp.startswith('reddit.com') %}{% set class = 'fa-reddit' %}
- {% elif temp.startswith('spotify.com') %}{% set class = 'fa-spotify' %}
- {% elif temp.startswith('stackoverflow.com') %}{% set class = 'fa-stack-overflow' %}
- {% elif temp.startswith('steamcommunity.com') %}{% set class = 'fa-steam' %}
- {% elif temp.startswith('soundcloud.com') %}{% set class = 'fa-soundcloud' %}
- {% elif temp.startswith('twitch.tv') %}{% set class = 'fa-twitch' %}
- {% elif temp.startswith('twitter.com') %}{% set class = 'fa-twitter' %}
- {% elif temp.startswith('vimeo.com') %}{% set class = 'fa-vimeo-square' %}
- {% elif temp.startswith('vine.co') %}{% set class = 'fa-vine' %}
- {% elif temp.startswith('youtube.com') %}{% set class = 'fa-youtube' %}
-
- {% elif '.stackexchange.com' in temp %}{% set class = 'fa-stack-exchange' %}
- {% elif '.tumblr.com' in temp %}{% set class = 'fa-tumblr' %}
-
- {% endif %}
-
- <li><a href="{{ link }}">{{ name }}<i class="fa {{ class }} fa-lg"></i></a></li>
+ <a href="{{ link }}" title="{{ name }}">{{ get_icon(link) }}</a>
{% endif %}
{% endfor %}
- </ul>
+ </div>
<ul>
{% for name, link in LINKS %}
- <li><a href="{{ link }}">{{ name }}<i class="fa fa-external-link-square fa-lg"></i></a></li>
+ <li><a href="{{ link }}">{{ name }}{{ get_icon(link) }}</a></li>
{% endfor %}
</ul>
</div>
@@ -164,10 +165,12 @@
var e = document.querySelectorAll(".email");
for (var i = 0; i < e.length; i++) {
var email = e[i].getAttribute("data-email")
+ var title = e[i].getAttribute("data-title") || "Email"
if (email){
e[i].href = email.split("").reverse().join("");
+ e[i].setAttribute("title", title);
e[i].removeAttribute("data-email");
- e[i].removeAttribute("title");
+ e[i].removeAttribute("data-title");
e[i].removeAttribute("class");
}
}