Changeset 5998 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/components/_template-get.scss

Timestamp:

10/04/2017 06:38:13 PM (9 years ago)

Author:

obenland

Message:

Main: Introduce cube grid to manage small sceens

Adds a comfortable way to manage page structure and widget arrangement on small
screens.

See #2861.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/components/_template-get.scss (modified) (6 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/components/_template-get.scss

@@ -1 +1 @@
 .page-template-get {
         .site-header {
-                padding: ms(4) ms(1);
+                padding: ms( 4 ) ms( 1 );
                 text-align: center;
         }
@@ -12 +12 @@
 
         section {
-                padding: ms(10) ms(4);
+                padding: ms( 10 ) ms( 4 );
         }
 
@@ -18 +18 @@
                 text-align: center;
 
-                @media (min-width: $ms-breakpoint) {
+                @include breakpoint( $ms-breakpoint ) {
                         .container {
                                 text-align: initial;
@@ -60 +60 @@
                                 > div {
                                         float: left;
-                                        font-size: ms(-2);
+                                        font-size: ms( -2 );
                                         margin-right: 5%;
                                         width: 30%;
@@ -87 +87 @@
                         }
 
-                        @media (min-width: $ms-breakpoint) {
+                        @include breakpoint( $ms-breakpoint ) {
                                 margin: 4rem auto 0;
                         }
@@ -109 +109 @@
                 margin: 2rem 0 2rem;
 
-                @media (min-width: $ms-breakpoint) {
-                        font-size: ms(-2);
+                @include breakpoint( $ms-breakpoint ) {
+                        font-size: ms( -2 );
                         margin: 4rem 0 2rem;
                 }