governance-ecologies/govarch-website
1
0
Fork 0
mirror of https://github.com/metagov/govarch-website.git synced 2025-06-18 09:04:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

add skip navigation link

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

10
_layouts/default.html
View File

@ -19,6 +19,16 @@
</head>
<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 }}
{% include menu.html %}

2
_layouts/home.html
View File

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

2
_layouts/post.html
View File

@ -8,7 +8,7 @@ layout: default
{% include back-link.html %}
{% 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 != "" %}
<h1 class="post-title divided p-name" itemprop="name headline">

24
_sass/_base.scss
View File

@ -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;
}
}

2
_sass/_post-list.scss
View File

@ -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;