Changeset 6606 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-main/css/components/_about.scss

Timestamp:

02/12/2018 07:30:28 PM (8 years ago)

Author:

obenland

Message:

Main: Update responsive shape styles

See #3046.

File:

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

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

@@ -2 +2 @@
 body.page-template-about {
     .entry-header {
-        padding: ms(4) ms(1);
+        padding: ms( 4 ) ms( 1 );
         text-align: center;
 
         .entry-title {
-            font-size: ms( 8 );
+            font-size: ms( 11 );
             font-weight: 100;
-            letter-spacing: 0.04rem;
             line-height: inherit;
             margin: 1rem auto;
@@ -15 +14 @@
         .entry-description {
             color: rgba( 255, 255, 255, 0.8);
-            font-size: ms( 0 );
+            font-size: ms( 4 );
             margin-top: -0.4rem;
         }
@@ -22 +21 @@
     .entry-content {
         overflow: hidden;
+
+        @include breakpoint( 640px ) {
+            overflow: initial;
+        }
     }
 
-    .shape {
-        height: 250px;
-        margin: 0 auto;
-        opacity: 0.9;
+    .shapes {
+        height: 480px;
+        margin: 4rem 0;
         position: relative;
-        text-align: center;
-        transform: skew(-15deg);
-        width: 300px;
 
-        &.community {
-            background-color: #685692;
-            bottom: 50px;
-            margin-right: -5%;
-        }
-
-        &.technology {
-            background-color: #027bb4;
-            margin-left: -5%;
-            top: 50px;
-        }
-
-        .dashicons-before {
+        .shape {
             color: #fff;
             display: block;
-            position: relative;
-            top: 30%;
+            height: 260px;
+            margin: 0 auto;
+            opacity: 0.9;
+            padding: 4.2rem 0;
+            position: absolute;
+            text-align: center;
+            transform: skew( -15deg) ;
+            width: 310px;
 
             &:before {
                 font-size: ms( 12 );
                 height: 64px;
-                transform: skew(15deg);
+                transform: skew( 15deg );
                 width: 64px;
+            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                text-decoration: none;
+            }
+
+            &.technology {
+                background-color: darken( #0073aa, 2% );
+                top: 0;
+                left: 0;
+                z-index: 1;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: darken( #0073aa, 12% );;
+                }
+            }
+
+            &.community {
+                background-color: #67598e;
+                right: 0;
+                bottom: 0;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: darken( #67598e, 10% );
+                }
+            }
+
+            h3, p {
+                margin: 0;
+                transform: skew( 15deg );
             }
         }
 
-        h3, p {
-            margin: 0;
-            transform: skew(15deg);
+        @include breakpoint( 480px ) {
+            height: 610px;
+
+            .shape {
+                height: 336px;
+                padding: 6.555rem 0;
+                width: 400px;
+            }
+        }
+
+        @include breakpoint( 640px ) {
+            height: 580px;
+
+            .shape {
+                height: 315px;
+                padding: 4.5rem 0;
+                width: 480px;
+
+                &:before {
+                    font-size: ms( 14 );
+                    height: 84px;
+                    width: 84px;
+                }
+            }
+        }
+
+        @include breakpoint( 768px ) {
+            height: 323px;
+            margin: 4rem 0;
+
+            .shape {
+                height: 282px;
+                padding: 3.55rem 0;
+                width: 430px;
+
+                &.technology {
+                    left: auto;
+                    right: 45%;
+                    top: 40px;
+                }
+
+                &.community {
+                    bottom: auto;
+                    left: 45%;
+                }
+            }
+        }
+
+        @include breakpoint( 1024px ) {
+            height: 420px;
+
+            .shape {
+                height: 380px;
+                padding: 5.66rem 0;
+                width: 580px;
+
+                &.technology {
+                    right: 43%;
+                }
+
+                &.community {
+                    left: 43%;
+                }
+
+                &:before {
+                    font-size: ms( 16 );
+                    height: 108px;
+                    width: 108px;
+                }
+            }
+        }
+    }
+
+    .freedoms {
+        text-align: center;
+
+        h4 {
+            font-weight: 300;
         }
     }