Changeset 5969 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg/css/components/_posts-navigation.scss

Timestamp:

09/27/2017 09:27:52 PM (7 years ago)

Author:

obenland

Message:

Main: Improve mobile styles for blog

Includes a clever way to avoid having the posts navigation wrap on two lines.

See #2861.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg/css/components/_posts-navigation.scss (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg/css/components/_posts-navigation.scss

@@ -4 +4 @@
     .page-numbers {
         background-color: #f9f9f9;
+        cursor: hand;
+        display: inline-block;
         min-width: 2em;
         padding: 8px;
-        display: inline-block;
-        cursor: hand;
 
         &.next,
         &.prev,
         &.dots {
+            background: none;
+            font-size: 0.9em;
             width: auto;
-            font-size: 0.9em;
-            background: none;
         }
         &.dots {
             cursor: inherit;
         }
+
+        @media screen and (max-width: $ms-breakpoint) {
+            &.prev,
+            &.next {
+                font-size: 0;
+                min-width: initial;
+                padding: 0;
+            }
+
+            &.prev:before,
+            &.next:after {
+                background-color: #f9f9f9;
+                display: inline-block;
+                font-size: ms( 0 );
+                line-height: 1.5;
+                min-width: 2em;
+                padding: 8px;
+            }
+
+            &.prev:before {
+                content: '\2039'; /* ‹ */
+            }
+
+            &.next:after {
+                content: '\203A'; /* › */
+            }
+        }
     }
     span.page-numbers {
+        background-color: #f7f7f7;
         font-weight: bold;
-        background-color: #f7f7f7;
     }
 }