Merge pull request TheOdinProject#326 from christinamakes/text_visibi…

…lity_updates css-exercises: color contrast updates for WCAG compliance
tlawlor15 · Jun 12, 2023 · a578b25 · a578b25
2 parents 4eea74d + 3c9fe0e
commit a578b25
Show file tree

Hide file tree

Showing 14 changed files with 49 additions and 44 deletions.
diff --git a/foundations/05-descendant-combinator/desired-outcome.png b/foundations/05-descendant-combinator/desired-outcome.png
diff --git a/foundations/05-descendant-combinator/solution/solution.css b/foundations/05-descendant-combinator/solution/solution.css
@@ -1,6 +1,6 @@
 .container .text {
   background-color: yellow;
-  color: red;
+  color: #E00000;
   font-size: 20px;
   text-align: center;
 }
@@ -11,4 +11,4 @@ div p
 div .text
 .container p
 
-*/
+*/
diff --git a/grid/01-grid-layout-1/desired-outcome.png b/grid/01-grid-layout-1/desired-outcome.png
diff --git a/grid/01-grid-layout-1/solution/solution.css b/grid/01-grid-layout-1/solution/solution.css
@@ -1,4 +1,5 @@
-body, html {
+body,
+html {
   height: 100%;
   margin: 0;
 }
@@ -20,19 +21,23 @@ body, html {
 }
 
 .header {
-  background-color: #FFDE22;
+  background-color: #006157
 }
 
 .sidebar {
-  background-color: #FF7755;
+  background-color: #005B94
 }
 
 .nav {
-  background-color: #00DDFF;
+  background-color: #642cde
 }
 
 .article {
-  background-color: #bccbde;
+  background-color: #7E1DC3
+}
+
+.footer {
+  background-color: #393f4d;
 }
 
 .article p {
@@ -42,10 +47,6 @@ body, html {
   text-align: left;
 }
 
-.footer {
-  background-color: #393f4d;
-}
-
 /* SOLUTION */
 
 .container {
@@ -65,4 +66,4 @@ body, html {
 
 .footer {
   grid-column: 1 / 3;
-}
+}
diff --git a/grid/01-grid-layout-1/style.css b/grid/01-grid-layout-1/style.css
@@ -1,4 +1,5 @@
-body, html {
+body,
+html {
   height: 100%;
   margin: 0;
 }
@@ -20,28 +21,28 @@ body, html {
 }
 
 .header {
-  background-color: #FFDE22;
+  background-color: #006157;
 }
 
 .sidebar {
-  background-color: #FF7755;
+  background-color: #005B94;
 }
 
 .nav {
-  background-color: #00DDFF;
+  background-color: #642cde;
 }
 
 .article {
-  background-color: #bccbde;
+  background-color: #7E1DC3;
+}
+
+.footer {
+  background-color: #393f4d;
 }
 
 .article p {
   font-size: 18px;
   font-family: sans-serif;
   color: white;
   text-align: left;
-}
-
-.footer {
-  background-color: #393f4d;
-}
+}
diff --git a/grid/02-grid-layout-2/desired-outcome-narrow.png b/grid/02-grid-layout-2/desired-outcome-narrow.png
diff --git a/grid/02-grid-layout-2/desired-outcome-wide.png b/grid/02-grid-layout-2/desired-outcome-wide.png
diff --git a/grid/02-grid-layout-2/solution/solution.css b/grid/02-grid-layout-2/solution/solution.css
@@ -1,4 +1,5 @@
-body, html {
+body,
+html {
   height: 100%;
   margin: 0;
 }
@@ -20,21 +21,21 @@ body, html {
 }
 
 .header {
-  background-color: #FFDE22;
+  background-color: #006157;
   grid-column: 1 / 3;
 }
 
 .sidebar {
-  background-color: #FF7755;
+  background-color: #005B94;
   grid-row: 2 / 4;
 }
 
 .nav {
-  background-color: #00DDFF;
+  background-color: #642cde;
 }
 
 .article {
-  background-color: #bccbde;
+  background-color: #7E1DC3;
 }
 
 .article p {
@@ -56,4 +57,4 @@ body, html {
   grid-template-columns: 1fr 3fr;
   grid-template-rows: 1fr 1fr 5fr 1fr;
   gap: 15px;
-}
+}
diff --git a/grid/02-grid-layout-2/style.css b/grid/02-grid-layout-2/style.css
@@ -1,4 +1,5 @@
-body, html {
+body,
+html {
   height: 100%;
   margin: 0;
 }
@@ -20,21 +21,21 @@ body, html {
 }
 
 .header {
-  background-color: #FFDE22;
+  background-color: #006157;
   grid-column: 1 / 3;
 }
 
 .sidebar {
-  background-color: #FF7755;
+  background-color: #005B94;
   grid-row: 2 / 4;
 }
 
 .nav {
-  background-color: #00DDFF;
+  background-color: #642cde;
 }
 
 .article {
-  background-color: #bccbde;
+  background-color: #7E1DC3;
 }
 
 .article p {
@@ -47,4 +48,4 @@ body, html {
 .footer {
   background-color: #393f4d;
   grid-column: 1 / 3;
-}
+}
diff --git a/grid/03-grid-layout-3/desired-outcome-streched.png b/grid/03-grid-layout-3/desired-outcome-streched.png
diff --git a/grid/03-grid-layout-3/desired-outcome-stretched.png b/grid/03-grid-layout-3/desired-outcome-stretched.png
diff --git a/grid/03-grid-layout-3/desired-outcome.png b/grid/03-grid-layout-3/desired-outcome.png
diff --git a/grid/03-grid-layout-3/solution/solution.css b/grid/03-grid-layout-3/solution/solution.css
@@ -26,7 +26,7 @@
 }
 
 .sidebar {
-  background-color: #FF7755;
+  background-color: #C50208;
 }
 
 .sidebar .photo {
@@ -46,7 +46,7 @@
 }
 
 .nav {
-  background-color: #FF7755;
+  background-color: #C50208;
 }
 
 
@@ -89,7 +89,7 @@
 
 .footer p {
   font-size: 13px;
-  font-weight: normal;  
+  font-weight: normal;
 }
 
 /* SOLUTION */
@@ -130,8 +130,9 @@
   gap: 50px;
 }
 
-.side-content, .photo {
-  display: grid; 
+.side-content,
+.photo {
+  display: grid;
   align-items: center;
 }
 
@@ -157,4 +158,4 @@
 
 .footer {
   grid-column: 1 / 3;
-}
+}
diff --git a/grid/03-grid-layout-3/style.css b/grid/03-grid-layout-3/style.css
@@ -25,7 +25,7 @@
 }
 
 .sidebar {
-  background-color: #FF7755;
+  background-color: #C50208;
 }
 
 .sidebar .photo {
@@ -45,7 +45,7 @@
 }
 
 .nav {
-  background-color: #FF7755;
+  background-color: #C50208;
 }
 
 .nav ul li {
@@ -87,5 +87,5 @@
 
 .footer p {
   font-size: 13px;
-  font-weight: normal;  
-}
+  font-weight: normal;
+}