Improve accesibility
- add aria lable for social links - change colours slightly to improve contrast
This commit is contained in:
parent
b7e0b32909
commit
8f02a0e13d
5 changed files with 43 additions and 6 deletions
|
@ -8,7 +8,23 @@ body {
|
||||||
background-color: @body-bg-dark-theme;
|
background-color: @body-bg-dark-theme;
|
||||||
color: @text-color-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 {
|
hr {
|
||||||
background-color: @solid-dark-grey;
|
background-color: @solid-dark-grey;
|
||||||
color: @solid-dark-grey;
|
color: @solid-dark-grey;
|
||||||
|
@ -36,6 +52,11 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
|
header {
|
||||||
|
p {
|
||||||
|
color: @header-text-color-dark-theme;
|
||||||
|
}
|
||||||
|
}
|
||||||
kbd {
|
kbd {
|
||||||
background-color: #080808;
|
background-color: #080808;
|
||||||
color: @light-grey;
|
color: @light-grey;
|
||||||
|
@ -102,6 +123,9 @@ main {
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
border-top-color: @footer-border-color-dark-theme;
|
border-top-color: @footer-border-color-dark-theme;
|
||||||
|
p {
|
||||||
|
color: @footer-text-color-dark-theme;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
2
static/stylesheet/dark-theme.min.css
vendored
2
static/stylesheet/dark-theme.min.css
vendored
|
@ -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
2
static/stylesheet/style.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -1,10 +1,13 @@
|
||||||
// Flex colors
|
// Flex colors
|
||||||
@orange: #D9411E;
|
@orange: #d92b03;
|
||||||
@light-orange: #FF5A09;
|
@light-orange: #ce4c0c;
|
||||||
|
@bright-orange: #ff6e4c;
|
||||||
|
@white-orange: #f96;
|
||||||
@white: #ffffff;
|
@white: #ffffff;
|
||||||
@grey: #333333;
|
@grey: #333333;
|
||||||
@light-grey: #eeeeee;
|
@light-grey: #eeeeee;
|
||||||
@med-grey: #999999;
|
@light-med-grey: #a69f9f;
|
||||||
|
@med-grey: #757474;
|
||||||
@dark-grey: #242121;
|
@dark-grey: #242121;
|
||||||
@solid-dark-grey: #222222;
|
@solid-dark-grey: #222222;
|
||||||
@very-dark-grey: #1a1a1a;
|
@very-dark-grey: #1a1a1a;
|
||||||
|
@ -22,6 +25,8 @@
|
||||||
// Links
|
// Links
|
||||||
@link-color: @orange;
|
@link-color: @orange;
|
||||||
@link-hover-color: @light-orange;
|
@link-hover-color: @light-orange;
|
||||||
|
@link-color-dark-theme: @bright-orange;
|
||||||
|
@link-hover-color-dark-theme: @white-orange;
|
||||||
|
|
||||||
// Sidebar (aside)
|
// Sidebar (aside)
|
||||||
@sidebar-bg: @grey;
|
@sidebar-bg: @grey;
|
||||||
|
@ -34,6 +39,9 @@
|
||||||
@btn-bg: @orange;
|
@btn-bg: @orange;
|
||||||
@btn-text-color: @white;
|
@btn-text-color: @white;
|
||||||
@btn-hover-color: @light-orange;
|
@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 cloud
|
||||||
@tag-bg: @orange;
|
@tag-bg: @orange;
|
||||||
|
@ -42,11 +50,14 @@
|
||||||
|
|
||||||
// Header
|
// Header
|
||||||
@header-text-color: @med-grey;
|
@header-text-color: @med-grey;
|
||||||
|
@header-text-color-dark-theme: @light-med-grey;
|
||||||
|
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
@footer-text-color: @med-grey;
|
@footer-text-color: @med-grey;
|
||||||
@footer-border-color: @light-grey;
|
@footer-border-color: @light-grey;
|
||||||
@footer-border-color-dark-theme: @solid-dark-grey;
|
@footer-border-color-dark-theme: @solid-dark-grey;
|
||||||
|
@footer-text-color-dark-theme: @light-med-grey;
|
||||||
|
|
||||||
// Relative posts
|
// Relative posts
|
||||||
@rel-post-border-color: @light-grey;
|
@rel-post-border-color: @light-grey;
|
||||||
|
|
|
@ -76,8 +76,10 @@
|
||||||
<a class="sc-{{ name }}"
|
<a class="sc-{{ name }}"
|
||||||
{% if name in relme %}rel="me"{% endif %}
|
{% if name in relme %}rel="me"{% endif %}
|
||||||
href="{{ link }}"
|
href="{{ link }}"
|
||||||
target="_blank">
|
target="_blank"
|
||||||
|
aria-label="{{ name }}">
|
||||||
<i class="{% if name in solid %}fa-solid{% else %}fa-brands{% endif %} fa-{{ name }}"></i>
|
<i class="{% if name in solid %}fa-solid{% else %}fa-brands{% endif %} fa-{{ name }}"></i>
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
Loading…
Reference in a new issue