Changeset 25066

Timestamp:

08/20/2013 05:58:07 PM (10 years ago)

Author:

lancewillett

Message:

Twenty Fourteen: accessibility changes to fix the color contrast ratio in link text and a few other places (notably hovers and focus outlines). Props sabreuse, see #25054.

File:

• trunk/src/wp-content/themes/twentyfourteen/style.css (modified) (35 diffs)

trunk/src/wp-content/themes/twentyfourteen/style.css

@@ -132 +132 @@
 /* Selection */
 ::-moz-selection {
-    background: #41a62a;
+    background: #24890d;
     color: #fff;
     text-shadow: none;
 }
 ::selection {
-    background: #41a62a;
+    background: #24890d;
     color: #fff;
     text-shadow: none;
@@ -194 +194 @@
 h5 a:hover,
 h6 a:hover {
-    color: #41a62a;
+    color: #24890d;
     text-decoration: none;
 }
@@ -250 +250 @@
 }
 blockquote p {
-    color: #8c8c8c;
+    color: #767676;
     font-size: 19px;
     font-size: 1.9rem;
@@ -379 +379 @@
 input[type="reset"]:focus,
 input[type="submit"]:focus {
-    background-color: #41a62a;
+    background-color: #24890d;
     cursor: pointer;
 }
@@ -442 +442 @@
 /* Links */
 a {
-    color: #41a62a;
+    color: #24890d;
     text-decoration: none;
 }
@@ -586 +586 @@
 .site-footer {
     background-color: #000;
-    color: rgba(255, 255, 255, 0.4);
+    color: rgba(255, 255, 255, 0.55);
     font-size: 12px;
     font-size: 1.2rem;
@@ -633 +633 @@
 }
 .header-extra {
-    background-color: #41a62a;
+    background-color: #24890d;
     float: right;
 }
@@ -666 +666 @@
 .social-links-toggle,
 .search-toggle {
-    background-color: #41a62a;
+    background-color: #24890d;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
@@ -755 +755 @@
     width: 32px;
     width: 3.2rem;
-    height: 32px;
+    height: 32px;s
     height: 3.2rem;
 }
@@ -887 +887 @@
 }
 .primary-navigation ul ul a:hover {
-    color: #41a62a;
+    color: #24890d;
 }
 .primary-navigation ul li:hover > ul {
@@ -990 +990 @@
 }
 .attachment-featured-thumbnail {
-    background: #8c8c8c url(images/pattern.png) repeat 0 0;
+    background: #767676 url(images/pattern.png) repeat 0 0;
     background-size: 5px 5px;
     display: block;
@@ -1020 +1020 @@
 }
 .entry-title a:hover {
-    color: #41a62a;
+    color: #24890d;
 }
 .entry-meta {
     clear: both;
-    color: #8c8c8c;
+    color: #767676;
     font-size: 12px;
     font-size: 1.2rem;
@@ -1031 +1031 @@
 }
 .entry-meta a {
-    color: #8c8c8c;
+    color: #767676;
 }
 .entry-meta a:hover {
@@ -1044 +1044 @@
 }
 .cat-links a:hover {
-    color: #41a62a;
+    color: #24890d;
 }
 .byline {
@@ -1157 +1157 @@
 }
 footer.entry-meta .entry-title a {
-    color: #8c8c8c;
+    color: #767676;
 }
 footer.entry-meta .entry-title a:hover {
@@ -1260 +1260 @@
 }
 .page-links a:hover {
-    background: #41a62a;
-    border: 1px solid #41a62a;
+    background: #24890d;
+    border: 1px solid #24890d;
 }
 .page-links > span.page-links-title {
@@ -1277 +1277 @@
 }
 .tag-links a {
-    background-color: #8c8c8c;
+    background-color: #767676;
     border-radius: 0 2px 2px 0;
     color: #fff;
@@ -1299 +1299 @@
 .tag-links a:before {
     border-top: 10px solid transparent;
-    border-right: 8px solid #8c8c8c;
+    border-right: 8px solid #767676;
     border-bottom: 10px solid transparent;
     content: '';
@@ -1312 +1312 @@
 @-moz-document url-prefix() {
     .tag-links a:before {
-        border-right: 10px solid #8c8c8c;
+        border-right: 10px solid #767676;
         left: -10px;
         left: -1.0rem;
@@ -1349 +1349 @@
 }
 .taxonomy-description p {
-    color: #8c8c8c;
+    color: #767676;
     font-size: 12px;
     font-size: 1.2rem;
@@ -1538 +1538 @@
 }
 .post-formatted-posts .entry-meta a {
-    color: #8c8c8c;
+    color: #767676;
 }
 .post-formatted-posts .entry-meta a:hover {
@@ -1768 +1768 @@
 }
 .paging-navigation .page-numbers.current {
-    border-top: 1px solid #41a62a;
-    color: #41a62a;
+    border-top: 1px solid #24890d;
+    color: #24890d;
 }
 .paging-navigation a {
@@ -1801 +1801 @@
 }
 .post-navigation .meta-nav {
-    color: #8c8c8c;
+    color: #767676;
     display: block;
     font-size: 12px;
@@ -1822 +1822 @@
 .site-content .image-navigation a:hover {
     background-color: rgba(0, 0, 0, 0.01);
-    color: #41a62a;
+    color: #24890d;
 }
 .comment-navigation {
@@ -1893 +1893 @@
 .comment-list li.trackback a,
 .comment-list li.pingback a {
-    color: #8c8c8c;
+    color: #767676;
 }
 .comment-author a:hover,
@@ -1899 +1899 @@
 .comment-list .trackback a:hover,
 .comment-list .pingback a:hover {
-    color: #41a62a;
+    color: #24890d;
     text-decoration: none;
 }
@@ -1944 +1944 @@
 }
 .bypostauthor .comment-author .comment-author-avatar {
-    background-color: #41a62a;
+    background-color: #24890d;
 }
 .comment-author cite {
@@ -2000 +2000 @@
 }
 .no-comments {
-    color: #8c8c8c;
+    color: #767676;
     font-size: 16px;
     font-size: 1.6rem;
@@ -2032 +2032 @@
 
 .site-description {
-    color: rgba(255, 255, 255, 0.4);
+    color: rgba(255, 255, 255, 0.55);
     display: none;
     font-size: 11px;
@@ -2044 +2044 @@
 
 .site-footer a {
-    color: rgba(255, 255, 255, 0.4);
+    color: rgba(255, 255, 255, 0.55);
 }
 .site-footer a:hover {
@@ -2096 +2096 @@
 .widget-area input[type="reset"],
 .widget-area input[type="submit"] {
-    background-color: #41a62a;
+    background-color: #24890d;
     font-size: 11px;
     font-size: 1.1rem;
@@ -2146 +2146 @@
 /* Caledar widget*/
 .widget_calendar a {
-    background-color: #41a62a;
+    background-color: #24890d;
     color: #fff;
     display: block;
@@ -2237 +2237 @@
 
 .content-sidebar {
-    color: #8c8c8c;
+    color: #767676;
     font-size: 14px;
     font-size: 1.4rem;
@@ -2250 +2250 @@
 }
 .content-sidebar a:hover {
-    color: #41a62a;
+    color: #24890d;
 }
 .content-sidebar button,
@@ -2270 +2270 @@
 .content-sidebar input[type="reset"]:focus,
 .content-sidebar input[type="submit"]:focus {
-    background-color: #41a62a;
+    background-color: #24890d;
 }
 .content-sidebar button:active,