mirror of
https://github.com/sbrl/Pepperminty-Wiki.git
synced 2024-12-22 13:45:02 +00:00
More accessibility improvements, and noodle away at the darak theme.
Looks like we're going to have to come up with our own button style, which is going to be a bit of a pain tbh :-/
This commit is contained in:
parent
5e5f47fdda
commit
bcc8f0be27
3 changed files with 13 additions and 5 deletions
|
@ -13,9 +13,10 @@ This file holds the changelog for Pepperminty Wiki. This is the master list of t
|
|||
- Fill out the statistics help text
|
||||
- Added table of contents to help page
|
||||
- Squashed the large blank space that sometimes appears at the bottom of the page editor page
|
||||
- Accessibility improvements - thanks, Firefox developer tools :D
|
||||
- Accessibility improvements - thanks, Firefox developer tools :D (if you're a screen reader / accessibility tool user and have feedback or any better ideas, please [get in touch](https://github.com/sbrl/Pepperminty-Wiki/issues/new))
|
||||
- Marked the user avatar on the top navigation bar as hidden for screen readers
|
||||
- Added aria label to user preferences button
|
||||
- Hide site logo from screen readers
|
||||
|
||||
### Changed
|
||||
- Made `build.sh` build script more robust, especially when generating the documentation.
|
||||
|
|
|
@ -153,7 +153,7 @@ class page_renderer
|
|||
|
||||
if(strlen($settings->logo_url) > 0) {
|
||||
// A logo url has been specified
|
||||
$logo_html = "<img class='logo" . (isset($_GET["printable"]) ? " small" : "") . "' src='$settings->logo_url' />";
|
||||
$logo_html = "<img aria-hidden='true' class='logo" . (isset($_GET["printable"]) ? " small" : "") . "' src='$settings->logo_url' />";
|
||||
switch($settings->logo_position) {
|
||||
case "left":
|
||||
$logo_html = "$logo_html $settings->sitename";
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
|
||||
--text-dark: #111111;
|
||||
--text-light: hsl(0, 0%, 96%);
|
||||
--text-bright: hsl(274, 40%, 41%);
|
||||
--text-placeholder-light: hsla(0, 0%, 100%, 0.9);
|
||||
--text-os-button: #514C4C;
|
||||
|
||||
|
@ -28,10 +29,12 @@
|
|||
--checkerboard-bg: #eee;
|
||||
--checkerboard-overlay: rgba(200, 200, 200, 0.2);
|
||||
|
||||
--accent-a0: 253, 79%, 88%; /*hsl(253, 79%, 88%)*/
|
||||
--accent-a0: hsl(253, 79%, 88%);
|
||||
--accent-a0t: hsla(253, 79%, 88%, 0.3);
|
||||
--accent-a1: #9e7eb4;
|
||||
--accent-a2: #8a62a7;
|
||||
--accent-a3: #442772;
|
||||
--accent-a4: hsl(253, 79%, 88%);
|
||||
|
||||
--accent-b1: #ffa74d;
|
||||
--accent-b2: #fb701a;
|
||||
|
@ -58,6 +61,7 @@
|
|||
--bg-comments-1: hsl(31, 64%, 85%);
|
||||
|
||||
--text-dark: hsl(277, 38%, 89%);
|
||||
--text-bright: hsl(274, 75%, 81%);
|
||||
/* --text-light: hsl(0, 0%, 6%); */
|
||||
|
||||
--text-soft: hsla(0, 0%, 92%, 0.4);
|
||||
|
@ -65,9 +69,11 @@
|
|||
|
||||
--shadow: rgba(20, 20, 20, 0.5);
|
||||
|
||||
--accent-a0: hsl(253, 79%, 88%);
|
||||
--accent-a1: #9e7eb4;
|
||||
--accent-a2: #442772;
|
||||
--accent-a3: hsl(274, 40%, 41%);
|
||||
--accent-a4: hsl(253, 49%, 20%);
|
||||
|
||||
--accent-c1: hsl(5, 100%, 76%);
|
||||
--accent-c2: hsl(4, 95%, 68%); /*#8b1a1a*/
|
||||
|
@ -109,9 +115,10 @@ input[type=checkbox]:checked ~ .nav-more-menu { right: -0.2rem; box-shadow: 0.4r
|
|||
.inflexible { flex: none; }
|
||||
.off-screen { position: absolute; top: -1000px; left: -1000px;}
|
||||
|
||||
input[type=search] { width: 14rem; padding: 0.3rem 0.4rem; font-size: 1rem; color: var(--text-light); background: hsla(var(--accent-a0), 0.4); border: 0; border-radius: 0.3rem; }
|
||||
input[type=search] { width: 14rem; padding: 0.3rem 0.4rem; font-size: 1rem; color: var(--text-light); background: var(--accent-a0t); border: 0; border-radius: 0.3rem; }
|
||||
input[type=search]::-webkit-input-placeholder { color: var(--text-placeholder-light); }
|
||||
input[type=search]::-moz-placeholder { color: var(--text-placeholder-light); }
|
||||
input:focus, textarea:focus { outline: 0.15em solid var(--accent-a0); }
|
||||
input[type=button], input[type=submit] { cursor: pointer; }
|
||||
|
||||
.sidebar + .main-container nav.bottom { position: relative; }
|
||||
|
@ -172,7 +179,7 @@ textarea[name=content] { resize: none; }
|
|||
.fit-text-mirror { position: absolute; top: 0; left: -10000vw; word-wrap: break-word; white-space: pre-wrap; }
|
||||
main label:not(.link-display-label) { display: inline-block; min-width: 16rem; }
|
||||
input[type=text]:not(.link-display), input[type=password], input[type=url], input[type=email], input[type=number], textarea { margin: 0.5rem 0; }
|
||||
input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea, textarea[name=content] + pre, #search-box { padding: 0.5rem 0.8rem; background: hsl(var(--accent-a0)); border: 0; border-radius: 0.3rem; font-size: 1rem; color: var(--accent-a3); }
|
||||
input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea, textarea[name=content] + pre, #search-box { padding: 0.5rem 0.8rem; background: var(--accent-a4); border: 0; border-radius: 0.3rem; font-size: 1rem; color: var(--text-bright); }
|
||||
textarea { min-height: 10em; line-height: 1.3em; font-size: 1.25rem; }
|
||||
textarea, textarea[name=content] + pre, textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); box-sizing: border-box; }
|
||||
textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight: bolder; }
|
||||
|
|
Loading…
Reference in a new issue