Changeset 38996

Timestamp:

10/28/2016 05:37:50 PM (8 years 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:

• assets/css/colors-dark.css (modified) (4 diffs)
• inc/color-patterns.php (modified) (3 diffs)
• style.css (modified) (9 diffs)

trunk/src/wp-content/themes/twentyseventeen/assets/css/colors-dark.css

@@ -52 +52 @@
 .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,
@@ -103 +107 @@
 .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,
@@ -461 +465 @@
 .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,
@@ -502 +507 @@
 .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;

trunk/src/wp-content/themes/twentyseventeen/inc/color-patterns.php

@@ -71 +71 @@
 .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,
@@ -181 +185 @@
 .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,
@@ -478 +482 @@
 .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;

trunk/src/wp-content/themes/twentyseventeen/style.css

@@ -1211 +1211 @@
 a .nav-title,
 .pagination a,
+.comments-pagination a,
 .site-info a,
 .widget .widget-title a,
@@ -1257 +1258 @@
 .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,
@@ -1361 +1366 @@
 .main-navigation > div > ul {
     border-top: 1px solid #eee;
-    padding: 0.75em 3.375em;
+    padding: 0.75em 1.695em;
 }
 
@@ -1530 +1535 @@
     margin-right: auto;
     max-width: 700px;
-    padding-left: 3em;
-    padding-right: 3em;
+    padding-left: 2em;
+    padding-right: 2em;
 }
 
@@ -1903 +1908 @@
 
 .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;
 }
 
@@ -1915 +1930 @@
     -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;
 }
@@ -3163 +3178 @@
     }
 
+    .page-numbers.current {
+        font-size: 16px;
+        font-size: 1rem;
+    }
 
     /* Site Footer */
@@ -3218 +3237 @@
     .wrap {
         max-width: 1000px;
+        padding-left: 3em;
+        padding-right: 3em;
     }
 
@@ -3928 +3949 @@
         top: 0.75em;
         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;
     }