OCram85/beautifulSA-jekyll
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Icon replacement text for screen-reader/text-only browsing, fixes #176 (#189)

Browse Source
This commit is contained in:
Eusebius N 2017-03-30 18:01:15 +01:00 committed by Dean Attali
parent cbb422822e
commit b35cb64ff8
2 changed files with 46 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
_includes/footer.html
View File

@ -6,152 +6,167 @@
{% if site.author.facebook and site.footer-links-active.facebook %} {% if site.author.facebook and site.footer-links-active.facebook %}
<li> <li>
<a href="https://www.facebook.com/{{ site.author.facebook }}" title="Facebook"> <a href="https://www.facebook.com/{{ site.author.facebook }}" title="Facebook">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i> <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">Facebook</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.author.github and site.footer-links-active.github %} {% if site.author.github and site.footer-links-active.github %}
<li> <li>
<a href="https://github.com/{{ site.author.github }}" title="GitHub"> <a href="https://github.com/{{ site.author.github }}" title="GitHub">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i> <i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">GitHub</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.author.twitter and site.footer-links-active.twitter %} {% if site.author.twitter and site.footer-links-active.twitter %}
<li> <li>
<a href="https://twitter.com/{{ site.author.twitter }}" title="Twitter"> <a href="https://twitter.com/{{ site.author.twitter }}" title="Twitter">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">Twitter</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.author.reddit and site.footer-links-active.reddit %} {% if site.author.reddit and site.footer-links-active.reddit %}
<li> <li>
<a href="https://reddit.com/u/{{ site.author.reddit }}" title="Reddit"> <a href="https://reddit.com/u/{{ site.author.reddit }}" title="Reddit">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-reddit fa-stack-1x fa-inverse"></i> <i class="fa fa-reddit fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">Reddit</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.author.google-plus and site.footer-links-active.google-plus %} {% if site.author.google-plus and site.footer-links-active.google-plus %}
<li> <li>
<a href="https://plus.google.com/{{ site.author.google-plus }}" title="Google+"> <a href="https://plus.google.com/{{ site.author.google-plus }}" title="Google+">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-google-plus fa-stack-1x fa-inverse"></i> <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">Google+</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.author.email and site.footer-links-active.email %} {% if site.author.email and site.footer-links-active.email %}
<li> <li>
<a href="mailto:{{ site.author.email }}" title="Email me"> <a href="mailto:{{ site.author.email }}" title="Email me">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i> <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">Email me</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.author.linkedin and site.footer-links-active.linkedin %} {% if site.author.linkedin and site.footer-links-active.linkedin %}
<li> <li>
<a href="https://linkedin.com/in/{{ site.author.linkedin }}" title="LinkedIn"> <a href="https://linkedin.com/in/{{ site.author.linkedin }}" title="LinkedIn">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i> <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">LinkedIn</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.author.xing and site.footer-links-active.xing %} {% if site.author.xing and site.footer-links-active.xing %}
<li> <li>
<a href="https://www.xing.com/profile/{{ site.author.xing }}" title="Xing"> <a href="https://www.xing.com/profile/{{ site.author.xing }}" title="Xing">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-xing fa-stack-1x fa-inverse"></i> <i class="fa fa-xing fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">Xing</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.author.stackoverflow and site.footer-links-active.stackoverflow %} {% if site.author.stackoverflow and site.footer-links-active.stackoverflow %}
<li> <li>
<a href="https://stackoverflow.com/users/{{ site.author.stackoverflow }}" title="StackOverflow"> <a href="https://stackoverflow.com/users/{{ site.author.stackoverflow }}" title="StackOverflow">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-stack-overflow fa-stack-1x fa-inverse"></i> <i class="fa fa-stack-overflow fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">StackOverflow</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.author.snapchat and site.footer-links-active.snapchat %} {% if site.author.snapchat and site.footer-links-active.snapchat %}
<li> <li>
<a href="https://www.snapchat.com/add/{{ site.author.snapchat }}" title="Snapchat"> <a href="https://www.snapchat.com/add/{{ site.author.snapchat }}" title="Snapchat">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-snapchat-ghost fa-stack-1x fa-inverse"></i> <i class="fa fa-snapchat-ghost fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">Snapchat</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.author.instagram and site.footer-links-active.instagram %} {% if site.author.instagram and site.footer-links-active.instagram %}
<li> <li>
<a href="https://www.instagram.com/{{ site.author.instagram }}" title="Instagram"> <a href="https://www.instagram.com/{{ site.author.instagram }}" title="Instagram">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i> <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">Instagram</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.author.youtube and site.footer-links-active.youtube %} {% if site.author.youtube and site.footer-links-active.youtube %}
<li> <li>
<a href="https://www.youtube.com/{{ site.author.youtube }}" title="YouTube"> <a href="https://www.youtube.com/{{ site.author.youtube }}" title="YouTube">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i> <i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">YouTube</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.author.spotify and site.footer-links-active.spotify %} {% if site.author.spotify and site.footer-links-active.spotify %}
<li> <li>
<a href="https://open.spotify.com/user/{{ site.author.spotify }}" title="Spotify"> <a href="https://open.spotify.com/user/{{ site.author.spotify }}" title="Spotify">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-spotify fa-stack-1x fa-inverse"></i> <i class="fa fa-spotify fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">Spotify</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.author.telephone and site.footer-links-active.telephone %} {% if site.author.telephone and site.footer-links-active.telephone %}
<li> <li>
<a href="tel:{{ site.author.telephone }}" title="Phone"> <a href="tel:{{ site.author.telephone }}" title="Phone">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-phone fa-stack-1x fa-inverse"></i> <i class="fa fa-phone fa-stack-1x fa-inverse"></i>
</span> </span>
<span class="sr-only">Phone</span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if site.footer-links-active.rss %} {% if site.footer-links-active.rss %}
<li> <li>
<a href="{{ '/feed.xml' | prepend: site.baseurl }}" title="RSS"> <a href="{{ '/feed.xml' | prepend: site.baseurl }}" title="RSS">
<span class="fa-stack fa-lg"> <span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-rss fa-stack-1x fa-inverse"></i> <i class="fa fa-rss fa-stack-1x fa-inverse"></i>
</span> </span>
</a> <span class="sr-only">RSS</span>
</li> </a>
</li>
{% endif %} {% endif %}
</ul> </ul>
<p class="copyright text-muted"> <p class="copyright text-muted">

13
_includes/social-share.html
View File

@ -8,36 +8,41 @@
{% if any-share-links %} {% if any-share-links %}
<section id = "social-share-section"> <section id = "social-share-section">
<span class="sr-only">Share: </span>
<!--- Share on Twitter -->
{% if site.share-links-active.twitter %} {% if site.share-links-active.twitter %}
<!--- Share on Twitter -->
<a href="https://twitter.com/intent/tweet?text={{ page.title | url_encode }}+{{ site.url }}{{ page.url }}" <a href="https://twitter.com/intent/tweet?text={{ page.title | url_encode }}+{{ site.url }}{{ page.url }}"
class="btn btn-social-icon btn-twitter" title="Share on Twitter"> class="btn btn-social-icon btn-twitter" title="Share on Twitter">
<span class="fa fa-fw fa-twitter" aria-hidden="true"></span> <span class="fa fa-fw fa-twitter" aria-hidden="true"></span>
<span class="sr-only">Twitter</span>
</a> </a>
{% endif %} {% endif %}
<!--- Share on Facebook -->
{% if site.share-links-active.facebook %} {% if site.share-links-active.facebook %}
<!--- Share on Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}"
class="btn btn-social-icon btn-facebook" title="Share on Facebook"> class="btn btn-social-icon btn-facebook" title="Share on Facebook">
<span class="fa fa-fw fa-facebook" aria-hidden="true"></span> <span class="fa fa-fw fa-facebook" aria-hidden="true"></span>
<span class="sr-only">Facebook</span>
</a> </a>
{% endif %} {% endif %}
<!--- Share on Google Plus -->
{% if site.share-links-active.google %} {% if site.share-links-active.google %}
<!--- Share on Google Plus -->
<a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" <a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}"
class="btn btn-social-icon btn-google" title="Share on Google+"> class="btn btn-social-icon btn-google" title="Share on Google+">
<span class="fa fa-fw fa-google-plus" aria-hidden="true"></span> <span class="fa fa-fw fa-google-plus" aria-hidden="true"></span>
<span class="sr-only">Google+</span>
</a> </a>
{% endif %} {% endif %}
<!--- Share on LinkedIn -->
{% if site.share-links-active.linkedin %} {% if site.share-links-active.linkedin %}
<!--- Share on LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}" <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ page.url }}"
class="btn btn-social-icon btn-linkedin" title="Share on LinkedIn"> class="btn btn-social-icon btn-linkedin" title="Share on LinkedIn">
<span class="fa fa-fw fa-linkedin" aria-hidden="true"></span> <span class="fa fa-fw fa-linkedin" aria-hidden="true"></span>
<span class="sr-only">LinkedIn</span>
</a> </a>
{% endif %} {% endif %}