Fixed blockquote spacing on iOS Mail app (#20621)

ref DES-571

- iOS Mail app ignores spacing on the \<blockquote\> element, but will
respect spacing on the \<p\> element inside it
- for that reason, we started to enforce always rendering \<p\> inside
\<blockquote\> for emails
- these changes move the spacing related styles from blockquote to p
inside
This commit is contained in:
Sodbileg Gansukh 2024-07-18 20:10:29 +08:00 committed by GitHub
parent 7488e2e7b2
commit 7d2787aa32
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 216 additions and 112 deletions

View File

@ -417,19 +417,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -772,7 +776,7 @@ exports[`Email Preview API Read can read post email preview with email card and
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "24500",
"content-length": "24519",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -1103,19 +1107,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -1272,7 +1280,7 @@ table.body h2 span {
<tr class=\\"post-content-row\\">
<td class=\\"post-content-sans-serif\\" style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; vertical-align: top; font-size: 17px; line-height: 1.5em; color: #15212A; padding-bottom: 20px; border-bottom: 1px solid #e5eff5; max-width: 600px;\\" valign=\\"top\\">
<!-- POST CONTENT START -->
<!--kg-card-begin: markdown--><h1 style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; line-height: 1.11em; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 42px; font-weight: 700;\\">HTML Ipsum Presents</h1><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><strong style=\\"font-weight: 700;\\">Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code style=\\"font-size: 0.9em; background: #F2F7FA; word-break: break-all; padding: 1px 7px; border-radius: 3px; color: #FF1A75;\\">commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href=\\"#\\" style=\\"overflow-wrap: anywhere; color: #FF1A75; text-decoration: underline;\\" target=\\"_blank\\">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p><h2 style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 32px;\\">Header Level 2</h2><ol style=\\"margin: 0 0 1.5em 0; line-height: 1.6em; padding-left: 1.3em; padding-right: 1.5em; list-style: decimal; max-width: 100%;\\"><li style=\\"margin: 0.5em 0; padding-left: 0.3em; line-height: 1.6em;\\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li style=\\"margin: 0.5em 0; padding-left: 0.3em; line-height: 1.6em;\\">Aliquam tincidunt mauris eu risus.</li></ol><blockquote style=\\"margin: 2em 0 2em 0; padding: 0 25px 0 25px; border-left: #FF1A75 2px solid; font-size: 17px; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px;\\"><p style=\\"line-height: 1.6em; margin: 0.8em 0; font-size: 1em;\\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote><h3 style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 26px;\\">Header Level 3</h3><ul style=\\"margin: 0 0 1.5em 0; line-height: 1.6em; padding-left: 1.3em; padding-right: 1.5em; list-style: disc; max-width: 100%;\\"><li style=\\"margin: 0.5em 0; padding-left: 0.3em; line-height: 1.6em;\\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li style=\\"margin: 0.5em 0; padding-left: 0.3em; line-height: 1.6em;\\">Aliquam tincidunt mauris eu risus.</li></ul><pre style=\\"white-space: pre-wrap; overflow: auto; background: #15212A; padding: 15px; border-radius: 3px; line-height: 1.2em; color: #ffffff;\\"><code style=\\"font-size: 0.9em;\\">#header h1 a{display: block;width: 300px;height: 80px;}</code></pre><!--kg-card-end: markdown-->
<!--kg-card-begin: markdown--><h1 style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; line-height: 1.11em; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 42px; font-weight: 700;\\">HTML Ipsum Presents</h1><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><strong style=\\"font-weight: 700;\\">Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code style=\\"font-size: 0.9em; background: #F2F7FA; word-break: break-all; padding: 1px 7px; border-radius: 3px; color: #FF1A75;\\">commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href=\\"#\\" style=\\"overflow-wrap: anywhere; color: #FF1A75; text-decoration: underline;\\" target=\\"_blank\\">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p><h2 style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 32px;\\">Header Level 2</h2><ol style=\\"margin: 0 0 1.5em 0; line-height: 1.6em; padding-left: 1.3em; padding-right: 1.5em; list-style: decimal; max-width: 100%;\\"><li style=\\"margin: 0.5em 0; padding-left: 0.3em; line-height: 1.6em;\\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li style=\\"margin: 0.5em 0; padding-left: 0.3em; line-height: 1.6em;\\">Aliquam tincidunt mauris eu risus.</li></ol><blockquote style=\\"margin: 0; padding: 0; border-left: #FF1A75 2px solid; font-size: 17px; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px;\\"><p style=\\"line-height: 1.6em; margin: 2em 0; padding: 0 25px; font-size: 1em;\\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote><h3 style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 26px;\\">Header Level 3</h3><ul style=\\"margin: 0 0 1.5em 0; line-height: 1.6em; padding-left: 1.3em; padding-right: 1.5em; list-style: disc; max-width: 100%;\\"><li style=\\"margin: 0.5em 0; padding-left: 0.3em; line-height: 1.6em;\\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li style=\\"margin: 0.5em 0; padding-left: 0.3em; line-height: 1.6em;\\">Aliquam tincidunt mauris eu risus.</li></ul><pre style=\\"white-space: pre-wrap; overflow: auto; background: #15212A; padding: 15px; border-radius: 3px; line-height: 1.2em; color: #ffffff;\\"><code style=\\"font-size: 0.9em;\\">#header h1 a{display: block;width: 300px;height: 80px;}</code></pre><!--kg-card-end: markdown-->
<!-- POST CONTENT END -->
</td>
@ -1480,7 +1488,7 @@ exports[`Email Preview API Read can read post email preview with fields 4: [head
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "29289",
"content-length": "29301",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -1842,19 +1850,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -2204,7 +2216,7 @@ exports[`Email Preview API Read has custom content transformations for email com
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "24254",
"content-length": "24273",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -2895,19 +2907,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -3271,7 +3287,7 @@ exports[`Email Preview API Read uses the newsletter provided through ?newsletter
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "25037",
"content-length": "25056",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -3988,19 +4004,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -4364,7 +4384,7 @@ exports[`Email Preview API Read uses the posts newsletter by default 4: [headers
Object {
"access-control-allow-origin": "http://127.0.0.1:2369",
"cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "25037",
"content-length": "25056",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,

View File

@ -310,19 +310,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -985,19 +989,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -1636,19 +1644,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -2287,19 +2299,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -2938,19 +2954,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -3537,19 +3557,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -4188,19 +4212,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -4933,19 +4961,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -6998,19 +7030,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -7794,19 +7830,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -8500,19 +8540,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -9206,19 +9250,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -9912,19 +9960,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -10618,19 +10670,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -11324,19 +11380,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -11977,19 +12037,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}

View File

@ -310,19 +310,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -961,19 +965,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -1612,19 +1620,23 @@ table.body h2 span {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}
@ -1811,7 +1823,7 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing
<tr class=\\"post-content-row\\">
<td class=\\"post-content\\" style=\\"vertical-align: top; font-family: Georgia, serif; font-size: 18px; line-height: 1.5em; color: #15212A; padding-bottom: 20px; border-bottom: 1px solid #e5eff5; max-width: 600px;\\" valign=\\"top\\">
<!-- POST CONTENT START -->
<p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">This is just a simple paragraph, no frills.</p><blockquote style=\\"margin: 2em 0 2em 0; padding: 0 25px 0 25px; border-left: #FF1A75 2px solid; font-size: 17px; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px;\\"><p style=\\"line-height: 1.6em; margin: 0.8em 0; font-size: 1em;\\">This is block quote</p></blockquote><blockquote class=\\"kg-blockquote-alt\\" style=\\"margin: 2em 0 2em 0; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px; border-left: 0 none; padding: 0 50px 0 50px; text-align: center; font-size: 1.2em; font-style: italic; color: #738a94;\\">This is a...different block quote</blockquote><h2 id=\\"this-is-a-heading\\" style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 32px;\\">This is a heading!</h2><h3 id=\\"heres-a-smaller-heading\\" style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 26px;\\">Here&#39;s a smaller heading.</h3><div class=\\"kg-card kg-image-card kg-card-hascaption\\" style=\\"margin: 0 0 1.5em; padding: 0;\\"><img src=\\"https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cow_%28Fleckvieh_breed%29_Oeschinensee_Slaunger_2009-07-07.jpg/1920px-Cow_%28Fleckvieh_breed%29_Oeschinensee_Slaunger_2009-07-07.jpg\\" class=\\"kg-image\\" alt=\\"Cows eat grass.\\" loading=\\"lazy\\" style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%; display: block; margin: 0 auto; height: auto; width: auto;\\" width=\\"auto\\" height=\\"auto\\"><div class=\\"kg-card-figcaption\\" style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; padding-top: 10px; padding-bottom: 10px; line-height: 1.5em; color: #738a94; font-size: 13px;\\"><span style=\\"text-align: center; white-space: pre-wrap;\\">A lovely cow</span></div></div><h1 id=\\"a-heading\\" style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; line-height: 1.11em; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 42px; font-weight: 700;\\">A heading</h1>
<p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">This is just a simple paragraph, no frills.</p><blockquote style=\\"margin: 0; padding: 0; border-left: #FF1A75 2px solid; font-size: 17px; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px;\\"><p style=\\"line-height: 1.6em; margin: 2em 0; padding: 0 25px; font-size: 1em;\\">This is block quote</p></blockquote><blockquote class=\\"kg-blockquote-alt\\" style=\\"margin: 0; padding: 0; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px; border-left: 0 none; text-align: center; font-size: 1.2em; font-style: italic; color: #738a94;\\">This is a...different block quote</blockquote><h2 id=\\"this-is-a-heading\\" style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 32px;\\">This is a heading!</h2><h3 id=\\"heres-a-smaller-heading\\" style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; line-height: 1.11em; font-weight: 700; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 26px;\\">Here&#39;s a smaller heading.</h3><div class=\\"kg-card kg-image-card kg-card-hascaption\\" style=\\"margin: 0 0 1.5em; padding: 0;\\"><img src=\\"https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Cow_%28Fleckvieh_breed%29_Oeschinensee_Slaunger_2009-07-07.jpg/1920px-Cow_%28Fleckvieh_breed%29_Oeschinensee_Slaunger_2009-07-07.jpg\\" class=\\"kg-image\\" alt=\\"Cows eat grass.\\" loading=\\"lazy\\" style=\\"border: none; -ms-interpolation-mode: bicubic; max-width: 100%; display: block; margin: 0 auto; height: auto; width: auto;\\" width=\\"auto\\" height=\\"auto\\"><div class=\\"kg-card-figcaption\\" style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; padding-top: 10px; padding-bottom: 10px; line-height: 1.5em; color: #738a94; font-size: 13px;\\"><span style=\\"text-align: center; white-space: pre-wrap;\\">A lovely cow</span></div></div><h1 id=\\"a-heading\\" style=\\"margin-top: 0; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; line-height: 1.11em; text-rendering: optimizeLegibility; margin: 1.5em 0 0.5em 0; font-size: 42px; font-weight: 700;\\">A heading</h1>
<p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">and a paragraph (in markdown!)</p>
<!--kg-card-begin: html-->
@ -2018,7 +2030,7 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing
<v:oval fill=\\"t\\" strokecolor=\\"white\\" strokeweight=\\"4px\\" style=\\"position:absolute;left:261;top:186;width:78;height:78\\"><v:fill color=\\"black\\" opacity=\\"30%\\" /></v:oval>
<v:shape coordsize=\\"24,32\\" path=\\"m,l,32,24,16,xe\\" fillcolor=\\"white\\" stroked=\\"f\\" style=\\"position:absolute;left:289;top:208;width:30;height:34;\\" />
</v:group>
<![endif]--></div><div></div><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">Some text.</p><blockquote style=\\"margin: 2em 0 2em 0; padding: 0 25px 0 25px; border-left: #FF1A75 2px solid; font-size: 17px; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px;\\"><p style=\\"line-height: 1.6em; margin: 0.8em 0; font-size: 1em;\\">A blockquote</p></blockquote><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">Some more text.</p><div class=\\"kg-card kg-code-card\\" style=\\"margin: 0 0 1.5em; padding: 0;\\"><pre style=\\"white-space: pre-wrap; overflow: auto; background: #15212A; padding: 15px; border-radius: 3px; line-height: 1.2em; color: #ffffff;\\"><code class=\\"language-javascript\\" style=\\"font-size: 0.9em;\\">console.log(&#39;Hello world!&#39;);</code></pre><div class=\\"kg-card-figcaption\\" style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; padding-top: 10px; padding-bottom: 10px; line-height: 1.5em; color: #738a94; font-size: 13px;\\"><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><span style=\\"white-space: pre-wrap;\\">A tiny little script.</span></p></div></div><table cellspacing=\\"0\\" cellpadding=\\"4\\" border=\\"0\\" class=\\"kg-file-card\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto; width: 100%; margin: 0 0 1.5em 0; border-radius: 3px; border: 1px solid #e5eff5;\\">
<![endif]--></div><div></div><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">Some text.</p><blockquote style=\\"margin: 0; padding: 0; border-left: #FF1A75 2px solid; font-size: 17px; font-weight: 500; line-height: 1.6em; letter-spacing: -0.2px;\\"><p style=\\"line-height: 1.6em; margin: 2em 0; padding: 0 25px; font-size: 1em;\\">A blockquote</p></blockquote><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\">Some more text.</p><div class=\\"kg-card kg-code-card\\" style=\\"margin: 0 0 1.5em; padding: 0;\\"><pre style=\\"white-space: pre-wrap; overflow: auto; background: #15212A; padding: 15px; border-radius: 3px; line-height: 1.2em; color: #ffffff;\\"><code class=\\"language-javascript\\" style=\\"font-size: 0.9em;\\">console.log(&#39;Hello world!&#39;);</code></pre><div class=\\"kg-card-figcaption\\" style=\\"text-align: center; font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; padding-top: 10px; padding-bottom: 10px; line-height: 1.5em; color: #738a94; font-size: 13px;\\"><p style=\\"margin: 0 0 1.5em 0; line-height: 1.6em;\\"><span style=\\"white-space: pre-wrap;\\">A tiny little script.</span></p></div></div><table cellspacing=\\"0\\" cellpadding=\\"4\\" border=\\"0\\" class=\\"kg-file-card\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto; width: 100%; margin: 0 0 1.5em 0; border-radius: 3px; border: 1px solid #e5eff5;\\">
<tbody><tr>
<td style=\\"font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Helvetica, Arial, sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;, &#39;Segoe UI Symbol&#39;; font-size: 18px; vertical-align: top; color: #15212A;\\" valign=\\"top\\">
<table cellspacing=\\"0\\" cellpadding=\\"0\\" border=\\"0\\" width=\\"100%\\" style=\\"border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;\\">

View File

@ -157,8 +157,8 @@ dd {
}
blockquote {
margin: 2em 0 2em 0;
padding: 0 25px 0 25px;
margin: 0;
padding: 0;
border-left: {{accentColor}} 2px solid;
font-size: 17px;
font-weight: 500;
@ -168,7 +168,6 @@ blockquote {
blockquote.kg-blockquote-alt {
border-left: 0 none;
padding: 0 50px 0 50px;
text-align: center;
font-size: 1.2em;
font-style: italic;
@ -176,10 +175,15 @@ blockquote.kg-blockquote-alt {
}
blockquote p {
margin: 0.8em 0;
margin: 2em 0;
padding: 0 25px;
font-size: 1em;
}
blockquote.kg-blockquote-alt p {
padding: 0 50px;
}
blockquote small {
display: inline-block;
margin: 0.8em 0 0.8em 1.5em;
@ -1574,19 +1578,23 @@ a[data-flickr-embed] img {
font-size: 16px !important;
line-height: 1.6em;
margin-bottom: 0;
padding-left: 15px;
}
table.body blockquote p {
padding: 0 15px !important;
}
table.body blockquote.kg-blockquote-alt {
border-left: 0 none !important;
margin: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 1.5em !important;
font-size: 18px !important;
line-height: 1.4em !important;
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
}
table.body hr {
margin: 2em 0 !important;
}