archive/pelican-mg
1
0
Fork 0
mirror of https://github.com/c0de-archive/pelican-mg.git synced 2024-12-22 16:32:40 +00:00
Code Issues Projects Releases Wiki Activity

Adding accessibility skiplinks

Browse Source
This commit is contained in:
Lucas Cimon 2017-08-18 12:05:32 +02:00
parent 1219b7b8ef
commit 2487505c29
No known key found for this signature in database
GPG Key ID: 08DA831E717571EE
2 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
static/css/main.css
View File

@ -83,6 +83,7 @@ a {
.mg-header { .mg-header {
overflow: hidden; /* to hide the absolutely positioned mg-skiplinks child */
background-color: #39b39d; } background-color: #39b39d; }
.mg-header-content { .mg-header-content {
@ -94,8 +95,7 @@ a {
font-style: italic; font-style: italic;
font-size: 2.5em; font-size: 2.5em;
padding-left: 0; padding-left: 0;
color: white; color: white; }
text-decoration: none; }
.mg-brand:hover, .mg-brand:focus { .mg-brand:hover, .mg-brand:focus {
color: white; } color: white; }
@media (max-width: 767px) { @media (max-width: 767px) {
@ -130,8 +130,7 @@ a {
text-transform: uppercase; text-transform: uppercase;
cursor: pointer; } cursor: pointer; }
.mg-tag-filter:hover { .mg-tag-filter:hover {
border-color: #b2b2b2; border-color: #b2b2b2; }
text-decoration: none; }
.mg-tag-filter-include { .mg-tag-filter-include {
background-color: #33b5e5; } background-color: #33b5e5; }
.mg-tag-filter-exclude { .mg-tag-filter-exclude {
@ -174,7 +173,6 @@ a {
.mg-feed { .mg-feed {
color: #bf4d00; } color: #bf4d00; }
.mg-feed:hover { .mg-feed:hover {
text-decoration: none;
color: #FF6600; } color: #FF6600; }
.mg-tags { .mg-tags {
@ -204,8 +202,6 @@ a {
.mg-icon-link { .mg-icon-link {
padding: .3rem; } padding: .3rem; }
.mg-icon-link:hover {
text-decoration: none; }
.mg-icons-small { .mg-icons-small {
margin-bottom: 1em; } margin-bottom: 1em; }
@ -299,3 +295,19 @@ a {
max-height: 0; max-height: 0;
transition: max-height 1s ease-out; transition: max-height 1s ease-out;
} }
/* Accessibility */
a:focus, .uk-link:focus, .uk-navbar-brand:focus {
outline: 1px dotted !important; /* resetting an outline - damn uikit :( */
}
.mg-skiplinks {
list-style-type: none;
}
.mg-skiplinks a {
color: #39b39d;
}
.mg-skiplinks a:focus {
color: white;
}

6
templates/base.html
View File

@ -74,6 +74,10 @@
<div class="mg-tagline uk-navbar-content">{% if SITESUBTITLE %}{{ SITESUBTITLE }}{% endif %}</div> <div class="mg-tagline uk-navbar-content">{% if SITESUBTITLE %}{{ SITESUBTITLE }}{% endif %}</div>
</div> </div>
<ul class="mg-skiplinks">
<li><a href="#search-form">Search form</a></li>
</ul>
<div class="mg-header-extra uk-hidden-small"> <div class="mg-header-extra uk-hidden-small">
{% block header_extra %} {% block header_extra %}
{% endblock %} {% endblock %}
@ -136,7 +140,7 @@
{% if not DISABLE_SEARCH %} {% if not DISABLE_SEARCH %}
<div class="uk-panel uk-panel-box"> <div class="uk-panel uk-panel-box">
<form role="search" title="Search form" class="mg-search" action="{{ SITEURL }}/search.html" data-uk-search> <form id="search-form" role="search" title="Search form" class="mg-search" action="{{ SITEURL }}/search.html" data-uk-search>
<input type="submit" title="Submit search terms" class="mg-search-button" value="&#xf002;"> <input type="submit" title="Submit search terms" class="mg-search-button" value="&#xf002;">
<input type="search" title="words" placeholder="words" name="q" class="mg-search-query uk-search-field tipue_search" autocomplete="off"> <input type="search" title="words" placeholder="words" name="q" class="mg-search-query uk-search-field tipue_search" autocomplete="off">
</form> </form>