OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed blockquote horizontal spacing on Outlook (#20625)

Browse Source 
ref DES-571

- padding does not work well with paragraph inside blockquote as
horizontal spacing on Outlook
- using margin instead of padding makes sure the spacing is consistent
across Outlook versions
This commit is contained in:
Sodbileg Gansukh 2024-07-18 21:01:43 +08:00 committed by GitHub
parent 170fba0962
commit 87c12b5113
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 112 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
ghost/core/test/e2e-api/admin/__snapshots__/email-previews.test.js.snap
View File

@ -420,7 +420,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -431,7 +432,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -776,7 +778,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": "24519",
"content-length": "24595",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -1110,7 +1112,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -1121,7 +1124,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -1280,7 +1284,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: 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-->
<!--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 25px; font-size: 1em; padding: 0;\\">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>
@ -1488,7 +1492,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": "29301",
"content-length": "29375",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -1853,7 +1857,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -1864,7 +1869,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -2216,7 +2222,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": "24273",
"content-length": "24349",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -2910,7 +2916,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -2921,7 +2928,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -3287,7 +3295,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": "25056",
"content-length": "25132",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -4007,7 +4015,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -4018,7 +4027,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -4384,7 +4394,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": "25056",
"content-length": "25132",
"content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,

96
ghost/core/test/integration/services/email-service/__snapshots__/batch-sending.test.js.snap
View File

@ -313,7 +313,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -324,7 +325,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -992,7 +994,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -1003,7 +1006,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -1647,7 +1651,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -1658,7 +1663,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -2302,7 +2308,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -2313,7 +2320,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -2957,7 +2965,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -2968,7 +2977,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -3560,7 +3570,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -3571,7 +3582,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -4215,7 +4227,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -4226,7 +4239,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -4964,7 +4978,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -4975,7 +4990,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -7033,7 +7049,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -7044,7 +7061,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -7833,7 +7851,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -7844,7 +7863,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -8543,7 +8563,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -8554,7 +8575,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -9253,7 +9275,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -9264,7 +9287,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -9963,7 +9987,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -9974,7 +9999,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -10673,7 +10699,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -10684,7 +10711,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -11383,7 +11411,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -11394,7 +11423,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -12040,7 +12070,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -12051,7 +12082,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {

22
ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap
View File

@ -313,7 +313,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -324,7 +325,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -968,7 +970,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -979,7 +982,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -1623,7 +1627,8 @@ table.body h2 span {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -1634,7 +1639,8 @@ table.body h2 span {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {
@ -1823,7 +1829,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: 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;\\"><p style=\\"line-height: 1.6em; margin: 2em 0; font-size: 1em; padding: 0 50px;\\">This is a...different block quote</p></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 25px; font-size: 1em; padding: 0;\\">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;\\"><p style=\\"line-height: 1.6em; margin: 2em 25px; font-size: 1em; margin-right: 50px; margin-left: 50px; padding: 0;\\">This is a...different block quote</p></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-->
@ -2030,7 +2036,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: 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;\\">
<![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 25px; font-size: 1em; padding: 0;\\">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%;\\">

13
ghost/email-service/lib/email-templates/partials/styles.hbs
View File

@ -175,13 +175,14 @@ blockquote.kg-blockquote-alt {
}
blockquote p {
margin: 2em 0;
padding: 0 25px;
margin: 2em 25px;
padding: 0 !important;
font-size: 1em;
}
blockquote.kg-blockquote-alt p {
padding: 0 50px;
margin-right: 50px;
margin-left: 50px;
}
blockquote small {
@ -1581,7 +1582,8 @@ a[data-flickr-embed] img {
}
table.body blockquote p {
padding: 0 15px !important;
margin-right: 15px !important;
margin-left: 15px !important;
}
table.body blockquote.kg-blockquote-alt {
@ -1592,7 +1594,8 @@ a[data-flickr-embed] img {
}
table.body blockquote.kg-blockquote-alt p {
padding: 0 20px !important;
margin-right: 20px !important;
margin-left: 20px !important;
}
table.body hr {