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 :-/

Changelog.md

@@ -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.

core/40-page-renderer.php

@@ -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";

themes/default/theme.css

@@ -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; }