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

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

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

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

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

@ -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 {

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

@ -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 {
@ -41,7 +46,3 @@ body, html {
color: white;
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

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

@ -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 {

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

@ -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 {

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

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

@ -26,7 +26,7 @@
}
.sidebar {
background-color: #FF7755;
background-color: #C50208;
}
.sidebar .photo {
@ -46,7 +46,7 @@
}
.nav {
background-color: #FF7755;
background-color: #C50208;
}
@ -130,7 +130,8 @@
gap: 50px;
}
.side-content, .photo {
.side-content,
.photo {
display: grid;
align-items: center;
}

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

@ -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 {