From 3cb436603a200334b8f2127e1b3611ae0bb2a53c Mon Sep 17 00:00:00 2001 From: "David A. Kennedy" Date: Fri, 28 Oct 2016 17:37:50 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@38996 602fd350-edb4-49c9-b593-d223f7449a82 --- .../assets/css/colors-dark.css | 19 +++---- .../twentyseventeen/inc/color-patterns.php | 18 +++---- .../themes/twentyseventeen/style.css | 50 +++++++++++++++++-- 3 files changed, 64 insertions(+), 23 deletions(-) diff --git a/src/wp-content/themes/twentyseventeen/assets/css/colors-dark.css b/src/wp-content/themes/twentyseventeen/assets/css/colors-dark.css index 8d4e5f1681..7b747a821b 100644 --- a/src/wp-content/themes/twentyseventeen/assets/css/colors-dark.css +++ b/src/wp-content/themes/twentyseventeen/assets/css/colors-dark.css @@ -51,6 +51,10 @@ .colors-dark .entry-footer .tags-links a:hover, .colors-dark .post-navigation a:focus, .colors-dark .post-navigation a:hover, +.colors-dark .pagination a:not(.prev):not(.next):focus, +.colors-dark .pagination a:not(.prev):not(.next):hover, +.colors-dark .comments-pagination a:not(.prev):not(.next):focus, +.colors-dark .comments-pagination a:not(.prev):not(.next):hover, .colors-dark .logged-in-as a:focus, .colors-dark .logged-in-as a:hover, .colors-dark a:focus .nav-title, @@ -102,10 +106,10 @@ .colors-dark .entry-footer .tags-links a:hover, .colors-dark .post-navigation a:focus, .colors-dark .post-navigation a:hover, -.colors-dark .pagination a:focus, -.colors-dark .pagination a:hover, -.colors-dark .comments-pagination a:focus, -.colors-dark .comments-pagination a:hover, +.colors-dark .pagination a:not(.prev):not(.next):focus, +.colors-dark .pagination a:not(.prev):not(.next):hover, +.colors-dark .comments-pagination a:not(.prev):not(.next):focus, +.colors-dark .comments-pagination a:not(.prev):not(.next):hover, .colors-dark .logged-in-as a:focus, .colors-dark .logged-in-as a:hover, .colors-dark a:focus .nav-title, @@ -460,6 +464,7 @@ body.colors-dark, .colors-dark .comment-reply-link, .colors-dark a .nav-title, .colors-dark .pagination a, +.colors-dark .comments-pagination a, .colors-dark .widget .widget-title a, .colors-dark .widget ul li a, .colors-dark .site-footer .widget-area ul li a, @@ -501,11 +506,7 @@ body.colors-dark, .colors-dark .wp_widget_tag_cloud a:focus, .colors-dark .wp_widget_tag_cloud a:hover, .colors-dark .entry-footer .edit-link a.post-edit-link:focus, -.colors-dark .entry-footer .edit-link a.post-edit-link:hover, -.colors-dark .prev.page-numbers:focus, -.colors-dark .prev.page-numbers:hover, -.colors-dark .next.page-numbers:focus, -.colors-dark .next.page-numbers:hover { +.colors-dark .entry-footer .edit-link a.post-edit-link:hover { -webkit-box-shadow: none; box-shadow: none; } diff --git a/src/wp-content/themes/twentyseventeen/inc/color-patterns.php b/src/wp-content/themes/twentyseventeen/inc/color-patterns.php index 6afccc1f7e..876d0e56fd 100644 --- a/src/wp-content/themes/twentyseventeen/inc/color-patterns.php +++ b/src/wp-content/themes/twentyseventeen/inc/color-patterns.php @@ -70,6 +70,10 @@ function twentyseventeen_custom_colors_css() { .colors-custom .entry-footer .tags-links a:hover, .colors-custom .post-navigation a:focus, .colors-custom .post-navigation a:hover, +.colors-custom .pagination a:not(.prev):not(.next):focus, +.colors-custom .pagination a:not(.prev):not(.next):hover, +.colors-custom .comments-pagination a:not(.prev):not(.next):focus, +.colors-custom .comments-pagination a:not(.prev):not(.next):hover, .colors-custom .logged-in-as a:focus, .colors-custom .logged-in-as a:hover, .colors-custom a:focus .nav-title, @@ -180,10 +184,10 @@ function twentyseventeen_custom_colors_css() { .colors-custom .entry-footer .tags-links a:hover, .colors-custom .post-navigation a:focus, .colors-custom .post-navigation a:hover, -.colors-custom .pagination a:focus, -.colors-custom .pagination a:hover, -.colors-custom .comments-pagination a:focus, -.colors-custom .comments-pagination a:hover, +.colors-custom .pagination a:not(.prev):not(.next):focus, +.colors-custom .pagination a:not(.prev):not(.next):hover, +.colors-custom .comments-pagination a:not(.prev):not(.next):focus, +.colors-custom .comments-pagination a:not(.prev):not(.next):hover, .colors-custom .logged-in-as a:focus, .colors-custom .logged-in-as a:hover, .colors-custom a:focus .nav-title, @@ -477,11 +481,7 @@ body.colors-custom, .colors-custom .wp_widget_tag_cloud a:focus, .colors-custom .wp_widget_tag_cloud a:hover, .colors-custom .entry-footer .edit-link a.post-edit-link:focus, -.colors-custom .entry-footer .edit-link a.post-edit-link:hover, -.colors-custom .prev.page-numbers:focus, -.colors-custom .prev.page-numbers:hover, -.colors-custom .next.page-numbers:focus, -.colors-custom .next.page-numbers:hover { +.colors-custom .entry-footer .edit-link a.post-edit-link:hover { -webkit-box-shadow: none !important; box-shadow: none !important; } diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css index 5aff5c02e0..6ce0025a8c 100644 --- a/src/wp-content/themes/twentyseventeen/style.css +++ b/src/wp-content/themes/twentyseventeen/style.css @@ -1210,6 +1210,7 @@ a:active { .comment-reply-link, a .nav-title, .pagination a, +.comments-pagination a, .site-info a, .widget .widget-title a, .widget ul li a, @@ -1256,6 +1257,10 @@ a .nav-title, .entry-footer .tags-links a:hover, .post-navigation a:focus, .post-navigation a:hover, +.pagination a:not(.prev):not(.next):focus, +.pagination a:not(.prev):not(.next):hover, +.comments-pagination a:not(.prev):not(.next):focus, +.comments-pagination a:not(.prev):not(.next):hover, .logged-in-as a:focus, .logged-in-as a:hover, a:focus .nav-title, @@ -1360,7 +1365,7 @@ a:hover .nav-title, .main-navigation > div > ul { border-top: 1px solid #eee; - padding: 0.75em 3.375em; + padding: 0.75em 1.695em; } .js .main-navigation.toggled-on > div > ul { @@ -1529,8 +1534,8 @@ body { margin-left: auto; margin-right: auto; max-width: 700px; - padding-left: 3em; - padding-right: 3em; + padding-left: 2em; + padding-right: 2em; } .wrap:after { @@ -1902,11 +1907,21 @@ body.page:not(.twentyseventeen-front-page) .entry-title { } .page-numbers { - padding: 0.5em 1em; + display: none; + padding: 0.5em 0.75em; } .page-numbers.current { color: #767676; + display: inline-block; +} + +.page-numbers.current .screen-reader-text { + clip: auto; + height: auto; + overflow: auto; + position: relative !important; + width: auto; } .prev.page-numbers, @@ -1914,10 +1929,10 @@ body.page:not(.twentyseventeen-front-page) .entry-title { background-color: #ddd; -webkit-border-radius: 2px; border-radius: 2px; + display: inline-block; font-size: 24px; font-size: 1.5rem; line-height: 1; - margin-top: -0.3em; padding: 0.25em 0.5em 0.4em; } @@ -3162,6 +3177,10 @@ object { font-size: 0.875rem; } + .page-numbers.current { + font-size: 16px; + font-size: 1rem; + } /* Site Footer */ @@ -3217,6 +3236,8 @@ object { .wrap { max-width: 1000px; + padding-left: 3em; + padding-right: 3em; } .has-sidebar:not(.error404) #primary { @@ -3929,6 +3950,25 @@ object { width: 32px; } + /* Pagination */ + + .page-numbers { + display: inline-block; + } + + .page-numbers.current { + font-size: 15px; + font-size: 0.9375rem; + } + + .page-numbers.current .screen-reader-text { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute !important; + width: 1px; + } + /* Comments */ .comment-body {