Use screenshot instead of text logo for U.S. Web Design Standards on homepage. (#785)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
diff --git a/img/logo-us-web-design-standards.png b/img/logo-us-web-design-standards.png
deleted file mode 100644
index 5361562..0000000
Binary files a/img/logo-us-web-design-standards.png and /dev/null differ
diff --git a/img/screen-us-web-design-standards.png b/img/screen-us-web-design-standards.png
new file mode 100644
index 0000000..70c58d6
Binary files /dev/null and b/img/screen-us-web-design-standards.png differ
diff --git a/index.html b/index.html
index d1374ec..ef09418 100644
--- a/index.html
+++ b/index.html
@@ -58,7 +58,7 @@
<div class="used-by-logos">
<a href="http://smashingmagazine.com" target="_blank"><img src="img/logo-smashing.png" alt="Smashing Magazine" /></a>
- <a href="https://playbook.cio.gov/designstandards/" target="_blank"><img src="img/logo-us-web-design-standards.png" alt="U.S. Web Design Standards" /></a>
+ <a class="uswds" href="https://playbook.cio.gov/designstandards/" target="_blank">U.S. Web Design Standards</a>
<a href="http://alistapart.com" target="_blank"><img src="img/logo-ala.png" alt="A List Apart" /></a>
<a href="https://developer.mozilla.org/" target="_blank"><img src="img/logo-mdn.png" alt="Mozilla Developer Network (MDN)" /></a>
diff --git a/style.css b/style.css
index b0f364d..a937f9d 100644
--- a/style.css
+++ b/style.css
@@ -372,6 +372,11 @@ footer {
border: 5px solid white;
position: relative;
}
+ .used-by-logos > .uswds {
+ background: url('img/screen-us-web-design-standards.png') no-repeat 0 0;
+ background-size: cover;
+ text-indent: -999em;
+ }
.used-by-logos > a > img {
max-height: 100%;
max-width: 100%;