WordPress.org

Make WordPress Core

Changeset 38996


Ignore:
Timestamp:
10/28/16 17:37:50 (11 months ago)
Author:
davidakennedy
Message:

Twenty Seventeen: Fix broken and crowded pagination navigation on small screens

  • Hides page numbers visually at smaller screen sizes.
  • Reduced padding around .wrap class on smaller screens.
  • Fixed issue with the page numbers not displaying the underline on :hover. This has been updated in the custom colors files, too.

Props laurelfulford, caspie.

Fixes #38394.

Location:
trunk/src/wp-content/themes/twentyseventeen
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyseventeen/assets/css/colors-dark.css

    r38987 r38996  
    5252.colors-dark .post-navigation a:focus, 
    5353.colors-dark .post-navigation a:hover, 
     54.colors-dark .pagination a:not(.prev):not(.next):focus, 
     55.colors-dark .pagination a:not(.prev):not(.next):hover, 
     56.colors-dark .comments-pagination a:not(.prev):not(.next):focus, 
     57.colors-dark .comments-pagination a:not(.prev):not(.next):hover, 
    5458.colors-dark .logged-in-as a:focus, 
    5559.colors-dark .logged-in-as a:hover, 
     
    103107.colors-dark .post-navigation a:focus, 
    104108.colors-dark .post-navigation a:hover, 
    105 .colors-dark .pagination a:focus, 
    106 .colors-dark .pagination a:hover, 
    107 .colors-dark .comments-pagination a:focus, 
    108 .colors-dark .comments-pagination a:hover, 
     109.colors-dark .pagination a:not(.prev):not(.next):focus, 
     110.colors-dark .pagination a:not(.prev):not(.next):hover, 
     111.colors-dark .comments-pagination a:not(.prev):not(.next):focus, 
     112.colors-dark .comments-pagination a:not(.prev):not(.next):hover, 
    109113.colors-dark .logged-in-as a:focus, 
    110114.colors-dark .logged-in-as a:hover, 
     
    461465.colors-dark a .nav-title, 
    462466.colors-dark .pagination a, 
     467.colors-dark .comments-pagination a, 
    463468.colors-dark .widget .widget-title a, 
    464469.colors-dark .widget ul li a, 
     
    502507.colors-dark .wp_widget_tag_cloud a:hover, 
    503508.colors-dark .entry-footer .edit-link a.post-edit-link:focus, 
    504 .colors-dark .entry-footer .edit-link a.post-edit-link:hover, 
    505 .colors-dark .prev.page-numbers:focus, 
    506 .colors-dark .prev.page-numbers:hover, 
    507 .colors-dark .next.page-numbers:focus, 
    508 .colors-dark .next.page-numbers:hover { 
     509.colors-dark .entry-footer .edit-link a.post-edit-link:hover { 
    509510    -webkit-box-shadow: none; 
    510511    box-shadow: none; 
  • trunk/src/wp-content/themes/twentyseventeen/inc/color-patterns.php

    r38986 r38996  
    7171.colors-custom .post-navigation a:focus, 
    7272.colors-custom .post-navigation a:hover, 
     73.colors-custom .pagination a:not(.prev):not(.next):focus, 
     74.colors-custom .pagination a:not(.prev):not(.next):hover, 
     75.colors-custom .comments-pagination a:not(.prev):not(.next):focus, 
     76.colors-custom .comments-pagination a:not(.prev):not(.next):hover, 
    7377.colors-custom .logged-in-as a:focus, 
    7478.colors-custom .logged-in-as a:hover, 
     
    181185.colors-custom .post-navigation a:focus, 
    182186.colors-custom .post-navigation a:hover, 
    183 .colors-custom .pagination a:focus, 
    184 .colors-custom .pagination a:hover, 
    185 .colors-custom .comments-pagination a:focus, 
    186 .colors-custom .comments-pagination a:hover, 
     187.colors-custom .pagination a:not(.prev):not(.next):focus, 
     188.colors-custom .pagination a:not(.prev):not(.next):hover, 
     189.colors-custom .comments-pagination a:not(.prev):not(.next):focus, 
     190.colors-custom .comments-pagination a:not(.prev):not(.next):hover, 
    187191.colors-custom .logged-in-as a:focus, 
    188192.colors-custom .logged-in-as a:hover, 
     
    478482.colors-custom .wp_widget_tag_cloud a:hover, 
    479483.colors-custom .entry-footer .edit-link a.post-edit-link:focus, 
    480 .colors-custom .entry-footer .edit-link a.post-edit-link:hover, 
    481 .colors-custom .prev.page-numbers:focus, 
    482 .colors-custom .prev.page-numbers:hover, 
    483 .colors-custom .next.page-numbers:focus, 
    484 .colors-custom .next.page-numbers:hover { 
     484.colors-custom .entry-footer .edit-link a.post-edit-link:hover { 
    485485    -webkit-box-shadow: none !important; 
    486486    box-shadow: none !important; 
  • trunk/src/wp-content/themes/twentyseventeen/style.css

    r38988 r38996  
    12111211a .nav-title, 
    12121212.pagination a, 
     1213.comments-pagination a, 
    12131214.site-info a, 
    12141215.widget .widget-title a, 
     
    12571258.post-navigation a:focus, 
    12581259.post-navigation a:hover, 
     1260.pagination a:not(.prev):not(.next):focus, 
     1261.pagination a:not(.prev):not(.next):hover, 
     1262.comments-pagination a:not(.prev):not(.next):focus, 
     1263.comments-pagination a:not(.prev):not(.next):hover, 
    12591264.logged-in-as a:focus, 
    12601265.logged-in-as a:hover, 
     
    13611366.main-navigation > div > ul { 
    13621367    border-top: 1px solid #eee; 
    1363     padding: 0.75em 3.375em; 
     1368    padding: 0.75em 1.695em; 
    13641369} 
    13651370 
     
    15301535    margin-right: auto; 
    15311536    max-width: 700px; 
    1532     padding-left: 3em; 
    1533     padding-right: 3em; 
     1537    padding-left: 2em; 
     1538    padding-right: 2em; 
    15341539} 
    15351540 
     
    19031908 
    19041909.page-numbers { 
    1905     padding: 0.5em 1em; 
     1910    display: none; 
     1911    padding: 0.5em 0.75em; 
    19061912} 
    19071913 
    19081914.page-numbers.current { 
    19091915    color: #767676; 
     1916    display: inline-block; 
     1917} 
     1918 
     1919.page-numbers.current .screen-reader-text { 
     1920    clip: auto; 
     1921    height: auto; 
     1922    overflow: auto; 
     1923    position: relative !important; 
     1924    width: auto; 
    19101925} 
    19111926 
     
    19151930    -webkit-border-radius: 2px; 
    19161931    border-radius: 2px; 
     1932    display: inline-block; 
    19171933    font-size: 24px; 
    19181934    font-size: 1.5rem; 
    19191935    line-height: 1; 
    1920     margin-top: -0.3em; 
    19211936    padding: 0.25em 0.5em 0.4em; 
    19221937} 
     
    31633178    } 
    31643179 
     3180    .page-numbers.current { 
     3181        font-size: 16px; 
     3182        font-size: 1rem; 
     3183    } 
    31653184 
    31663185    /* Site Footer */ 
     
    32183237    .wrap { 
    32193238        max-width: 1000px; 
     3239        padding-left: 3em; 
     3240        padding-right: 3em; 
    32203241    } 
    32213242 
     
    39283949        top: 0.75em; 
    39293950        width: 32px; 
     3951    } 
     3952 
     3953    /* Pagination */ 
     3954 
     3955    .page-numbers { 
     3956        display: inline-block; 
     3957    } 
     3958 
     3959    .page-numbers.current { 
     3960        font-size: 15px; 
     3961        font-size: 0.9375rem; 
     3962    } 
     3963 
     3964    .page-numbers.current .screen-reader-text { 
     3965        clip: rect(1px, 1px, 1px, 1px); 
     3966        height: 1px; 
     3967        overflow: hidden; 
     3968        position: absolute !important; 
     3969        width: 1px; 
    39303970    } 
    39313971 
Note: See TracChangeset for help on using the changeset viewer.