Changeset 5998 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/components/_home-welcome.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/_home-welcome.scss (modified) (7 diffs)

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

@@ -9 +9 @@
         padding: 0;
 
-        @media (min-width: 737px) {
+        @include breakpoint( $ms-breakpoint ) {
                 font-size: 18px;
         }
@@ -51 +51 @@
                 margin: 0 auto;
                 max-width: 50rem;
-                padding: 3.05176rem 1.5625rem;
+                padding: ms( 10 ) ms( 4 );
 
                 &:last-of-type {
@@ -103 +103 @@
                                 width: 50%;
 
-                                @media (max-width: 739px) {
+                        @include breakpoint( 739px ) {
                                         &:nth-child(n+7) {
                                                 border-bottom: none;
@@ -112 +112 @@
                                 }
 
-                                @media (min-width: 740px) {
+                                @include breakpoint( 740px ) {
                                         width: 25%;
                                         height: 200px;
@@ -182 +182 @@
                 text-align: center;
 
-                @media (min-width: 737px) {
+                @include breakpoint( $ms-breakpoint ) {
                         font-size: .8rem;
                         margin: 4rem 0 2rem;
@@ -269 +269 @@
 
 
-        @media (min-width: 67rem) {
+        @include breakpoint( 67rem ) {
                 margin: 1rem auto 0;
                 max-width: 50rem;
@@ -277 +277 @@
 #home-below {
         margin-bottom: 14px;
+        padding: 0 ms( 1 );
+
+
+        @include breakpoint( sm ) {
+                display: block;
+
+                .col-2 {
+                        display: inline-block;
+                        vertical-align: top;
+                        width: calc( 50% - #{$grid-gutter} );
+                }
+        }
 
         h4 {