tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Link accessibility improvements

Browse Source 
- Nav bar text is now 20% higher opacity, hover state also differentiated with weight
- In-body links are now underlined
- Lightened BG colour and darkened link colour — now achieves an APCA score of 84!
This commit is contained in:
Henry Wilkinson 2023-04-11 19:51:48 -04:00
parent 128aa89d33
commit d50fab67a9
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/develop/docs.md
View File

@ -18,7 +18,7 @@ The docs hosted on [docs.browsertrix.cloud](https://docs.browsertrix.cloud) are
We typically use the [Bootstrap icon set](https://icons.getbootstrap.com/) with our projects. This set is quite expansive, and we don't add the entire set into our docs folder as most icons go unused. If you wish to use an icon when writing documentation to refer to an icon present in part of the app, you may have to download the SVG file and add it to the repo. We typically use the [Bootstrap icon set](https://icons.getbootstrap.com/) with our projects. This set is quite expansive, and we don't add the entire set into our docs folder as most icons go unused. If you wish to use an icon when writing documentation to refer to an icon present in part of the app, you may have to download the SVG file and add it to the repo.
Icons are placed in the `docs/overrides/.icons/iconsetname/iconname.svg` directory, and can be added in markdown files as `:iconsetname-iconname:` accordingly. For more information, see the [Material for MKDocs page on Changing the logo and icons](https://squidfunk.github.io/mkdocs-material/setup/changing-the-logo-and-icons/#customization). Icons are placed in the `docs/overrides/.icons/iconsetname/icon-name.svg` directory, and can be added in markdown files as `:iconsetname-icon-name:` accordingly. For more information, see the [Material for MKDocs page on Changing the logo and icons](https://squidfunk.github.io/mkdocs-material/setup/changing-the-logo-and-icons/#customization).
## Docs style guide ## Docs style guide

34
docs/stylesheets/extra.css
View File

@ -36,13 +36,33 @@ code, pre, kbd {
--md-primary-fg-color: #008873; --md-primary-fg-color: #008873;
--md-primary-fg-color--light: #008873; --md-primary-fg-color--light: #008873;
--md-primary-fg-color--dark: #003c32; --md-primary-fg-color--dark: #003c32;
--md-default-bg-color--light: #f4f0e7; --md-default-bg-color--light: #f9f5eb;
--md-default-bg-color: #f4f0e7; --md-default-bg-color: #f9f5eb;
--md-code-bg-color: #fff; --md-code-bg-color: #fff;
--md-accent-fg-color: #01b297; --md-accent-fg-color: #01b297;
--md-typeset-a-color: #005447;
/* Typography Color Scheme */
/* --md-typeset-color: #003c32; */
--md-typeset-a-color: #008873;
} }
/* Custom menu item hover */
.md-tabs__link {
font-weight: 400;
opacity: .9;
transition: .4s cubic-bezier(.1,.7,.1,1),opacity .25s
}
.md-tabs__link:hover {
font-weight: 650;
}
/* Custom Typography Rules */
.md-typeset a {
text-decoration: underline;
}
.headerlink {
text-decoration: none!important;
}