[UI] Accessibility improvements all around

This commit is contained in:
rainydaysavings 2020-08-06 00:26:07 +01:00 committed by Hugo Sales
parent e1ff2a0ef1
commit e4db0eb9b9
10 changed files with 48 additions and 11 deletions

View File

@ -41,13 +41,20 @@ a:link {
outline: 0;
color: #F6F6F6;
}
a:visited {
outline: 0;
color: #F6F6F6;
margin: 0;
padding: 0;
}
a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
a:focus {
color: #F6F6F6;
transition: all 0.8s ease;
}
b {
font-family: var(--head-font);

View File

@ -43,13 +43,16 @@ a:link {
margin: 0;
padding: 0;
}
a:visited {
outline: 0;
color: #F6F6F6;
margin: 0;
padding: 0;
}
a:focus {
color: #F6F6F6;
transition: all 0.8s ease;
}
b {
font-family: var(--head-font);

View File

@ -43,13 +43,16 @@ a:link {
margin: 0;
padding: 0;
}
a:visited {
outline: 0;
color: #F6F6F6;
margin: 0;
padding: 0;
}
a:focus {
color: #F6F6F6;
transition: all 0.8s ease;
}
b {
font-family: var(--head-font);

View File

@ -45,11 +45,14 @@
.faq-nav a {
color: #91B9D0;
}
.faq-nav a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
.faq-nav a:focus {
color: #F6F6F6;
transition: all 0.8s ease;
}
.markd {
order: 2;

View File

@ -48,11 +48,14 @@
.faq-nav a {
color: #91B9D0;
}
.faq-nav a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
.faq-nav a:focus {
color: #F6F6F6;
transition: all 0.8s ease;
}
.markd {
order: 2;

View File

@ -48,11 +48,14 @@
.faq-nav a {
color: #91B9D0;
}
.faq-nav a:hover {
color: #F6F6F6;
transition: all 0.8s ease;
}
.faq-nav a:focus {
color: #F6F6F6;
transition: all 0.8s ease;
}
.markd {
order: 2;

View File

@ -50,6 +50,10 @@
color: #F6F6F6;
transition: all 0.8s ease;
}
.navbar a:focus {
color: #F6F6F6;
transition: all 0.8s ease;
}
.icon-menu label {
display: none;

View File

@ -51,6 +51,10 @@
color: #F6F6F6;
transition: all 0.8s ease;
}
.navbar a:focus {
color: #F6F6F6;
transition: all 0.8s ease;
}
.icon-menu label {
display: block;
@ -64,11 +68,14 @@
opacity: 0;
}
.left-panel input[type=checkbox] {
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(3);
-ms-transform: scale(3);
-webkit-transform: scale(3);
padding: 10px;
}
input[type="checkbox"]:focus + label {
border:2px solid red;
}
#toggle:checked~.navbar {
display: flex;

View File

@ -51,6 +51,10 @@
color: #F6F6F6;
transition: all 0.8s ease;
}
.navbar a:focus {
color: #F6F6F6;
transition: all 0.8s ease;
}
.icon-menu label {
display: block;

View File

@ -10,9 +10,9 @@
{% block left %}
{% if app.user %}
<div id='left-panel'>
<input type="checkbox" id="toggle">
<input type="checkbox" id="toggle" autofocus>
<div class="icon-menu">
<label for="toggle" id='menu'></label>
<label for="toggle" id='menu' tabindex="0"></label>
</div>
<div class='navbar'>
<div class="left-nav">