schtobia/flex
1
0
Fork 0
Code Issues Pull requests Activity

Improve accesibility

Browse source 
- add aria lable for social links
- change colours slightly to improve contrast
This commit is contained in:
Elias Kirchgässner 2023-07-21 13:15:59 +02:00
parent b7e0b32909
commit 8f02a0e13d
5 changed files with 43 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
static/stylesheet/dark-theme.less
View file

@ -8,7 +8,23 @@ body {
background-color: @body-bg-dark-theme;
color: @text-color-dark-theme;
}
a {
color: @link-color-dark-theme;
text-decoration: none;
}
a:hover {
color: @link-hover-color-dark-theme;
}
a.btn {
background-color: @btn-bg-dark-theme;
color: @btn-text-color-dark-theme;
}
a.btn:hover {
background-color: @btn-hover-color-dark-theme;
}
hr {
background-color: @solid-dark-grey;
color: @solid-dark-grey;
@ -36,6 +52,11 @@ main {
}
article {
header {
p {
color: @header-text-color-dark-theme;
}
}
kbd {
background-color: #080808;
color: @light-grey;
@ -102,6 +123,9 @@ main {
footer {
border-top-color: @footer-border-color-dark-theme;
p {
color: @footer-text-color-dark-theme;
}
}
}

2
static/stylesheet/dark-theme.min.css vendored
View file

@ -1 +1 @@
body{background-color:#333;color:#eee}hr{color:#222}aside,hr{background-color:#222}aside{color:#fff}aside form.navbar-search input#tipue_search_input{background-color:#1a1a1a;color:#eee}main nav{border-bottom-color:#222}main .translations a,main nav a{border-color:#222}main article kbd{background-color:#080808;color:#eee}main article blockquote,main article pre{border-left:8px solid #ffffff33}main article :not(pre)>code{background-color:#080808;border-color:#000}main article div#tipue_search_content .tipue_search_result span.tipue_search_content_bold{color:#fff}main article section#isso-thread .auth-section p.input-wrapper input,main article section#isso-thread .notification-section input,main article section#isso-thread div.textarea{background:#1a1a1a;color:#eee}main article section#isso-thread>h4{color:#eee}main article section#isso-thread .isso-postbox>.form-wrapper .preview{background:repeating-linear-gradient(-45deg,#222,#222 10px,#1a1a1a 0,#1a1a1a 20px)}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .author{color:#eee}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .note,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .spacer,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.parent,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.permalink{color:#999}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .note:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .spacer:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.parent:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.permalink:hover{color:#eee}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-footer a:hover{text-shadow:#242121 0 0 1px!important}main footer{border-top-color:#222}div.related-posts{border-color:#222}div.admonition{color:#eee;background-color:#404040}div.admonition.attention,div.admonition.caution{color:#fbda7a;background-color:#4a3900}div.admonition.danger,div.admonition.error{color:#ebadb3;background-color:#28070a}div.admonition.hint{color:#7abaff;background-color:#001933}div.admonition.important,div.admonition.note{color:#a8eab7;background-color:#122b18}div.admonition.tip{color:#7abaff;background-color:#001933}div.admonition.warning{color:#fbda7a;background-color:#4a3900}div.figure,figure{color:#bfbfbf}div.figure figcaption,figure figcaption{color:#eee}
body{background-color:#333;color:#eee}a{color:#ff6e4c;text-decoration:none}a:hover{color:#f96}a.btn{background-color:#ff6e4c;color:#222}a.btn:hover{background-color:#f96}hr{color:#222}aside,hr{background-color:#222}aside{color:#fff}aside form.navbar-search input#tipue_search_input{background-color:#1a1a1a;color:#eee}main nav{border-bottom-color:#222}main .translations a,main nav a{border-color:#222}main article header p{color:#a69f9f}main article kbd{background-color:#080808;color:#eee}main article blockquote,main article pre{border-left:8px solid #ffffff33}main article :not(pre)>code{background-color:#080808;border-color:#000}main article div#tipue_search_content .tipue_search_result span.tipue_search_content_bold{color:#fff}main article section#isso-thread .auth-section p.input-wrapper input,main article section#isso-thread .notification-section input,main article section#isso-thread div.textarea{background:#1a1a1a;color:#eee}main article section#isso-thread>h4{color:#eee}main article section#isso-thread .isso-postbox>.form-wrapper .preview{background:repeating-linear-gradient(-45deg,#222,#222 10px,#1a1a1a 0,#1a1a1a 20px)}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .author{color:#eee}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .note,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .spacer,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.parent,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.permalink{color:#757474}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .note:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .spacer:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.parent:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.permalink:hover{color:#eee}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-footer a:hover{text-shadow:#242121 0 0 1px!important}main footer{border-top-color:#222}main footer p{color:#a69f9f}div.related-posts{border-color:#222}div.admonition{color:#eee;background-color:#404040}div.admonition.attention,div.admonition.caution{color:#fbda7a;background-color:#4a3900}div.admonition.danger,div.admonition.error{color:#ebadb3;background-color:#28070a}div.admonition.hint{color:#7abaff;background-color:#001933}div.admonition.important,div.admonition.note{color:#a8eab7;background-color:#122b18}div.admonition.tip{color:#7abaff;background-color:#001933}div.admonition.warning{color:#fbda7a;background-color:#4a3900}div.figure,figure{color:#bfbfbf}div.figure figcaption,figure figcaption{color:#eee}

2
static/stylesheet/style.min.css vendored
View file

File diff suppressed because one or more lines are too long

17
static/stylesheet/variables.less
View file

@ -1,10 +1,13 @@
// Flex colors
@orange: #D9411E;
@light-orange: #FF5A09;
@orange: #d92b03;
@light-orange: #ce4c0c;
@bright-orange: #ff6e4c;
@white-orange: #f96;
@white: #ffffff;
@grey: #333333;
@light-grey: #eeeeee;
@med-grey: #999999;
@light-med-grey: #a69f9f;
@med-grey: #757474;
@dark-grey: #242121;
@solid-dark-grey: #222222;
@very-dark-grey: #1a1a1a;
@ -22,6 +25,8 @@
// Links
@link-color: @orange;
@link-hover-color: @light-orange;
@link-color-dark-theme: @bright-orange;
@link-hover-color-dark-theme: @white-orange;
// Sidebar (aside)
@sidebar-bg: @grey;
@ -34,6 +39,9 @@
@btn-bg: @orange;
@btn-text-color: @white;
@btn-hover-color: @light-orange;
@btn-bg-dark-theme: @bright-orange;
@btn-text-color-dark-theme: @solid-dark-grey;
@btn-hover-color-dark-theme: @white-orange;
// Tag cloud
@tag-bg: @orange;
@ -42,11 +50,14 @@
// Header
@header-text-color: @med-grey;
@header-text-color-dark-theme: @light-med-grey;
// Footer
@footer-text-color: @med-grey;
@footer-border-color: @light-grey;
@footer-border-color-dark-theme: @solid-dark-grey;
@footer-text-color-dark-theme: @light-med-grey;
// Relative posts
@rel-post-border-color: @light-grey;

4
templates/partial/sidebar.html
View file

@ -76,8 +76,10 @@
<a class="sc-{{ name }}"
{% if name in relme %}rel="me"{% endif %}
href="{{ link }}"
target="_blank">
target="_blank"
aria-label="{{ name }}">
<i class="{% if name in solid %}fa-solid{% else %}fa-brands{% endif %} fa-{{ name }}"></i>
</a>
</li>
{% endfor %}