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.

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

Open social media links in new tab and add Medium icon #143

Merged
merged 2 commits into from
Nov 27, 2018

Conversation

hannahhenderson
Copy link
Contributor

@hannahhenderson hannahhenderson commented Nov 26, 2018

Changes

  • Opens social media links in a new tab
  • Adds an svg file of the Medium logo (source)
  • Updates the assets

Considerations

  1. Given that the changes are generated, I'm not sure how you'd like to see the static/dist files updated. Lmk if you'd like to see any changes.
  2. I used the same :hover color as for LinkedIn.

medium-icon

UPDATES
Updated to reflect @budparr's input. These new changes include the addition of:

  • id span letting folks know when a link opens in a new window
  • new-window svg

I reduced the right-margin between social media icons to reduce the spread introduced by the hidden open-in-new-tab new-window svg.

screen shot 2018-11-27 at 11 17 39 am

with-accessibility-icon

svg file pulled from Medium post on their logos
and brand guides dated Aug 22, 2017

https://medium.design/logos-and-brand-guidelines-f1a01a733592
@budparr
Copy link
Member

budparr commented Nov 27, 2018

Hi @hannahhenderson

Given that the changes are generated, I'm not sure how you'd like to see the static/dist files updated.

Not entirely sure what you mean. You updated the CSS and it appears the file is showing up in the dist folder.

  1. Fine by me. I don't think Medium even has a color.

Lastly though I think it would be a good idea to add an accessibility affordance here. Perhaps what Scott Vinkle outlines in this post (skip down to "Example of what I’m talkin’ about"). https://medium.com/@svinkle/why-let-someone-know-when-a-link-opens-a-new-window-8699d20ed3b1

Thanks very much!
Bud

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
@hannahhenderson
Copy link
Contributor Author

Ah, great. I've been using .proto files a ton lately and don't commit the compiled code. Been awhile since my brain CSS-ed 😋

Great call-out on the accessibility affordance. Officially updated.

hannahhenderson added a commit to hannahhenderson/hh-gohugo-theme-ananke that referenced this pull request Nov 27, 2018
…y fields

I proposed the Medium icon and accessibility pieces of this PR to the
master project in this PR: 
theNewDynamic#143 (comment)

The summary page updates are for me
@budparr
Copy link
Member

budparr commented Nov 27, 2018

This looks great, @hannahhenderson Thank you.

@budparr budparr merged commit 04a27b7 into theNewDynamic:master Nov 27, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants