Changeset 48073

Timestamp:

06/17/2020 03:46:47 PM (4 years ago)

Author:

ianbelanger

Message:

Bundled Themes: Twenty Nineteen horizontal rule is very narrow.

Fixes the issue by adding specific styles for the <hr> tag.

Props laurelfulford, nielslange, kjellr, samful, leprincenoir.
Fixes #45912.

Location:

trunk/src/wp-content/themes/twentynineteen

Files:

• sass/blocks/_blocks.scss (modified) (1 diff)
• style-rtl.css (modified) (2 diffs)
• style.css (modified) (2 diffs)

trunk/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss

@@ -684 +684 @@
         max-width: 2.25em;
         text-align: left;
+
+        &:not(.wp-block-separator) {
+            max-width: 100%;
+            @include postContentMaxWidth();
+        }
 
         &.is-style-wide {

trunk/src/wp-content/themes/twentynineteen/style-rtl.css

@@ -2959 +2959 @@
   text-shadow: none;
   padding: calc( .5 * 1rem) 1rem calc( .5 * 1rem) calc( 24px + 1rem);
-  white-space: nowrap;
+  max-width: 20rem;
 }
 
@@ -5638 +5638 @@
   font-weight: bold;
   margin: 0 0 0 0.25em;
+}
+
+@-moz-document url-prefix() {
+  .entry .entry-content .has-drop-cap:not(:focus)::first-letter {
+    margin-top: 0.2em;
+  }
 }
 

trunk/src/wp-content/themes/twentynineteen/style.css

@@ -5653 +5653 @@
 
 @-moz-document url-prefix() {
-  .entry .entry-content .has-drop-cap:not(:focus)::first-letter {
+  .entry .entry-content .has-drop-cap:not(:focus):first-letter {
     margin-top: 0.2em;
   }
@@ -6034 +6034 @@
   /* Remove duplicate rule-line when a separator
          * is followed by an H1, or H2 */
+}
+
+.entry .entry-content .wp-block-separator:not(.wp-block-separator),
+.entry .entry-content hr:not(.wp-block-separator) {
+  max-width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+  .entry .entry-content .wp-block-separator:not(.wp-block-separator),
+  .entry .entry-content hr:not(.wp-block-separator) {
+    max-width: calc(8 * (100vw / 12) - 28px);
+  }
+}
+
+@media only screen and (min-width: 1168px) {
+  .entry .entry-content .wp-block-separator:not(.wp-block-separator),
+  .entry .entry-content hr:not(.wp-block-separator) {
+    max-width: calc(6 * (100vw / 12) - 28px);
+  }
 }