Make social icons more generic and add accessibility (#130)

* Made social icons more configurable and add accessibility

* Paths weren't correct for landing.md

* Support for empty values in social media configuration
This commit is contained in:
coezbek 2021-03-27 17:43:39 +01:00 committed by GitHub
parent 8960c1023d
commit dab6f58e34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 41 deletions

View File

@ -17,17 +17,19 @@ phone: (716) 555-5555
tiles-source: pages # accepts "posts" or "pages"
tiles-count: 6
# social settings
500px_url:
facebook_url:
github_url:
gitlab_url: https://gitlab.com/andrewbanchich
googleplus_url: https://plus.google.com/u/0/+AndrewBanchich
instagram_url: https://instagram.com
linkedin_url: https://www.linkedin.com/in/andrew-banchich-a4ba1195
pinterest_url:
slack_url:
twitter_url: https://twitter.com/andrewbanchich
# social settings (key must match name of font awesome icon)
# see https://fontawesome.com/icons?d=gallery&p=2&s=brands
# Icons are not shown if value is empty
# You need to restart jekyll for changes to have an effect
socials:
GitHub: https://github.com/andrewbanchich
GitLab:
Google-Plus: https://plus.google.com/u/0/+AndrewBanchich
Instagram:
LinkedIn: https://www.linkedin.com/in/andrew-banchich-a4ba1195
Twitter: https://twitter.com/andrewbanchich
Facebook:
Slack:
# build settings
markdown: kramdown

View File

@ -67,36 +67,15 @@
<footer id="footer">
<div class="inner">
<ul class="icons">
{% if site.twitter_url %}
<li><a href="{{ site.twitter_url }}" class="icon alt fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
{% endif %}
{% if site.googleplus_url %}
<li><a href="{{ site.googleplus_url }}" class="icon alt fa-google-plus" target="_blank"><span class="label">Google+</span></a></li>
{% endif %}
{% if site.facebook_url %}
<li><a href="{{ site.facebook_url }}" class="icon alt fa-facebook" target="_blank"><span class="label">Facebook</span></a></li>
{% endif %}
{% if site.instagram_url %}
<li><a href="{{ site.instagram_url }}" class="icon alt fa-instagram" target="_blank"><span class="label">Instagram</span></a></li>
{% endif %}
{% if site.pinterest_url %}
<li><a href="{{ site.pinterest_url }}" class="icon alt fa-pinterest" target="_blank"><span class="label">Pinterest</span></a></li>
{% endif %}
{% if site.500px_url %}
<li><a href="{{ site.500px_url }}" class="icon alt fa-500px" target="_blank"><span class="label">500px</span></a></li>
{% endif %}
{% if site.gitlab_url %}
<li><a href="{{ site.gitlab_url }}" class="icon alt fa-gitlab" target="_blank"><span class="label">GitLab</span></a></li>
{% endif %}
{% if site.github_url %}
<li><a href="{{ site.github_url }}" class="icon alt fa-github" target="_blank"><span class="label">GitHub</span></a></li>
{% endif %}
{% if site.slack_url %}
<li><a href="{{ site.slack_url }}" class="icon alt fa-slack" target="_blank"><span class="label">Slack</span></a></li>
{% endif %}
{% if site.linkedin_url %}
<li><a href="{{ site.linkedin_url }}" class="icon alt fa-linkedin" target="_blank"><span class="label">LinkedIn</span></a></li>
{% endif %}
{% for key_value in site.socials %}
{% if key_value[1] %}
<li>
<a href="{{ key_value[1] }}" class="icon alt fa-{{ key_value[0] | downcase }}" target="_blank" rel="noopener noreferrer" aria-label="{{ key_value[0] }}">
<span class="label">{{ key_value[0] }}</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
<ul class="copyright">
<li>&copy; {{ site.title }} {{ site.subtitle }}</li>