Changeset 43892 for branches/5.0/src/wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss

Timestamp:

11/12/2018 11:19:13 PM (6 years ago)

Author:

allancole

Message:

Updating Twenty Nineteen, our new default theme for 2019, set for 5.0.

This update applies the following changes:

• Improve menu UI to support keyboard, click and touch interactions
• Improve variable scoping and js performance in menu interaction javascript
• Improve custom-colors for selected text, buttons and menu hover styles
• Improve margins structure for more consistency between editor and frontend
• Improve discussion avatars for simpler wording and better performance
• Improve fonts in list widgets and list blocks
• Improve comment responsive spacing and avatar display
• Improve various block styles to make them consistent between the editor and frontend
• Add tabbed browsing support for ie11
• Add backwards compatibility support for older versions of WordPress
• Add fallback styles for older versions of WP where Gutenberg is activated and then deactivated (backwards compatibility)
• Add sizes attribute for featured images to improve responsive performance
• Add focus-within polyfill
• Add a footer menu for secondary page links
• Fix editor styles to prevent conflicts with plugins that add meta boxes to the editor
• Fix columns block issues on small screens
• Fix empty-space font text cursor issue in Gutenberg editor
• Fix RTL floating styles so that left/right floats are honored
• Fix cover image block margins/padding
• Fix invalid rgba style
• Fix php warning when returning attributes
• Fix gallery widget margins to improve gallery grids
• Fix .entry-content selectors to prevent shortcodes, plugins and other unknown content from breaking the layout
• Remove translation escaping to follow code standards in previous default themes
• Remove custom color output in the fronten header when default color is selected
• Remove fly-out sub-sub-sub-menu behavior on desktop to prevent sub-menus from falling off the screen
• General code clean up and coding standards improvements

Initial development occurred on GitHub. See: ​https://github.com/WordPress/twentynineteen

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, aaronjorbin, netweb, b-07, khleomix, blowery, dereksmart, jasmussen, audrasjb, nielslange, mmaumio, dimadin, joyously, anevins12, peterwilsoncc, dannycooper, icaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, icaleb, grapplerulrich, ocean90, joshfeck, frankew, abdulwahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, mukeshpanchal27, burhandodhy, crunnells, Ismail-elkorchi, aryaprakasa, @tlxo, @themeroots, @whizbangik, @yingles, @youthkee, @brentswisher, @smy315, @ahmadawais, @desi-developer.

File:

• branches/5.0/src/wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss (modified) (10 diffs)

branches/5.0/src/wp-content/themes/twentynineteen/sass/site/primary/_posts-and-pages.scss

@@ -39 +39 @@
 
         @include media(tablet) {
-            margin: calc(3 * #{ $size__spacing-unit}) calc(2 * (100vw / 12 ) ) $size__spacing-unit;
+            margin: calc(3 * #{ $size__spacing-unit}) $size__site-margins $size__spacing-unit;
         }
     }
@@ -101 +101 @@
 
         @include media(tablet) {
-            margin: $size__spacing-unit calc(2 * (100vw / 12)) calc(3 * #{$size__spacing-unit});
-            max-width: calc(8 * (100vw / 12));
-        }
-
-        @include media(tablet) {
-            max-width: calc(6 * (100vw / 12));
+            margin: $size__spacing-unit $size__site-margins calc(3 * #{$size__spacing-unit});
+            max-width: $size__site-tablet-content;
+        }
+
+        @include media(tablet) {
+            max-width: $size__site-desktop-content;
         }
     }
@@ -115 +115 @@
 
         @include media(tablet) {
-            margin: $size__spacing-unit calc(2 * (100vw / 12));
+            margin: $size__spacing-unit $size__site-margins;
         }
 
@@ -131 +131 @@
             }
         }
-
     }
 
@@ -142 +141 @@
             .post-thumbnail-inner {
                 filter: grayscale(100%);
-                
+
                 &:after {
-                    background: rgba(#000, 0.35);
+                    background: rgba(0, 0, 0, 0.35);
                     content: "";
                     display: block;
@@ -161 +160 @@
             }
 
-            &:before, &:after {
+            &:before,
+            &:after, {
                 position: absolute;
                 display: block;
@@ -172 +172 @@
 
             @include filter-duotone;
-            
+
+        }
+    }
+
+    .entry-content,
+    .entry-summary {
+        max-width: calc(100% - (2 * #{ $size__spacing-unit }));
+        margin: 0 $size__spacing-unit;
+
+        @include media(tablet) {
+            max-width: 80%;
+            margin: 0 10%;
+            padding: 0 60px;
         }
     }
@@ -209 +221 @@
         > iframe[style] {
 
-            margin: 32px $size__spacing-unit !important;
-            max-width: calc(100vw - (2 * #{ $size__spacing-unit })) !important;
+            margin: 32px 0 !important;
+            max-width: 100% !important;
 
             @include media(tablet) {
-                margin: 32px calc(2 * (100vw / 12)) !important;
-                max-width: calc(8 * (100vw / 12)) !important;
+                max-width: $size__site-tablet-content !important;
             }
 
             @include media(desktop) {
-                max-width: calc(6 * (100vw / 12)) !important;
-            }
+                max-width: $size__site-desktop-content !important;
+            }
+        }
+
+        // Page links
+        .page-links a {
+            margin: calc(0.5 * #{$size__spacing-unit});
+            text-decoration: none;
         }
 
@@ -227 +244 @@
 
             @include media(tablet) {
-                max-width: calc(8 * (100vw / 12));
+                max-width: $size__site-tablet-content;
             }
 
             @include media(desktop) {
-                max-width: calc(6 * (100vw / 12));
+                max-width: $size__site-desktop-content;
             }
         }
@@ -240 +257 @@
 
 .author-bio {
-
     margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit $size__spacing-unit;
 
+    @include postContentMaxWidth();
+
     @include media(tablet) {
-        margin: calc(3 * #{$size__spacing-unit}) calc(2 * (100vw / 12));
-        max-width: calc(8 * (100vw / 12));
-    }
-
-    @include media(tablet) {
-        max-width: calc(6 * (100vw / 12));
+        margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
+    }
+
+    @include media(desktop) {
+        margin: calc(3 * #{$size__spacing-unit}) $size__site-margins;
     }