WordPress.org

Making WordPress.org

Changeset 2221


Ignore:
Timestamp:
12/21/2015 10:01:12 PM (4 years ago)
Author:
coffee2code
Message:

W.org P2 child theme:: Move 'Skip to content' a11y link higher up on page and provide styling.

Adds .skip-link styles from Twenty Sixteen, giving the link visual styling and making it visible on focus.

Fixes #1482, #1484.
Props SergeyBiryukov.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-p2
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-p2/header.php

    r2045 r2221  
    55?>
    66<div id="headline">
     7        <a class="assistive-text skip-link" href="#main"><?php _e( 'Skip to content', 'p2' ); ?></a>
    78        <div class="wrapper">
    89                <h2><a href="<?php echo home_url( '/' ); ?>"><?php bloginfo( 'name' ); ?></a></h2>
     
    1617    <div role="navigation" class="site-navigation main-navigation">
    1718        <h1 class="assistive-text"><?php _e( 'Menu', 'p2' ); ?></h1>
    18         <div class="assistive-text skip-link"><a href="#main" title="<?php esc_attr_e( 'Skip to content', 'p2' ); ?>"><?php _e( 'Skip to content', 'p2' ); ?></a></div>
    1919
    2020        <?php wp_nav_menu( array(
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-p2/style.css

    r1923 r2221  
    364364    }
    365365}
     366
     367.skip-link {
     368    background-color: #f1f1f1;
     369    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
     370    color: #21759b;
     371    display: block;
     372    font-size: 14px;
     373    font-weight: 700;
     374    left: -9999em;
     375    outline: none;
     376    padding: 15px 23px 14px;
     377    text-decoration: none;
     378    text-transform: none;
     379    top: -9999em;
     380}
     381
     382.skip-link:focus {
     383    clip: auto;
     384    height: auto;
     385    left: 6px;
     386    top: 7px;
     387    width: auto;
     388    z-index: 100000;
     389}
     390
    366391/* Header design */
    367392#headline {
    368393    height: auto;
    369394    overflow: hidden;
     395    position: relative;
    370396}
    371397#headline h2 {
Note: See TracChangeset for help on using the changeset viewer.