WordPress.org

Make WordPress Core

Changeset 38996


Ignore:
Timestamp:
10/28/2016 05:37:50 PM (21 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.