Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Mar 30, 2017
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 37 additions & 22 deletions _includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,152 +6,167 @@
{% if site.author.facebook and site.footer-links-active.facebook %}
<li>
<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-facebook fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">Facebook</span>
</a>
</li>
{% endif %}
{% if site.author.github and site.footer-links-active.github %}
<li>
<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-github fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">GitHub</span>
</a>
</li>
{% endif %}
{% if site.author.twitter and site.footer-links-active.twitter %}
<li>
<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-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">Twitter</span>
</a>
</li>
{% endif %}
{% if site.author.reddit and site.footer-links-active.reddit %}
<li>
<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-reddit fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">Reddit</span>
</a>
</li>
{% endif %}
{% if site.author.google-plus and site.footer-links-active.google-plus %}
<li>
<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-google-plus fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">Google+</span>
</a>
</li>
{% endif %}
{% if site.author.email and site.footer-links-active.email %}
<li>
<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-envelope fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">Email me</span>
</a>
</li>
{% endif %}
{% if site.author.linkedin and site.footer-links-active.linkedin %}
<li>
<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-linkedin fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">LinkedIn</span>
</a>
</li>
{% endif %}
{% if site.author.xing and site.footer-links-active.xing %}
<li>
<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-xing fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">Xing</span>
</a>
</li>
{% endif %}
{% if site.author.stackoverflow and site.footer-links-active.stackoverflow %}
<li>
<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-stack-overflow fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">StackOverflow</span>
</a>
</li>
{% endif %}
{% if site.author.snapchat and site.footer-links-active.snapchat %}
<li>
<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-snapchat-ghost fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">Snapchat</span>
</a>
</li>
{% endif %}
{% if site.author.instagram and site.footer-links-active.instagram %}
<li>
<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-instagram fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">Instagram</span>
</a>
</li>
{% endif %}
{% if site.author.youtube and site.footer-links-active.youtube %}
<li>
<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-youtube fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">YouTube</span>
</a>
</li>
{% endif %}
{% if site.author.spotify and site.footer-links-active.spotify %}
<li>
<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-spotify fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">Spotify</span>
</a>
</li>
{% endif %}
{% if site.author.telephone and site.footer-links-active.telephone %}
<li>
<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-phone fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">Phone</span>
</a>
</li>
{% endif %}
{% if site.footer-links-active.rss %}
<li>
<a href="{{ '/feed.xml' | prepend: site.baseurl }}" title="RSS">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-rss fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="{{ '/feed.xml' | prepend: site.baseurl }}" title="RSS">
<span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-rss fa-stack-1x fa-inverse"></i>
</span>
<span class="sr-only">RSS</span>
</a>
</li>
{% endif %}
</ul>
<p class="copyright text-muted">
Expand Down
13 changes: 9 additions & 4 deletions _includes/social-share.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,41 @@

{% if any-share-links %}
<section id = "social-share-section">
<span class="sr-only">Share: </span>

<!--- Share on 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 }}"
class="btn btn-social-icon btn-twitter" title="Share on Twitter">
<span class="fa fa-fw fa-twitter" aria-hidden="true"></span>
<span class="sr-only">Twitter</span>
</a>
{% endif %}

<!--- Share on Facebook -->
{% if site.share-links-active.facebook %}
<!--- Share on Facebook -->
<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">
<span class="fa fa-fw fa-facebook" aria-hidden="true"></span>
<span class="sr-only">Facebook</span>
</a>
{% endif %}

<!--- Share on Google Plus -->
{% if site.share-links-active.google %}
<!--- Share on Google Plus -->
<a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}"
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="sr-only">Google+</span>
</a>
{% endif %}

<!--- Share on LinkedIn -->
{% if site.share-links-active.linkedin %}
<!--- Share on LinkedIn -->
<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">
<span class="fa fa-fw fa-linkedin" aria-hidden="true"></span>
<span class="sr-only">LinkedIn</span>
</a>
{% endif %}

Expand Down