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 (7 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 {