04a27b7ed9
* Open social media in new tab and add Medium svg file pulled from Medium post on their logos and brand guides dated Aug 22, 2017 https://medium.design/logos-and-brand-guidelines-f1a01a733592 * Add new-window accessibility icon for social media icons Visible on-hover of link-transition class, this PR also adds a description to the social media icons indicating that they will open in a new window. This way, users will be able to see and hear (via a reader) when a tab will open in a new window. This approach is based on the one outlined here: https://medium.com/@svinkle/why-let-someone-know-when-a-link-opens-a-new-window-8699d20ed3b1
45 lines
527 B
CSS
45 lines
527 B
CSS
.facebook, .twitter, .instagram, .youtube, .github, .gitlab, .linkedin, .medium {
|
|
fill: #BABABA;
|
|
}
|
|
|
|
.new-window {
|
|
opacity: 0;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.link-transition:hover .new-window{
|
|
opacity: 1;
|
|
}
|
|
|
|
.facebook:hover {
|
|
fill: #3b5998;
|
|
}
|
|
|
|
.twitter:hover {
|
|
fill: #1da1f2;
|
|
}
|
|
|
|
.instagram:hover {
|
|
fill: #e1306c;
|
|
}
|
|
|
|
.youtube:hover {
|
|
fill: #cd201f;
|
|
}
|
|
|
|
.github:hover {
|
|
fill: #6cc644;
|
|
}
|
|
|
|
.gitlab:hover {
|
|
fill: #FC6D26;
|
|
}
|
|
|
|
.linkedin:hover {
|
|
fill: #0077b5
|
|
}
|
|
|
|
.medium:hover {
|
|
fill: #0077b5
|
|
}
|