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

Timestamp:

02/14/2018 11:59:53 PM (7 years ago)

Author:

obenland

Message:

Main: Use updated & optimized freedom graphics

Props cathibosco1, mapk.
See #3046.
Fixes #3372.

File:

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

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

@@ -158 +158 @@
 
     .freedoms {
+        margin-top: 2rem;
         text-align: center;
+
+        .graphic {
+            background: url( '/wp-content/themes/pub/wporg-main/images/freedoms.png' ) no-repeat; // TODO: CDN
+            background-size: 100%;
+            padding-top: 100%;
+
+            @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
+                background-image: url( '/wp-content/themes/pub/wporg-main/images/freedoms-2x.png' ); // TODO: CDN
+            }
+        }
+
+        @include breakpoint( 0, 479px ) {
+            .graphic {
+                float: left;
+                margin: 0 1rem 1rem 0;
+                padding-top: 25%;
+                width: 25%;
+            }
+
+            h4, p {
+                clear: none;
+                margin-top: 0;
+                text-align: left;
+            }
+        }
+
+        @include breakpoint( 480px, 767px ) {
+            &.row {
+                flex-direction: row;
+                flex-wrap: wrap;
+            }
+            .col-3 {
+                width: calc( 50% - #{$grid-gutter} );
+            }
+        }
+
+        [class*="col-"]:nth-of-type(2) .graphic {
+            background-position: 0 34%;
+        }
+
+        [class*="col-"]:nth-of-type(3) .graphic {
+            background-position: 0 66%;
+        }
+
+        [class*="col-"]:nth-of-type(4) .graphic {
+            background-position: 0 100%;
+        }
 
         h4 {