Use JavaScript to invert colours where possible

accessibility.js

@@ -0,0 +1,16 @@
+/*jslint indent: 2, browser: true */
+
+(function () {
+  'use strict';
+
+  if (document.addEventListener && document.documentElement.classList) {
+    document.addEventListener('click', function (event) {
+      var classes = event.target.classList;
+
+      if (classes.contains('color-change')) {
+        document.getElementById('accessibility').classList[classes.contains('wob') ? 'add' : 'remove']('inverted');
+        event.preventDefault();
+      }
+    });
+  }
+}());

ca_nl_stjohns.html

@@ -72,5 +72,6 @@ <h3>The People</h3>
         rights to this work.
       </p>
     </section> 
+    <script src="accessibility.js"></script>
   </body>
 </html>

ca_qc_montreal.html

@@ -39,5 +39,6 @@ <h3>Contacts</h3>
         rights to this work.
       </p>
     </section> 
+    <script src="accessibility.js"></script>
   </body>
 </html>

de_berlin.html

@@ -141,5 +141,6 @@ <h4><i>Die Gruppen</i></h4>
         rights to this work.
       </p>
     </section> 
+    <script src="accessibility.js"></script>
   </body>
 </html>

index.html

@@ -146,6 +146,7 @@ <h4 id="groups">The Groups</h4>
         rights to this work.
       </p>
     </section>
+    <script src="accessibility.js"></script>
   </body>
 </html>
 

new_groups.html

@@ -74,5 +74,6 @@ <h1>Starting a Group</h1>
         rights to this work.
       </p>
     </section>
+    <script src="accessibility.js"></script>
   </body>
 </html>

style.css

@@ -19,17 +19,17 @@ body {
     background-color:black;
     padding:0.2em;
 }
-#accessibility:target{
+#accessibility:target, #accessibility.inverted {
     color:white;
     background-color:black;
 }
-#accessibility:target a{
+#accessibility:target a, #accessibility.inverted a {
     color:white;
 }
-#accessibility:target .wob{
+#accessibility:target .wob, #accessibility.inverted .wob {
     display:none;
 }
-#accessibility:target .bow{
+#accessibility:target .bow, #accessibility.inverted .bow {
     display:inline;
 }
 section {

uk_east_london.html

@@ -85,5 +85,6 @@ <h3>The People</h3>
         rights to this work.
       </p>
     </section> 
+    <script src="accessibility.js"></script>
   </body>
 </html>

uk_edinburgh.html

@@ -153,5 +153,6 @@ <h4>People to contact:</h4>
         rights to this work.
       </p>
     </section> 
+    <script src="accessibility.js"></script>
   </body>
 </html>

uk_manchester.html

@@ -49,5 +49,6 @@ <h2 id="venues">Potential Venues</h2>
 
 
     </section>
+    <script src="accessibility.js"></script>
   </body>
 </html>

uk_oxford.html

@@ -52,6 +52,7 @@ <h4 id="location">The Date &amp; Location</h4>
         rights to this work.
       </p>
     </section>
+    <script src="accessibility.js"></script>
   </body>
 </html>
 

uk_west_london.html

@@ -46,5 +46,6 @@ <h3>The People</h3>
         rights to this work.
       </p>
     </section> 
+    <script src="accessibility.js"></script>
   </body>
 </html>

us_austin.html

@@ -73,5 +73,6 @@ <h3>The People</h3>
         rights to this work.
       </p>
     </section> 
+    <script src="accessibility.js"></script>
   </body>
 </html>

us_boston.html

@@ -52,5 +52,6 @@ <h3>The People</h3>
         rights to this work.
       </p>
     </section> 
+    <script src="accessibility.js"></script>
   </body>
 </html>

us_sanfrancisco.html

@@ -133,5 +133,6 @@ <h3>The People</h3>
         rights to this work.
       </p>
     </section> 
+    <script src="accessibility.js"></script>
   </body>
 </html>