add skip navigation link

This commit is contained in:
Pat Dryburgh
2018-10-24 18:04:06 -07:00
parent 16c358ac24
commit dd7275c4c0
5 changed files with 37 additions and 3 deletions

View File

@ -19,6 +19,16 @@
</head> </head>
<body> <body>
{% if page.layout == 'home' %}
<a href="#main" class="skip-navigation">
Skip to list of posts
</a>
{% else %}
<a href="#main" class="skip-navigation">
Skip to content
</a>
{% endif %}
{{ content }} {{ content }}
{% include menu.html %} {% include menu.html %}

View File

@ -22,7 +22,7 @@ layout: default
</header> </header>
{% endif %} {% endif %}
<main class="home" aria-label="Content"> <main class="home" aria-label="Content" id="main">
<h1 class="content-title divided"> <h1 class="content-title divided">
{% if site.paginate and site.paginate_path and paginator.page > 1 %} {% if site.paginate and site.paginate_path and paginator.page > 1 %}

View File

@ -8,7 +8,7 @@ layout: default
{% include back-link.html %} {% include back-link.html %}
{% endif %} {% endif %}
<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting"> <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting" id="main">
{% if page.title != "" %} {% if page.title != "" %}
<h1 class="post-title divided p-name" itemprop="name headline"> <h1 class="post-title divided p-name" itemprop="name headline">

View File

@ -55,6 +55,10 @@ a {
color: $text-color; color: $text-color;
} }
a:focus {
outline: 1px dashed $text-color;
}
blockquote { blockquote {
margin: 2em auto; margin: 2em auto;
opacity: .8; opacity: .8;
@ -134,4 +138,24 @@ figcaption {
margin: 0 auto 2em; margin: 0 auto 2em;
padding: 0 2em; padding: 0 2em;
text-align: center; 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;
}
} }

View File

@ -12,7 +12,7 @@
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
text-decoration: none; text-decoration: none;
padding: .25em 0; padding: .25em;
@media (min-width: $on-tablet) { @media (min-width: $on-tablet) {
display: flex; display: flex;
flex-direction: row; flex-direction: row;