dallasgroot/Documentation
1
0
Fork 0
mirror of https://codeberg.org/Codeberg/Documentation.git synced 2026-06-16 05:13:54 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

feature: Add "Skip to main content" anchor (#421)

Browse source 
Add a skip navigation link as the first tabbable element;
announced by screen readers and initially hidden visually,
and visually shown only on focus

The `license` fragment will also be moved further down the order,
since it previously conflicted with the keyboard navigation

I am not too familiar with the various design colors yet,
so feel free to fix them for me,
or point me to some further resources regarding the design;
I merely addressed the contrast on the dark mode,
and made the best educated guess about light mode I could :D

Reviewed-on: https://codeberg.org/Codeberg/Documentation/pulls/421
Reviewed-by: Otto <otto@codeberg.org>
Reviewed-by: Patrick Schratz <pat-s@noreply.codeberg.org>
Co-authored-by: banaanihillo <banaanihillo@noreply.codeberg.org>
Co-committed-by: banaanihillo <banaanihillo@noreply.codeberg.org>
This commit is contained in:
banaanihillo 2024-06-24 20:41:05 +00:00 committed by Patrick Schratz
parent ca5ec77f93
commit 1d7e5f1415
1 changed files with 18 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
assets/css/codeberg-docs.css
View file

@ -130,7 +130,6 @@ code:not(pre > code) {
.admonition-icon::before {
content: '';
background-color: var(--admonition-border-color--info);
mask-position: center;
@ -267,3 +266,21 @@ code:not(pre > code) {
#toc-side a {
padding-left: 10px;
}
a.show-on-focus {
position: absolute;
left: -9999px;
top: -9999px;
font-size: 1.5em;
background-color: var(--lm-base-body-bg-color);
color: var(--lm-base-text-color);
z-index: 41;
}
.dark-mode a.show-on-focus {
background-color: var(--dm-base-body-bg-color);
color: var(--dm-base-text-color);
}
a.show-on-focus:focus {
left: 0;
top: 0;
}