add tooltips to social links; improve SVGs; add comments to config

This commit is contained in:
Brandon Rosage 2019-03-07 12:24:42 -06:00
parent 8123b3ffae
commit 474a676c4b
4 changed files with 16 additions and 5 deletions

View file

@ -94,16 +94,18 @@ Your website comes pre-configured with three topics (e.g. "Web design" and "Sass
#### Social media
Your website supports linking and sharing to social media services you're using, including Facebook, Dribbble, LinkedIn, Twitter, and YouTube. To identify the services you use:
Your website supports linking and sharing to social media services you're using, including Behance, Facebook, Dribbble, LinkedIn, Stack Overflow, Twitter, and YouTube. To identify the services you use:
1. Edit your repository's `_config.yml` file.
2. Add a `social_media` dictionary line, and represent the services you like in a simple `key: value` form:
2. Edit the `social_media` dictionary line, and represent the services you like in a simple `key: value` form:
```
social_media:
behance: your_username
facebook: your_username
dribbble: your_username
linkedin: your_username
stackoverflow: your_user_id
twitter: your_username
youtube: your_username
```

View file

@ -27,6 +27,15 @@ projects:
projects:
# - repo-name
social_media:
# behance: your_username
# facebook: your_username
# dribbble: your_username
# linkedin: your_username
# stackoverflow: your_user_id
# twitter: your_username
# youtube: your_username
topics:
- name: CSS
web_url: https://github.com/topics/css

View file

@ -1,7 +1,7 @@
behance:
name: Behance
profile_url_prefix: https://www.behance.net/
icon_svg: '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 455 455" style="enable-background:new 0 0 455 455;" xml:space="preserve"> <g> <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M181.289,242.565c-5.597-4.246-13.062-6.358-22.245-6.358h-46.379v53.356 h45.524c4.211,0,8.205-0.373,11.963-1.214c3.815-0.834,7.199-2.156,10.052-4.11c2.853-1.879,5.216-4.455,6.934-7.731 c1.724-3.247,2.55-7.465,2.55-12.559C189.688,253.961,186.879,246.873,181.289,242.565z"/> <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M174.606,201.654c4.907-3.582,7.286-9.502,7.286-17.621 c0-4.509-0.79-8.235-2.379-11.126c-1.645-2.892-3.822-5.155-6.574-6.739c-2.73-1.649-5.813-2.788-9.391-3.402 c-3.513-0.687-7.199-0.956-10.972-0.956h-39.913v45.276h43.168C163.391,207.086,169.649,205.293,174.606,201.654z"/> <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M0,0v455h455V0H0z M275.636,141.802h78.54v19.12h-78.54V141.802z M226.605,291.707c-3.793,7.204-8.959,13.041-15.326,17.546c-6.416,4.545-13.788,7.878-22.044,10.048 c-8.162,2.17-16.64,3.262-25.32,3.262H70V128.804h91.351c9.269,0,17.632,0.801,25.277,2.458c7.602,1.613,14.09,4.304,19.572,7.993 c5.396,3.69,9.621,8.597,12.645,14.78c2.953,6.09,4.434,13.717,4.434,22.734c0,9.754-2.213,17.901-6.639,24.414 c-4.462,6.502-11.014,11.838-19.773,15.98c11.927,3.427,20.758,9.463,26.613,18.045c5.885,8.641,8.766,18.979,8.766,31.101 C232.245,276.134,230.363,284.595,226.605,291.707z M384.755,261.692H283.518c0,11.09,3.75,21.591,9.542,27.227 c5.769,5.637,14.111,8.471,24.917,8.471c7.774,0,14.492-1.965,20.125-5.881c5.583-3.912,8.981-8.094,10.296-12.437h33.935 c-5.453,16.888-13.73,28.944-25.018,36.202c-11.158,7.289-24.768,10.921-40.624,10.921c-11.051,0-20.995-1.789-29.926-5.313 c-8.924-3.568-16.382-8.568-22.654-15.085c-6.115-6.549-10.864-14.287-14.248-23.38c-3.348-9.043-5.037-19.055-5.037-29.905 c0-10.49,1.753-20.291,5.18-29.348c3.499-9.089,8.335-16.931,14.694-23.509c6.373-6.614,13.931-11.834,22.733-15.645 c8.802-3.798,18.508-5.709,29.258-5.709c11.869,0,22.266,2.284,31.176,6.937c8.88,4.588,16.159,10.807,21.878,18.592 c5.719,7.771,9.786,16.659,12.33,26.628C384.597,240.41,385.481,250.807,384.755,261.692z"/> <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M315.534,207.398c-6.157,0-11.252,1.035-15.332,3.147 c-3.988,2.084-7.257,4.677-9.757,7.731c-2.486,3.104-4.182,6.38-5.166,9.883c-0.991,3.413-1.58,6.51-1.76,9.248h62.697 c-0.92-9.826-4.283-17.09-8.881-22.198C332.757,210.139,324.997,207.398,315.534,207.398z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>'
icon_svg: '<svg height="20" fill="#959da5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 455 455" style="enable-background:new 0 0 455 455;" xml:space="preserve"> <g> <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M181.289,242.565c-5.597-4.246-13.062-6.358-22.245-6.358h-46.379v53.356 h45.524c4.211,0,8.205-0.373,11.963-1.214c3.815-0.834,7.199-2.156,10.052-4.11c2.853-1.879,5.216-4.455,6.934-7.731 c1.724-3.247,2.55-7.465,2.55-12.559C189.688,253.961,186.879,246.873,181.289,242.565z"/> <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M174.606,201.654c4.907-3.582,7.286-9.502,7.286-17.621 c0-4.509-0.79-8.235-2.379-11.126c-1.645-2.892-3.822-5.155-6.574-6.739c-2.73-1.649-5.813-2.788-9.391-3.402 c-3.513-0.687-7.199-0.956-10.972-0.956h-39.913v45.276h43.168C163.391,207.086,169.649,205.293,174.606,201.654z"/> <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M0,0v455h455V0H0z M275.636,141.802h78.54v19.12h-78.54V141.802z M226.605,291.707c-3.793,7.204-8.959,13.041-15.326,17.546c-6.416,4.545-13.788,7.878-22.044,10.048 c-8.162,2.17-16.64,3.262-25.32,3.262H70V128.804h91.351c9.269,0,17.632,0.801,25.277,2.458c7.602,1.613,14.09,4.304,19.572,7.993 c5.396,3.69,9.621,8.597,12.645,14.78c2.953,6.09,4.434,13.717,4.434,22.734c0,9.754-2.213,17.901-6.639,24.414 c-4.462,6.502-11.014,11.838-19.773,15.98c11.927,3.427,20.758,9.463,26.613,18.045c5.885,8.641,8.766,18.979,8.766,31.101 C232.245,276.134,230.363,284.595,226.605,291.707z M384.755,261.692H283.518c0,11.09,3.75,21.591,9.542,27.227 c5.769,5.637,14.111,8.471,24.917,8.471c7.774,0,14.492-1.965,20.125-5.881c5.583-3.912,8.981-8.094,10.296-12.437h33.935 c-5.453,16.888-13.73,28.944-25.018,36.202c-11.158,7.289-24.768,10.921-40.624,10.921c-11.051,0-20.995-1.789-29.926-5.313 c-8.924-3.568-16.382-8.568-22.654-15.085c-6.115-6.549-10.864-14.287-14.248-23.38c-3.348-9.043-5.037-19.055-5.037-29.905 c0-10.49,1.753-20.291,5.18-29.348c3.499-9.089,8.335-16.931,14.694-23.509c6.373-6.614,13.931-11.834,22.733-15.645 c8.802-3.798,18.508-5.709,29.258-5.709c11.869,0,22.266,2.284,31.176,6.937c8.88,4.588,16.159,10.807,21.878,18.592 c5.719,7.771,9.786,16.659,12.33,26.628C384.597,240.41,385.481,250.807,384.755,261.692z"/> <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M315.534,207.398c-6.157,0-11.252,1.035-15.332,3.147 c-3.988,2.084-7.257,4.677-9.757,7.731c-2.486,3.104-4.182,6.38-5.166,9.883c-0.991,3.413-1.58,6.51-1.76,9.248h62.697 c-0.92-9.826-4.283-17.09-8.881-22.198C332.757,210.139,324.997,207.398,315.534,207.398z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>'
facebook:
name: Facebook
@ -16,7 +16,7 @@ linkedin:
stackoverflow:
name: Stack Overflow
profile_url_prefix: http://stackoverflow.com/u/
icon_svg: '<svg height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><style>.st0{fill:#bcbbbb}.st1{fill:#f48023}</style><path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/><path class="st1" d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"/></svg>'
icon_svg: '<svg height="20" fill="#959da5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/><path class="st1" d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"/></svg>'
twitter:
name: Twitter

View file

@ -40,7 +40,7 @@
<div class="mr-3 mb-3">
{% assign service_shortname = account[0] %}
{% assign service = site.data.social_media[service_shortname] %}
<a href="{{ service.profile_url_prefix }}{{ account[1] }}" title="{{ service.name }}: {{ account[1] }}">
<a href="{{ service.profile_url_prefix }}{{ account[1] }}" title="{{ service.name }}: {{ account[1] }}" class="tooltipped tooltipped-s" aria-label="{{ service.name }}: {{ account[1] }}">
{{ service.icon_svg }}<span class="d-none">{{ service.name }}</span>
</a>
</div>