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
55 lines
2.7 KiB
HTML
55 lines
2.7 KiB
HTML
<!-- TODO: Add follow intents where available TODO: Revisit color and hover color -->
|
|
<div hidden>
|
|
<span id="new-window-0">Opens in a new window</span>
|
|
<span id="new-window-1">Opens an external site</span>
|
|
<span id="new-window-2">Opens an external site in a new window</span>
|
|
</div>
|
|
{{ $icon_size := "32px" }}
|
|
{{ with .Param "facebook" }}
|
|
<a href="{{ . }}" target="_blank" class="link-transition facebook link dib z-999 pt3 pt0-l mr1" title="Facebook link" rel="noopener" aria-describedby="new-window-0">
|
|
{{ partial "svg/facebook.svg" (dict "size" $icon_size) }}
|
|
{{- partial "new-window-icon.html" . -}}
|
|
</a>
|
|
{{ end }}
|
|
{{ with .Param "twitter" }}
|
|
<a href="{{ . }}" target="_blank" class="link-transition twitter link dib z-999 pt3 pt0-l mr1" title="Twitter link" rel="noopener" aria-describedby="new-window-0">
|
|
{{ partial "svg/twitter.svg" (dict "size" $icon_size) }}
|
|
{{- partial "new-window-icon.html" . -}}
|
|
</a>
|
|
{{ end }}
|
|
{{ with .Param "instagram" }}
|
|
<a href="{{ . }}" target="_blank" class="link-transition instagram link dib z-999 pt3 pt0-l mr1" title="Instagram link" rel="noopener" aria-describedby="new-window-0">
|
|
{{ partial "svg/instagram.svg" (dict "size" $icon_size) }}
|
|
{{- partial "new-window-icon.html" . -}}
|
|
</a>
|
|
{{ end }}
|
|
{{ with .Param "youtube" }}
|
|
<a href="{{ . }}" target="_blank" class="link-transition youtube link dib z-999 pt3 pt0-l mr1" title="Youtube link" rel="noopener" aria-describedby="new-window-0">
|
|
{{ partial "svg/youtube.svg" (dict "size" $icon_size) }}
|
|
{{- partial "new-window-icon.html" . -}}
|
|
</a>
|
|
{{ end }}
|
|
{{ with .Param "linkedin" }}
|
|
<a href="{{ . }}" target="_blank" class="link-transition linkedin link dib z-999 pt3 pt0-l mr1" title="LinkedIn link" rel="noopener" aria-describedby="new-window-0">
|
|
{{ partial "svg/linkedin.svg" (dict "size" $icon_size) }}
|
|
{{- partial "new-window-icon.html" . -}}
|
|
</a>
|
|
{{ end }}
|
|
{{ with .Param "github" }}
|
|
<a href="{{ . }}" target="_blank" class="link-transition github link dib z-999 pt3 pt0-l mr1" title="Github link" rel="noopener" aria-describedby="new-window-0">
|
|
{{ partial "svg/github.svg" (dict "size" $icon_size) }}
|
|
{{- partial "new-window-icon.html" . -}}
|
|
</a>
|
|
{{ end }}
|
|
{{ with .Param "gitlab" }}
|
|
<a href="{{ . }}" target="_blank" class="link-transition gitlab link dib z-999 pt3 pt0-l mr1" title="Gitlab link" rel="noopener" aria-describedby="new-window-0">
|
|
{{ partial "svg/gitlab.svg" (dict "size" $icon_size) }}
|
|
{{- partial "new-window-icon.html" . -}}
|
|
</a>
|
|
{{ end }}
|
|
{{ with .Param "medium" }}
|
|
<a href="{{ . }}" target="_blank" class="link-transition medium link dib z-999 pt3 pt0-l mr1" title="Medium link" rel="noopener" aria-describedby="new-window-0">
|
|
{{ partial "svg/medium.svg" (dict "size" $icon_size) }}
|
|
{{- partial "new-window-icon.html" . -}}
|
|
</a>
|
|
{{ end }} |