From 5ebe6e3da0a7ee013c7d254018f8244b134ef642 Mon Sep 17 00:00:00 2001
From: "mark.j0hnst0n" <friendorfaux6@gmail.com>
Date: Fri, 29 May 2020 14:22:46 +0000
Subject: [PATCH] changed colour of text to make more accessible to increase
 score for access ibility in google lighthouse

---
 .theia/settings.json |  3 ++-
 README.md            | 16 +++++++++++++---
 assets/css/style.css | 28 +++++++++++++++++++---------
 audio.html           | 19 ++++++++++---------
 contact.html         |  1 +
 dates.html           |  3 ++-
 index.html           |  1 +
 7 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/.theia/settings.json b/.theia/settings.json
index 0b424f7..90ef99c 100644
--- a/.theia/settings.json
+++ b/.theia/settings.json
@@ -14,5 +14,6 @@
       "**/.DS_Store": true,
       "**/.theia": true,
    },
-   "emmet.extensionsPath": ".theia"
+"emmet.extensionsPath": ".theia",
+"editor.autoSave": "off"
 }
diff --git a/README.md b/README.md
index 18b41e7..960e8ed 100644
--- a/README.md
+++ b/README.md
@@ -46,6 +46,16 @@ Here are pictures of the wireframes on their respective devices.
 
 ![index.html](assets/readme/wireframes/index.html_mobile.png)
 
+## Colour Scheme
+
+A simple colour scheme was intended for this project as the design was to look minimal, also a moodboard of different photos was requested form the client to gain an understanding of the atmosphere they wanted to create with the site.
+On consultation with the client a dusky lavender pink background [colour](http://hex.wikimix.info/en/color-dd85d7) was selected to stand out visually in comparison to other websites and also
+visually and also to match the colour scheme of the photos that were selected to use for the project.
+
+Initially a light blue font colour was chosen to contrast against the pink background but this was found to score low on accessibility on google lighthouse for users with visual impairments so black was selected as tke main font colour for
+easier reading by these users.
+
+
 ### Features
 
 #### Bootstrap Navbar
@@ -221,13 +231,13 @@ My main influence for this site was simplicity.  Every element must have a funct
 
 I took layout pointers from the following websites.
 
-https://www.guilttripcoffee.com/
+[Guilt Trip Coffee Website](https://www.guilttripcoffee.com/)
 
-https://established.coffee/
+[Established Coffee Website](https://established.coffee/)
 
 I also looked at the following website for some guidance on the 'dates' page:
 
-https://www.mac-demarco.com/tour/
+[Mac Demarco Tour Page](https://www.mac-demarco.com/tour/)
 
 ## Acknowledgements
 
diff --git a/assets/css/style.css b/assets/css/style.css
index 37f8304..4f3c174 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -6,10 +6,14 @@
     background-color: #dd85d7;
 }
 
+.text-color{
+    color: #000;
+}
+
 /*-----------------------------------------Header */
 
 #logo{
-    color: #95d0fc;
+    color: black;
     font-family: 'Mukta', sans-serif;
     font-weight: 600;
     font-size: 300%;
@@ -48,7 +52,7 @@ font-family: "Sriracha", sans-serif;
     color: #000;
     text-align: center;
     width: 150px;
-    height: 150;
+    height: 150px;
     border: solid #000 3px;
     border-radius: 50%;
     padding-top: 35px;
@@ -65,7 +69,7 @@ section a{
 
 section a:hover{
     text-decoration: none;
-    color: #dd85d7;
+    color: #2345a5;
 }
 
 .paragraph-container{
@@ -85,11 +89,11 @@ section a:hover{
 }
 
 .col a{
-    color: #95d0fc;
+    color: #000;
 }
 
 .col a:hover{
-    color: #000;
+    color: #2345a5;
 }
 
 /*-----------------------------------------Audio Page Styles */
@@ -99,6 +103,9 @@ section a:hover{
     display: inline-block;
 }
 
+.audio-headings{
+    font-family: "Mukta", sans-serif;
+}
 
 .faux-audio{
     margin: 10px;
@@ -121,7 +128,7 @@ section a:hover{
 
 #table-heading{
     font-family: "Sriracha", sans-serif;
-    color: black;
+    color: #000;
     margin-top: 150px;
     text-align: center;
 }
@@ -136,7 +143,7 @@ section a:hover{
 }
 
 .dates-table, th, td {
-    color: #95d0fc;
+    color: #2345a5;
     font-family: "Lato", sans-serif;
     font-weight: 600;
     text-align: center;
@@ -144,12 +151,12 @@ section a:hover{
 }
 
 .dates-table a {
-    color: #95d0fc;
+    color: #2345a5;
     text-decoration: none;
 }
 
 .dates-table a:hover {
-    color: black;
+    color: #000;
     text-decoration: none;
 }
 
@@ -165,6 +172,7 @@ section a:hover{
 .contact-form-heading{
     font-family: 'Sriracha', sans-serif;
     margin-bottom: 30px;
+    color: #000;
 }
 
 .contact-form-button{
@@ -193,3 +201,5 @@ section a:hover{
 .paragraph{
     width: 90%;
 }
+
+}
diff --git a/audio.html b/audio.html
index 382f9f7..04a1c8d 100644
--- a/audio.html
+++ b/audio.html
@@ -7,6 +7,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="The audio for Faux DJs Belfast.  Find out what type of music they play">
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
@@ -50,7 +51,7 @@
             <div class="container-fluid no-gutters">
                 <div class="row no-gutters">
                     <div class="col-md no-gutters faux-audio">
-                        <h2>Club Music</h2>
+                        <h2 class="text-color audio-headings">Club Music</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club" />
                         <iframe
                             title="Faux Club Mix Santeria"
@@ -60,7 +61,7 @@ <h2>Club Music</h2>
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137881038&color=%23e2dbd0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
                         ></iframe>
 
-                        <h2>Club Music</h2>
+                        <h2 class="text-color audio-headings">Club Music</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club" />
                         <iframe
                             title="Faux Club Mix Santeria"
@@ -70,13 +71,13 @@ <h2>Club Music</h2>
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137881038&color=%23e2dbd0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
                         ></iframe>
 
-                        <h2>Club Music - Spotify Playlist</h2>
+                        <h2 class="text-color audio-headings">Club Music - Spotify Playlist</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club" />
                         <iframe title="Faux Club Music Spotify Playlist" class="audio-links" src="https://open.spotify.com/embed/playlist/3IpLX1sUcAyrpu9TG9LrpG" height="300" allow="encrypted-media"></iframe>
                     </div>
 
                     <div class="col-md no-gutters faux-audio">
-                        <h2>Bar Vibes</h2>
+                        <h2 class="text-color audio-headings">Bar Vibes</h2>
                         <img src="assets/images/fauxbarmusicmoodpicclouds.jpg" alt="Moody pink and purple clouds" />
                         <iframe
                             title="Faux Bar Vibes Mix Santeria"
@@ -86,7 +87,7 @@ <h2>Bar Vibes</h2>
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137881038&color=%23e2dbd0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
                         ></iframe>
 
-                        <h2>Bar Vibes</h2>
+                        <h2 class="text-color audio-headings">Bar Vibes</h2>
                         <img src="assets/images/fauxbarmusicmoodpicclouds.jpg" alt="Moody pink and purple clouds" />
                         <iframe
                             title="Faux Bar Vibes Mix Santeria"
@@ -96,13 +97,13 @@ <h2>Bar Vibes</h2>
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137881038&color=%23e2dbd0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
                         ></iframe>
 
-                        <h2>Bar Vibes - Spotify Playlist</h2>
+                        <h2 class="text-color audio-headings">Bar Vibes - Spotify Playlist</h2>
                         <img src="assets/images/fauxbarmusicmoodpicclouds.jpg" alt="Moody pink and purple clouds" />
                         <iframe title="Faux Bar Vibes Spotify Playlist" class="audio-links" src="https://open.spotify.com/embed/playlist/5M18RVJ7ieNpgNbO42d5yE" height="300" allow="encrypted-media"></iframe>
                     </div>
 
                     <div class="col-md no-gutters faux-audio">
-                        <h2>Faux Edits</h2>
+                        <h2 class="text-color audio-headings">Faux Edits</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club" />
                         <iframe
                             title="Faux DJs Edits"
@@ -111,7 +112,7 @@ <h2>Faux Edits</h2>
                             allow="autoplay"
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/511943853&color=%23545454&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
                         ></iframe>
-                        <h2>Faux Edits</h2>
+                        <h2 class="text-color audio-headings">Faux Edits</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club" />
                         <iframe
                             title="Faux DJs Edits"
@@ -120,7 +121,7 @@ <h2>Faux Edits</h2>
                             allow="autoplay"
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/511943853&color=%23545454&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
                         ></iframe>
-                        <h2>Faux Edits</h2>
+                        <h2 class="text-color audio-headings">Faux Edits</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club" />
                         <iframe
                             title="Faux DJs Edits"
diff --git a/contact.html b/contact.html
index 48d442f..df3e75e 100644
--- a/contact.html
+++ b/contact.html
@@ -6,6 +6,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="The contact for Faux DJs Belfast.  Find out their availability and book them for gigs">
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
diff --git a/dates.html b/dates.html
index 99d2ce2..8a36dfe 100644
--- a/dates.html
+++ b/dates.html
@@ -7,6 +7,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="The dates for Faux DJs Belfast.  Find out where and when they are playing in bars and clubs around Belfast!">
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
@@ -51,7 +52,7 @@
                 <div class="row">
                     <div class="col-xl"></div>
                     <div class="col-xl">
-                        <h2 id="table-heading">Check out this table to find out where we're playing in the next month!</h2>
+                        <h2 id="table-heading" class="text-color">Check out this table to find out where we're playing in the next month!</h2>
                         <table class="dates-table">
                             <tr>
                                 <th>Venue</th>
diff --git a/index.html b/index.html
index 65027ed..7baff5e 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="The homepage for Faux DJs Belfast.  Find out about who they are and find links to music they play and where they are playing it!">
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />