tod
/
odin-default-css-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #326 from christinamakes/text_visibility_updates 

css-exercises: color contrast updates for WCAG compliance
This commit is contained in:
Cody Loyd 2023-06-12 09:15:25 -05:00 committed by GitHub
parent 4eea74d31f 3c9fe0e270
commit a578b252bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 49 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
foundations/05-descendant-combinator/desired-outcome.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 18 KiB

4
foundations/05-descendant-combinator/solution/solution.css
View File

@ -1,6 +1,6 @@
.container .text { .container .text {
background-color: yellow; background-color: yellow;
color: red; color: #E00000;
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
} }
@ -11,4 +11,4 @@ div p
div .text div .text
.container p .container p
*/ */

BIN
grid/01-grid-layout-1/desired-outcome.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 297 KiB

After

Width:  |  Height:  |  Size: 95 KiB

21
grid/01-grid-layout-1/solution/solution.css
View File

@ -1,4 +1,5 @@
body, html { body,
html {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
@ -20,19 +21,23 @@ body, html {
} }
.header { .header {
background-color: #FFDE22; background-color: #006157
} }
.sidebar { .sidebar {
background-color: #FF7755; background-color: #005B94
} }
.nav { .nav {
background-color: #00DDFF; background-color: #642cde
} }
.article { .article {
background-color: #bccbde; background-color: #7E1DC3
}
.footer {
background-color: #393f4d;
} }
.article p { .article p {
@ -42,10 +47,6 @@ body, html {
text-align: left; text-align: left;
} }
.footer {
background-color: #393f4d;
}
/* SOLUTION */ /* SOLUTION */
.container { .container {
@ -65,4 +66,4 @@ body, html {
.footer { .footer {
grid-column: 1 / 3; grid-column: 1 / 3;
} }

21
grid/01-grid-layout-1/style.css
View File

@ -1,4 +1,5 @@
body, html { body,
html {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
@ -20,19 +21,23 @@ body, html {
} }
.header { .header {
background-color: #FFDE22; background-color: #006157;
} }
.sidebar { .sidebar {
background-color: #FF7755; background-color: #005B94;
} }
.nav { .nav {
background-color: #00DDFF; background-color: #642cde;
} }
.article { .article {
background-color: #bccbde; background-color: #7E1DC3;
}
.footer {
background-color: #393f4d;
} }
.article p { .article p {
@ -40,8 +45,4 @@ body, html {
font-family: sans-serif; font-family: sans-serif;
color: white; color: white;
text-align: left; text-align: left;
} }
.footer {
background-color: #393f4d;
}

BIN
grid/02-grid-layout-2/desired-outcome-narrow.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 228 KiB

After

Width:  |  Height:  |  Size: 96 KiB

BIN
grid/02-grid-layout-2/desired-outcome-wide.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 267 KiB

After

Width:  |  Height:  |  Size: 97 KiB

13
grid/02-grid-layout-2/solution/solution.css
View File

@ -1,4 +1,5 @@
body, html { body,
html {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
@ -20,21 +21,21 @@ body, html {
} }
.header { .header {
background-color: #FFDE22; background-color: #006157;
grid-column: 1 / 3; grid-column: 1 / 3;
} }
.sidebar { .sidebar {
background-color: #FF7755; background-color: #005B94;
grid-row: 2 / 4; grid-row: 2 / 4;
} }
.nav { .nav {
background-color: #00DDFF; background-color: #642cde;
} }
.article { .article {
background-color: #bccbde; background-color: #7E1DC3;
} }
.article p { .article p {
@ -56,4 +57,4 @@ body, html {
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 1fr 5fr 1fr; grid-template-rows: 1fr 1fr 5fr 1fr;
gap: 15px; gap: 15px;
} }

13
grid/02-grid-layout-2/style.css
View File

@ -1,4 +1,5 @@
body, html { body,
html {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
@ -20,21 +21,21 @@ body, html {
} }
.header { .header {
background-color: #FFDE22; background-color: #006157;
grid-column: 1 / 3; grid-column: 1 / 3;
} }
.sidebar { .sidebar {
background-color: #FF7755; background-color: #005B94;
grid-row: 2 / 4; grid-row: 2 / 4;
} }
.nav { .nav {
background-color: #00DDFF; background-color: #642cde;
} }
.article { .article {
background-color: #bccbde; background-color: #7E1DC3;
} }
.article p { .article p {
@ -47,4 +48,4 @@ body, html {
.footer { .footer {
background-color: #393f4d; background-color: #393f4d;
grid-column: 1 / 3; grid-column: 1 / 3;
} }

BIN
grid/03-grid-layout-3/desired-outcome-streched.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
grid/03-grid-layout-3/desired-outcome-stretched.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 466 KiB

BIN
grid/03-grid-layout-3/desired-outcome.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 535 KiB

After

Width:  |  Height:  |  Size: 94 KiB

13
grid/03-grid-layout-3/solution/solution.css
View File

@ -26,7 +26,7 @@
} }
.sidebar { .sidebar {
background-color: #FF7755; background-color: #C50208;
} }
.sidebar .photo { .sidebar .photo {
@ -46,7 +46,7 @@
} }
.nav { .nav {
background-color: #FF7755; background-color: #C50208;
} }
@ -89,7 +89,7 @@
.footer p { .footer p {
font-size: 13px; font-size: 13px;
font-weight: normal; font-weight: normal;
} }
/* SOLUTION */ /* SOLUTION */
@ -130,8 +130,9 @@
gap: 50px; gap: 50px;
} }
.side-content, .photo { .side-content,
display: grid; .photo {
display: grid;
align-items: center; align-items: center;
} }
@ -157,4 +158,4 @@
.footer { .footer {
grid-column: 1 / 3; grid-column: 1 / 3;
} }

8
grid/03-grid-layout-3/style.css
View File

@ -25,7 +25,7 @@
} }
.sidebar { .sidebar {
background-color: #FF7755; background-color: #C50208;
} }
.sidebar .photo { .sidebar .photo {
@ -45,7 +45,7 @@
} }
.nav { .nav {
background-color: #FF7755; background-color: #C50208;
} }
.nav ul li { .nav ul li {
@ -87,5 +87,5 @@
.footer p { .footer p {
font-size: 13px; font-size: 13px;
font-weight: normal; font-weight: normal;
} }