From b133ed4d471009665162c1d4f87681b98b97b0c9 Mon Sep 17 00:00:00 2001
From: slowe <299787+slowe@users.noreply.github.com>
Date: Wed, 30 Oct 2024 16:58:39 +0000
Subject: [PATCH] Fix colours and some accessibility issues

---
 2024-DFES/index.html          |  8 ++++----
 2024-DFES/resources/config.js |  2 +-
 2024-DFES/resources/style.css | 20 ++++++++++----------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/2024-DFES/index.html b/2024-DFES/index.html
index 43c2e5f..d4adb5d 100644
--- a/2024-DFES/index.html
+++ b/2024-DFES/index.html
@@ -37,9 +37,9 @@ <h2>WARNING</h2>
 		<div class="b1-bg glory">
 			<div class="glory-opacity">
 				<div class="holder">
-					<a href="https://open-innovations.org/"><img alt="Open Innovations" src="https://open-innovations.org/resources/images/logos/oi-square-white.svg" title="Open Innovations" style="height:91px;width:91px;padding:0.25em;" ></a>
-					<a href="https://www.northernpowergrid.com/"><img alt="Northern Powergrid" src="https://open-innovations.org/dashboard/data/img/northernpowergrid.svg" title="Northern Powergrid"></a>
-					<a href="http://www.element-energy.co.uk/"><img alt="Element Energy" src="https://open-innovations.org/dashboard/data/img/elementenergy.svg" title="Element Energy"></a>
+					<a href="https://open-innovations.org/"><img alt="Open Innovations" src="https://open-innovations.org/resources/images/logos/oi-square-white.svg" style="height:91px;width:91px;padding:0.25em;" ></a>
+					<a href="https://www.northernpowergrid.com/"><img alt="Northern Powergrid" src="https://open-innovations.org/dashboard/data/img/northernpowergrid.svg"></a>
+					<a href="http://www.element-energy.co.uk/"><img alt="Element Energy" src="https://open-innovations.org/dashboard/data/img/elementenergy.svg"></a>
 				</div>
 			</div>
 		</div>
@@ -112,7 +112,7 @@ <h2>Select year (<span class="year"></span>):</h2>
 							<input type="checkbox" id="scale-mode" name="scale-mode" title="Select for an absolute scale" />
 							<span class="switch"></span>
 						</div>
-						<label class="toggle-label2" for="scale-mode" title="To compare the values of different areas across the the full range of years">No</label>
+						<span class="toggle-label2" title="To compare the values of different areas across the the full range of years">No</span>
 					</div>
 						
 					<div class="info-bubble warning">
diff --git a/2024-DFES/resources/config.js b/2024-DFES/resources/config.js
index 0ca2182..6694992 100644
--- a/2024-DFES/resources/config.js
+++ b/2024-DFES/resources/config.js
@@ -280,7 +280,7 @@ OI.ready(function(){
 
 						div = document.createElement('div');
 						div.classList.add('leaflet-control','leaflet-bar');
-						div.innerHTML = '<div class="placesearch leaflet-button"><button class="submit" href="#" title="Search" role="button" aria-label="Search"></button><form class="placeform layersearch pop-left" action="search" method="GET" autocomplete="off"><input class="place" id="search" name="place" value="" placeholder="Search for a named area" type="text" /><div class="searchresults" id="searchresults"></div></div></form></div>';
+						div.innerHTML = '<div class="placesearch leaflet-button"><button class="submit" href="#" title="Search" role="button" aria-label="Search"></button><form class="placeform layersearch pop-left" action="search" method="GET" autocomplete="off"><input class="place" id="search" name="place" value="" placeholder="Search for a named area" aria-label="Search for a named area" type="text" /><div class="searchresults" id="searchresults"></div></div></form></div>';
 						el.appendChild(div);
 						
 						if("geolocation" in navigator){
diff --git a/2024-DFES/resources/style.css b/2024-DFES/resources/style.css
index aeb82ae..0228d5e 100644
--- a/2024-DFES/resources/style.css
+++ b/2024-DFES/resources/style.css
@@ -20,16 +20,14 @@
 
 
 /* Main site styling */
-.counterfactual { background-color: #827B7A!important; color: white!important; }
-.counterfactual-text { color: #827B7A!important; }
-.hydrogen-evolution { background-color: #5BCBF5!important; color: black!important; }
-.hydrogen-evolution-text { color: #5BCBF5!important; }
-.electric-engagement { background-color: #FFBF22!important; color: black!important; }
-.electric-engagement-text { color: #FFBF22!important; }
-.holistic-transition { background-color: #C2CD23!important; color: black!important; }
-.holistic-transition-text { color: #C2CD23!important; }
-.early-net-zero { background-color: #00AB84!important; color: white!important; }
-.early-net-zero-text { color: #00AB84!important; }
+.counterfactual { background-color: #454546!important; color: white!important; }
+.counterfactual-text { color: #454546!important; }
+.hydrogen-evolution { background-color: #0079C1!important; color: white!important; }
+.hydrogen-evolution-text { color: #0079C1!important; }
+.electric-engagement { background-color: #F26522!important; color: black!important; }
+.electric-engagement-text { color: #F26522!important; }
+.holistic-transition { background-color: #C2CD23!important; color: #454546!important; }
+.holistic-transition-text { color: #454546!important; }
 .reference-scenario { background-color: #ab1236!important; color: white!important; }
 .reference-scenario-text { color: #ab1236!important; }
 
@@ -524,6 +522,7 @@ footer ul, footer ol { margin-left: 2em; }
 #about h2 { margin-top: 0em; }
 #about h3 { margin-top: 2em; }
 #about h4 { margin-top: 1em; }
+#about a { color: inherit; }
 .thickline { height: 10px; }
 
 dl { margin-bottom: 2em; }
@@ -660,6 +659,7 @@ dl dd { margin-bottom: 1em; }
 .toggle-bg, .toggle-bg input { width: 2.5em; }
 .toggle-label1, .toggle-label2 { top: -0.25em; }
 .switch { width: 1.25em; }
+.noUi-pips { color: #555; }
 .noUi-pips-horizontal { height: auto; }
 button:disabled { opacity: 0.8; filter: grayscale(100%); cursor: not-allowed; }
 #play, #pause { line-height: 1.2em; }