feat(#985): fix w3c validation

pydotorg/settings/pipeline.py

@@ -19,7 +19,7 @@
         ),
         'output_filename': 'stylesheets/mq.css',
         'extra_context': {
-            'media': 'not print, braille, embossed, speech, tty',
+            'media': 'not print, speech',
         },
     },
     'no-mq': {

static/sass/style.css

@@ -190,7 +190,7 @@
   color: #4d4d4d !important;
   font-weight: normal;
   margin-bottom: 0.4375em;
-  padding: .4em .75em .35em;
+  padding: 0.4em 0.75em 0.35em;
   text-align: left;
   white-space: nowrap;
   text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
@@ -350,6 +350,8 @@ button[type=submit], .search-button, #dive-into-python .flex-control-paging a, .
   display: block;
   color: #999;
   padding: .5em .75em .4em;
+  color: #999999;
+  padding: 0.5em 0.75em 0.4em;
   border: 1px solid #caccce;
   background-color: transparent; }
 
@@ -405,7 +407,7 @@ form, .header-banner, .success-stories-widget .quote-from {
 .slides,
 .flex-control-nav,
 .flex-direction-nav {margin: 0; padding: 0; list-style: none;} */
-/* FlexSlider Necessary Styles 
+/* FlexSlider Necessary Styles
 .flexslider {margin: 0; padding: 0;}
 .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping 
 .flexslider .slides img {width: 100%; display: block;}
@@ -497,8 +499,8 @@ ins {
 
 mark {
   display: inline-block;
-  padding: 0 .25em;
-  margin: 0 -.125em;
+  padding: 0 0.25em;
+  margin: 0 -0.125em;
   background-color: #ffb;
   /* light yellow */ }
 
@@ -597,7 +599,7 @@ sub {
   bottom: -0.25em; }
 
 pre, code, kbd, samp, var {
-  font-family: Consolas, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; }
+  font-family: Consolas, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; }
 
 pre {
   /* Get spaces to display for PRE tags but dont let long lines break out of containers */
@@ -1033,7 +1035,7 @@ h2.not-column {
     color: #999;
     background: transparent;
     text-align: center;
-    padding: .5em .75em .4em;
+    padding: 0.5em 0.75em 0.4em;
     font-size: 1em;
     line-height: 1.75em;
     /* no fallback for .no-generatedcontent. This is a progressive enhancement */ }
@@ -1082,10 +1084,10 @@ h2.not-column {
 /* Used in both the main-header and the header-banner */
 .main-header {
   border-top: 1px solid #191919;
-  border-bottom: 1px solid #444; }
+  border-bottom: 1px solid #444444; }
   .main-header .container {
     text-align: center;
-    padding: .75em 1em; }
+    padding: 0.75em 1em; }
 
 /*h1*/
 .site-headline {
@@ -1181,15 +1183,15 @@ input#s,
 .menu-icon {
   display: inline-block;
   font-size: 1.25em;
-  margin: -.125em -.125em 0 0; }
+  margin: -0.125em -0.125em 0 0; }
 
 /*form*/
 .search-the-site {
   text-align: left;
-  padding: .35em .2em .3em; }
+  padding: 0.35em 0.2em 0.3em; }
   .search-the-site .icon-search:before {
     font-size: 1.75em;
-    margin: 0 .125em 0 .25em; }
+    margin: 0 0.125em 0 0.25em; }
   .search-the-site .no-touch {
     border-left: 0; }
 
@@ -1200,8 +1202,8 @@ input#s,
   color: #bbb;
   background-color: transparent;
   border: none;
-  margin: .125em 0;
-  padding: .4em 0 .3em;
+  margin: 0.125em 0;
+  padding: 0.4em 0 0.3em;
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   border-radius: 0px; }
@@ -1214,7 +1216,7 @@ input#s,
   .search-field:focus {
     background-color: #fff;
     color: #444;
-    padding: .4em .5em .3em;
+    padding: 0.4em 0.5em 0.3em;
     /* removed this line because it was making the height fluctuate on focus:
     @include pe-border( $color-top: darken( $darkerblue, 12% ), $color-bottom: lighten( $darkerblue, 8% ) ); */ }
   .search-field:blur {
@@ -1277,7 +1279,7 @@ input#s,
     .account-signin .tier-1 > a,
     .account-signin .tier-2 > a {
       display: block;
-      padding: .5em 1.5em .4em 1em;
+      padding: 0.5em 1.5em 0.4em 1em;
       position: relative; }
   .adjust-font-size .tier-1,
   .winkwink-nudgenudge .tier-1,
@@ -1595,7 +1597,7 @@ input#s,
 .adjust-font-size .tier-1 > a,
 .winkwink-nudgenudge .tier-1 > a,
 .account-signin .tier-1 > a {
-  padding: 1em 1em .875em; }
+  padding: 1em 1em 0.875em; }
 
 /* ! ===== Main navigation – In _layout.scss and _mixins.scss, as we don't display it here ===== */
 .main-navigation {
@@ -1862,7 +1864,7 @@ input#s,
     .sidebar-widget form button,
     .sidebar-widget form input[type=submit] {
       font-size: 1.125em;
-      padding: .4em 1em .35em; }
+      padding: 0.4em 1em 0.35em; }
   .text a:not(.button),
   .sidebar-widget a:not(.button) {
     display: inline;
@@ -1962,13 +1964,13 @@ input#s,
   .sidebar-widget samp {
     border-bottom: 1px solid #caccce;
     background-color: #e6e8ea;
-    padding: .125em .375em 0;
-    margin: 0 .25em; }
+    padding: 0.125em 0.375em 0;
+    margin: 0 0.25em; }
   .text code, .text kbd,
   .sidebar-widget code,
   .sidebar-widget kbd {
-    padding: .125em .375em 0;
-    margin: 0 -.0625em;
+    padding: 0.125em 0.375em 0;
+    margin: 0 -0.0625em;
     background: #e6e8ea;
     background: rgba(230, 232, 234, 0.5);
     -moz-box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1) inset;
@@ -2018,7 +2020,7 @@ table tr {
 table tr:nth-of-type(even), table tr.even {
   background-color: #f0f0f0; }
 table th, table td {
-  padding: .25em .5em .2em;
+  padding: 0.25em 0.5em 0.2em;
   border-left: 2px solid #fff; }
   table th:first-child, table td:first-child {
     border-left: none; }
@@ -2186,7 +2188,7 @@ table tfoot {
     .success-stories-widget blockquote a:hover, .success-stories-widget blockquote a:focus, .success-stories-widget blockquote a:active {
       color: #3776ab; }
 .success-stories-widget .quote-from td {
-  padding: .5em;
+  padding: 0.5em;
   vertical-align: middle; }
 .success-stories-widget .quote-from img {
   max-height: 5em; }
@@ -2225,7 +2227,7 @@ table tfoot {
   .applications-widget ul {
     border-top: 1px solid #caccce; }
   .applications-widget li {
-    padding: .5em 0 .4em;
+    padding: 0.5em 0 0.4em;
     border-bottom: 1px solid #caccce; }
 
 .shrubbery {
@@ -2279,7 +2281,7 @@ table tfoot {
       color: #3776ab;
       background-color: #f2f4f6;
       border-bottom: 1px solid #e6eaee;
-      padding: .6em .75em .5em; }
+      padding: 0.6em 0.75em 0.5em; }
       .pep-list li a:hover, .pep-list li a:focus, .pep-list li a:active {
         color: #222;
         background-color: #fefefe; }
@@ -2324,7 +2326,7 @@ table tfoot {
       color: #222; }
 
 .pep-type, .pep-num, .pep-title, .pep-owner {
-  padding: .5em .5em .4em;
+  padding: 0.5em 0.5em 0.4em;
   border-bottom: 1px solid #e3e7ec; }
 
 .footnote .label {
@@ -2334,7 +2336,7 @@ table tfoot {
 .info-key dt, .info-key dd {
   display: block;
   float: left;
-  padding: .5em .5em .4em; }
+  padding: 0.5em 0.5em 0.4em; }
 .info-key dt {
   width: 25%; }
 .info-key dd {
@@ -2352,14 +2354,14 @@ table tfoot {
         </li>
     </ul> */
 .pep-owner-header {
-  margin: 0 -.5em;
+  margin: 0 -0.5em;
   overflow: hidden;
   *zoom: 1; }
   .pep-owner-header .label {
     font-family: SourceSansProBold, Arial, sans-serif;
     float: left;
     width: 50%;
-    padding: .25em .5em .2em; }
+    padding: 0.25em 0.5em 0.2em; }
 
 .pep-owner-list li {
   background-color: #f2f4f6;
@@ -2371,7 +2373,7 @@ table tfoot {
 .pep-owner-list .owner-name, .pep-owner-list .owner-email {
   float: left;
   width: 50%;
-  padding: .5em .5em .4em; }
+  padding: 0.5em 0.5em 0.4em; }
 
 /* ! ===== Success Stories landing page ===== */
 .featured-success-story {
@@ -2498,7 +2500,7 @@ p.quote-by-organization {
   /* resets as this is an H3 element and it behaves differently */
   margin-top: .75em;
   margin-bottom: 1.25em;
-  padding: .5em .75em; }
+  padding: 0.5em 0.75em; }
 
 .event-description {
   padding: 1.3125em 0; }
@@ -2519,7 +2521,7 @@ p.quote-by-organization {
   -moz-border-radius: 0 0 8px 8px;
   -webkit-border-radius: 0;
   border-radius: 0 0 8px 8px;
-  padding: .75em 1em; }
+  padding: 0.75em 1em; }
 
 /*ul*/
 .twitter-stream li {
@@ -2550,7 +2552,7 @@ p.quote-by-organization {
     color: #666;
     font-size: 0.875em;
     vertical-align: baseline;
-    padding: .2em .4em .1em;
+    padding: 0.2em 0.4em 0.1em;
     background-color: #e6e8ea;
     border-top: 1px solid #f2f4f6;
     border-bottom: 1px solid #caccce; }
@@ -2573,13 +2575,13 @@ p.quote-by-organization {
 /* ! ===== Stylized lists of items, used on Downloads and others ===== */
 .list-row-headings {
   font-family: SourceSansProBold, Arial, sans-serif;
-  padding: .5em .5em .4em .75em;
+  padding: 0.5em 0.5em 0.4em 0.75em;
   margin-right: 1.25em; }
 
 .list-row-container {
   border: 1px solid #caccce; }
   .list-row-container li {
-    padding: .5em .5em .4em .75em;
+    padding: 0.5em 0.5em 0.4em 0.75em;
     margin-right: 0; }
     .list-row-container li:nth-child(odd) {
       background-color: #f2f4f6; }
@@ -2644,7 +2646,7 @@ p.quote-by-organization {
   .previous-next .prev-button,
   .previous-next .next-button {
     display: block;
-    padding: .5em .75em .4em;
+    padding: 0.5em 0.75em 0.4em;
     margin-bottom: 0.875em; }
     .previous-next .prev-button:not(.disabled):hover, .previous-next .prev-button:not(.disabled):focus,
     .previous-next .next-button:not(.disabled):hover,
@@ -2728,7 +2730,7 @@ p.quote-by-organization {
         <p role="alert">Can’t find what you’re looking for? <a href="#">Try our comprehensive Help section</a></p>
     </div>*/
 .user-feedback {
-  padding: .75em 1em .65em;
+  padding: 0.75em 1em 0.65em;
   margin-bottom: 1.3125em;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
@@ -2789,7 +2791,7 @@ p.quote-by-organization {
   font-size: 0.58333em;
   text-transform: uppercase;
   letter-spacing: .0625em;
-  padding: .45em .5em 0;
+  padding: 0.45em 0.5em 0;
   margin-right: .25em; }
 .listing-company .listing-removed {
   display: inline-block;
@@ -2832,7 +2834,7 @@ p.quote-by-organization {
 
 /* ! ===== Inner pages ===== */
 .breadcrumbs {
-  padding: .5em 0;
+  padding: 0.5em 0;
   border-bottom: 1px solid #caccce; }
   .breadcrumbs li {
     display: -moz-inline-stack;
@@ -2856,7 +2858,7 @@ p.quote-by-organization {
 
 .section-nav a {
   display: block;
-  padding: .3em 0 .2em; }
+  padding: 0.3em 0 0.2em; }
 
 .psf-sidebar-widget {
   color: #f2f4f6;
@@ -2930,7 +2932,7 @@ p.quote-by-organization {
 
 .psf-codeofconduct {
   font-size: 0.875em;
-  padding: .5em 1em;
+  padding: 0.5em 1em;
   margin-bottom: 1em;
   background-color: #fff;
   -moz-box-shadow: 0.25em 0.25em 0.75em rgba(0, 0, 0, 0.15);
@@ -2957,23 +2959,23 @@ p.quote-by-organization {
 .main-footer .jump-link, .sitemap a, .footer-links a {
   display: block;
   text-align: center;
-  padding: .5em .75em .4em; }
+  padding: 0.5em 0.75em 0.4em; }
 
 .main-footer {
   clear: both;
   color: #666;
   background-color: #e6e8ea;
   border-top: 1px solid #d8dbde; }
   .main-footer .container {
-    padding: 0 .75em .75em; }
+    padding: 0 0.75em 0.75em; }
   .main-footer a {
     color: #666; }
     .main-footer a:hover, .main-footer a:focus {
       color: #444; }
   .main-footer .jump-link {
     background-color: #e0e3e5; }
   .main-footer a.jump-link {
-    margin: .75em 0;
+    margin: 0.75em 0;
     border-top: 1px solid #e6e8ea;
     border-bottom: 1px solid #dbdee1; }
     .main-footer a.jump-link:hover, .main-footer a.jump-link:focus {
@@ -2987,7 +2989,7 @@ p.quote-by-organization {
     margin-bottom: 1.3125em; }
     .sitemap .tier-1 > a {
       color: #3776ab;
-      padding: .4em .5em .3em;
+      padding: 0.4em 0.5em 0.3em;
       font-family: Flux-Bold, SourceSansProBold, Arial, sans-serif;
       font-size: 1.25em;
       margin-top: 0.875em;
@@ -3184,7 +3186,7 @@ span.highlighted {
     background-color: #fff; }
   .touch .flex-control-nav a {
     /* Larger touch target */
-    padding: .5em .75em; }
+    padding: 0.5em 0.75em; }
 
 /*<ul class="flex-direction-nav">
     <li>
@@ -3236,7 +3238,7 @@ span.highlighted {
     display: none; } }
 /* ! ==== No JS warning message... more of a suggestion, really ==== */
 #nojs, #oldie-warning {
-  padding: .75em .75em .65em;
+  padding: 0.75em 0.75em 0.65em;
   text-align: center;
   background-color: #c33; }
   #nojs p, #oldie-warning p {