From a4983b7960ed22e25d2a33b9ad28f3b87c23ccc4 Mon Sep 17 00:00:00 2001
From: Sylvia Blaho <sylvia.blaho@gmail.com>
Date: Sun, 10 Mar 2024 22:28:00 +0100
Subject: [PATCH] improve accessibility: underline links, change colors

---
 README.md            |  7 ++++++-
 assets/css/style.css | 28 ++++++++++++++--------------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 3a08e2d..94c4043 100644
--- a/README.md
+++ b/README.md
@@ -58,10 +58,15 @@ Palette: Arctic, northern lights
 
 Color arrangement inspiration: [https://youpreneur.com/](https://youpreneur.com/)
 
-2 salient colors combined with white, gray and black. 
+2 salient colors (#9FFFCB  and #004e64) combined with white, gray (#537D88) and dark gray (#3C5158). 
 
 Contrast between 2 salient colors: 7.75:1 ([WebAIM](https://webaim.org/resources/contrastchecker/))
 
+Light and dark gray: 7.02:1
+Dark and white: 9.23:1
+Dark gray and white: 4.5:1 (only used for large text)
+Gray and light: 3.78:1 (only used for graphical objects)
+
 <!--TODO: decide if we wanna introduce a 3rd salient color, like the green accents on hover-->
 
 Color variables were used instead of hard-coding colors for each element, so that the overall color scheme can easily be modified in the future if needed. This was based on the [W3Schools tutorial on variables](https://www.w3schools.com/css/css3_variables.asp), a resource pointed out by my mentor.
diff --git a/assets/css/style.css b/assets/css/style.css
index 915369d..741d9fd 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -79,8 +79,8 @@
   --dark: #004e64;
   --white: #ffffff;
   --light: #9fffcb;
-  --gray: #62929e;
-  --dark-gray: #516f77;
+  --gray: #537D88;
+  --dark-gray: #3C5158;
 }
 
 /* overall style, override browser defaults */
@@ -229,20 +229,15 @@ p {
 
 #solutions p,
 #solutions ul {
-  color: var(--gray);
+  color: var(--dark-gray);
 }
 
 /* inline links */
 
 #solutions a {
-  text-decoration: none;
   color: var(--dark);
 }
 
-#solutions a:hover {
-  color: var(--white);
-}
-
 #problems-solutions p {
   margin: 0.5rem 0;
 }
@@ -450,15 +445,10 @@ this is not displayed by default, only when tapped/hovered over */
 /* inline links within the content on the flip side of the cards*/
 
 .cred-content a {
-  text-decoration: none;
   color:inherit;
   font-weight: bold;
 }
 
-.cred-content a:hover {
-  color: var(--light);
-}
-
 /* the title of the leadership position held by the client */
 .pos {
   font-size: 120%;
@@ -681,10 +671,20 @@ footer ul {
 /* laptops and desktops */
 @media screen and (min-width: 992px) {
 
-  /*  links change color when hovered over */
+  /*  links change color and are underlined when hovered over */
   a:hover,
   a:hover i { /* footer icons included*/
     color: var(--white);
+    text-decoration: underline;
+  }
+
+  #solutions a:hover {
+    color: var(--white);
+    font-weight: bold;
+  }
+
+  .cred-content a:hover {
+    color: var(--light);
   }
 
   /* hero image */