AXUL/ananke
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity
ananke/layouts/partials/social-follow.html

57 lines
3.1 KiB
HTML
Raw Normal View History

wip clean up and annotations
2017-04-14 18:37:12 +02:00
<!-- TODO: Add follow intents where available TODO: Revisit color and hover color -->
use a variable for icon size
2017-04-15 15:08:59 +02:00
{{ $icon_size := "32px" }}
Add inheritance for social links. (#107)
2018-05-17 19:03:21 +02:00
{{ with .Param "facebook" }}
Improve social link accessibility (#147) Keep in spirit with https://medium.com/@svinkle/why-let-someone-know-when-a-link-opens-a-new-window-8699d20ed3b1 but address issue #145
2018-12-26 17:16:03 +01:00
<a href="{{ . }}" target="_blank" class="link-transition facebook link dib z-999 pt3 pt0-l mr1" title="Facebook link" rel="noopener" aria-label="follow on Facebook——Opens in a new window">
Open social media links in new tab and add Medium icon (#143) * 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
2018-11-28 00:44:27 +01:00
{{ partial "svg/facebook.svg" (dict "size" $icon_size) }}
{{- partial "new-window-icon.html" . -}}
</a>
wip clean up and annotations
2017-04-14 18:37:12 +02:00
{{ end }}
Add inheritance for social links. (#107)
2018-05-17 19:03:21 +02:00
{{ with .Param "twitter" }}
Improve social link accessibility (#147) Keep in spirit with https://medium.com/@svinkle/why-let-someone-know-when-a-link-opens-a-new-window-8699d20ed3b1 but address issue #145
2018-12-26 17:16:03 +01:00
<a href="{{ . }}" target="_blank" class="link-transition twitter link dib z-999 pt3 pt0-l mr1" title="Twitter link" rel="noopener" aria-label="follow on Twitter——Opens in a new window">
Open social media links in new tab and add Medium icon (#143) * 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
2018-11-28 00:44:27 +01:00
{{ partial "svg/twitter.svg" (dict "size" $icon_size) }}
{{- partial "new-window-icon.html" . -}}
</a>
wip clean up and annotations
2017-04-14 18:37:12 +02:00
{{ end }}
Add inheritance for social links. (#107)
2018-05-17 19:03:21 +02:00
{{ with .Param "instagram" }}
Improve social link accessibility (#147) Keep in spirit with https://medium.com/@svinkle/why-let-someone-know-when-a-link-opens-a-new-window-8699d20ed3b1 but address issue #145
2018-12-26 17:16:03 +01:00
<a href="{{ . }}" target="_blank" class="link-transition instagram link dib z-999 pt3 pt0-l mr1" title="Instagram link" rel="noopener" aria-label="follow on Instagram——Opens in a new window">
Open social media links in new tab and add Medium icon (#143) * 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
2018-11-28 00:44:27 +01:00
{{ partial "svg/instagram.svg" (dict "size" $icon_size) }}
{{- partial "new-window-icon.html" . -}}
</a>
wip clean up and annotations
2017-04-14 18:37:12 +02:00
{{ end }}
Add inheritance for social links. (#107)
2018-05-17 19:03:21 +02:00
{{ with .Param "youtube" }}
Improve social link accessibility (#147) Keep in spirit with https://medium.com/@svinkle/why-let-someone-know-when-a-link-opens-a-new-window-8699d20ed3b1 but address issue #145
2018-12-26 17:16:03 +01:00
<a href="{{ . }}" target="_blank" class="link-transition youtube link dib z-999 pt3 pt0-l mr1" title="Youtube link" rel="noopener" aria-label="follow on Youtube——Opens in a new window">
Open social media links in new tab and add Medium icon (#143) * 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
2018-11-28 00:44:27 +01:00
{{ partial "svg/youtube.svg" (dict "size" $icon_size) }}
{{- partial "new-window-icon.html" . -}}
</a>
wip clean up and annotations
2017-04-14 18:37:12 +02:00
{{ end }}
Add inheritance for social links. (#107)
2018-05-17 19:03:21 +02:00
{{ with .Param "linkedin" }}
Improve social link accessibility (#147) Keep in spirit with https://medium.com/@svinkle/why-let-someone-know-when-a-link-opens-a-new-window-8699d20ed3b1 but address issue #145
2018-12-26 17:16:03 +01:00
<a href="{{ . }}" target="_blank" class="link-transition linkedin link dib z-999 pt3 pt0-l mr1" title="LinkedIn link" rel="noopener" aria-label="follow on LinkedIn——Opens in a new window">
Open social media links in new tab and add Medium icon (#143) * 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
2018-11-28 00:44:27 +01:00
{{ partial "svg/linkedin.svg" (dict "size" $icon_size) }}
{{- partial "new-window-icon.html" . -}}
</a>
Social icon updates (#51) * add linkedin * update github svg to fix spacing * add colors from brandcolors.net
2017-09-26 17:51:01 +02:00
{{ end }}
Add inheritance for social links. (#107)
2018-05-17 19:03:21 +02:00
{{ with .Param "github" }}
Improve social link accessibility (#147) Keep in spirit with https://medium.com/@svinkle/why-let-someone-know-when-a-link-opens-a-new-window-8699d20ed3b1 but address issue #145
2018-12-26 17:16:03 +01:00
<a href="{{ . }}" target="_blank" class="link-transition github link dib z-999 pt3 pt0-l mr1" title="Github link" rel="noopener" aria-label="follow on Github——Opens in a new window">
Open social media links in new tab and add Medium icon (#143) * 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
2018-11-28 00:44:27 +01:00
{{ partial "svg/github.svg" (dict "size" $icon_size) }}
{{- partial "new-window-icon.html" . -}}
</a>
Add GitHub social icon (#48) * add github social link * add github css * fix css error breaking rollover
2017-09-20 21:12:25 +02:00
{{ end }}
Add Gitlab to social icons (#131) Gitlab is a popular Git repository manager using an opensource license. This commit adds the Gitlab social icon.
2018-09-13 16:11:36 +02:00
{{ with .Param "gitlab" }}
Improve social link accessibility (#147) Keep in spirit with https://medium.com/@svinkle/why-let-someone-know-when-a-link-opens-a-new-window-8699d20ed3b1 but address issue #145
2018-12-26 17:16:03 +01:00
<a href="{{ . }}" target="_blank" class="link-transition gitlab link dib z-999 pt3 pt0-l mr1" title="Gitlab link" rel="noopener" aria-label="follow on Gitlab——Opens in a new window">
Open social media links in new tab and add Medium icon (#143) * 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
2018-11-28 00:44:27 +01:00
{{ partial "svg/gitlab.svg" (dict "size" $icon_size) }}
{{- partial "new-window-icon.html" . -}}
</a>
Add Gitlab to social icons (#131) Gitlab is a popular Git repository manager using an opensource license. This commit adds the Gitlab social icon.
2018-09-13 16:11:36 +02:00
{{ end }}
Open social media links in new tab and add Medium icon (#143) * 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
2018-11-28 00:44:27 +01:00
{{ with .Param "medium" }}
Improve social link accessibility (#147) Keep in spirit with https://medium.com/@svinkle/why-let-someone-know-when-a-link-opens-a-new-window-8699d20ed3b1 but address issue #145
2018-12-26 17:16:03 +01:00
<a href="{{ . }}" target="_blank" class="link-transition medium link dib z-999 pt3 pt0-l mr1" title="Medium link" rel="noopener" aria-label="follow on Medium——Opens in a new window">
Open social media links in new tab and add Medium icon (#143) * 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
2018-11-28 00:44:27 +01:00
{{ partial "svg/medium.svg" (dict "size" $icon_size) }}
{{- partial "new-window-icon.html" . -}}
</a>
Add a link to "mastodon" (#159) * Create fr.toml French translation * Social link to "mastodon" added
2019-03-04 23:25:39 +01:00
{{ end }}
{{ with .Param "mastodon" }}
<a href="{{ . }}" target="_blank" class="link-transition mastodon link dib z-999 pt3 pt0-l mr1" title="Mastodon link" rel="noopener" aria-label="follow on Mastodon——Opens in a new window">
{{ partial "svg/mastodon.svg" (dict "size" $icon_size) }}
{{- partial "new-window-icon.html" . -}}
</a>
{{ end }}
Reference in a new issue Copy permalink