From dd7275c4c024d103fe57d21183589247042e3995 Mon Sep 17 00:00:00 2001 From: Pat Dryburgh Date: Wed, 24 Oct 2018 18:04:06 -0700 Subject: [PATCH] add skip navigation link --- _layouts/default.html | 10 ++++++++++ _layouts/home.html | 2 +- _layouts/post.html | 2 +- _sass/_base.scss | 24 ++++++++++++++++++++++++ _sass/_post-list.scss | 2 +- 5 files changed, 37 insertions(+), 3 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 2dd36c9..e2ac37b 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -19,6 +19,16 @@ + {% if page.layout == 'home' %} + + Skip to list of posts + + {% else %} + + Skip to content + + {% endif %} + {{ content }} {% include menu.html %} diff --git a/_layouts/home.html b/_layouts/home.html index c79ab43..88cc9ed 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -22,7 +22,7 @@ layout: default {% endif %} -
+

{% if site.paginate and site.paginate_path and paginator.page > 1 %} diff --git a/_layouts/post.html b/_layouts/post.html index cf12569..25db5f1 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -8,7 +8,7 @@ layout: default {% include back-link.html %} {% endif %} -
+
{% if page.title != "" %}

diff --git a/_sass/_base.scss b/_sass/_base.scss index 7622ac6..bcf51cc 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -55,6 +55,10 @@ a { color: $text-color; } +a:focus { + outline: 1px dashed $text-color; +} + blockquote { margin: 2em auto; opacity: .8; @@ -134,4 +138,24 @@ figcaption { margin: 0 auto 2em; padding: 0 2em; text-align: center; +} + +.skip-navigation { + background: $brand-color; + border: 1px dashed transparent; + display: block; + font-size: .875em; + font-weight: 700; + margin-top: -2.625rem; + padding: .5rem; + text-align: center; + text-decoration: none; + text-transform: uppercase; + transition: all .125s ease-in-out; + &:hover, + &:focus { + background: darken($brand-color, 2.5%); + border-color: $text-color; + margin-top: 0; + } } \ No newline at end of file diff --git a/_sass/_post-list.scss b/_sass/_post-list.scss index fbf8ba8..69a048b 100644 --- a/_sass/_post-list.scss +++ b/_sass/_post-list.scss @@ -12,7 +12,7 @@ display: flex; flex-direction: column-reverse; text-decoration: none; - padding: .25em 0; + padding: .25em; @media (min-width: $on-tablet) { display: flex; flex-direction: row;