Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Refined newsletter typography (#20406)

Browse source 
DES-459

The font size of subtitles/excerpts in newsletters was similar to the
body font size which doesn't reflect the content hierarchy
appropriately. Also, the spacing should be adjusted to represent that
the title and the subtitle belong together.
This commit is contained in:
Peter Zimon 2024-06-19 11:57:29 +02:00 • committed by GitHub
parent 5acdafc0e8
commit 73a88d0c13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 68 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx
View file

@ -104,13 +104,20 @@ const NewsletterPreviewContent: React.FC<{
let excerptClasses = 'mb-5 text-pretty leading-[1.7] text-black'; let excerptClasses = 'mb-5 text-pretty leading-[1.7] text-black';
if (titleFontCategory === 'serif' && bodyFontCategory === 'serif') { if (titleFontCategory === 'serif' && bodyFontCategory === 'serif') {
excerptClasses = clsx(excerptClasses, 'font-serif text-[1.8rem]'); excerptClasses = clsx(excerptClasses, 'mb-8 font-serif text-[2.0rem] leading-tight');
} else if (titleFontCategory !== 'serif' && bodyFontCategory === 'serif') { } else if (titleFontCategory !== 'serif' && bodyFontCategory === 'serif') {
excerptClasses = clsx(excerptClasses, 'text-[1.7rem] tracking-tight'); excerptClasses = clsx(excerptClasses, 'mb-8 text-[1.7rem] leading-tight tracking-tight');
} else if (titleFontCategory === 'serif' && bodyFontCategory !== 'serif') { } else if (titleFontCategory === 'serif' && bodyFontCategory !== 'serif') {
excerptClasses = clsx(excerptClasses, 'font-serif text-[1.8rem]'); excerptClasses = clsx(excerptClasses, 'mb-8 font-serif text-[2.0rem] leading-tight');
} else { } else {
excerptClasses = clsx(excerptClasses, 'text-[1.7rem] tracking-tight'); excerptClasses = clsx(excerptClasses, 'mb-8 text-[1.9rem] leading-tight tracking-tight');
}
if (titleAlignment === 'center') {
excerptClasses = clsx(
excerptClasses,
'text-center'
);
} }
return ( return (
@ -140,9 +147,10 @@ const NewsletterPreviewContent: React.FC<{
{showPostTitleSection && ( {showPostTitleSection && (
<div className={clsx('flex flex-col py-8', titleAlignment === 'center' ? 'items-center' : 'items-start')}> <div className={clsx('flex flex-col py-8', titleAlignment === 'center' ? 'items-center' : 'items-start')}>
<h2 className={clsx( <h2 className={clsx(
'pb-4 text-4xl font-bold leading-supertight text-black', 'text-4xl font-bold leading-supertight text-black',
titleFontCategory === 'serif' && 'font-serif', titleFontCategory === 'serif' && 'font-serif',
titleAlignment === 'center' ? 'text-center' : 'text-left' titleAlignment === 'center' ? 'text-center' : 'text-left',
showExcerpt ? 'mb-2' : 'mb-8'
)} style={{color: titleColor}}> )} style={{color: titleColor}}>
Your email newsletter Your email newsletter
</h2> </h2>

20
ghost/core/test/e2e-api/admin/__snapshots__/email-previews.test.js.snap
View file

@ -495,7 +495,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title\\" 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; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt\\" 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; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">Post with email-only card</a> <a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">Post with email-only card</a>
</td> </td>
</tr> </tr>
@ -713,7 +713,7 @@ exports[`Email Preview API Read can read post email preview with email card and
Object { Object {
"access-control-allow-origin": "http://127.0.0.1:2369", "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", "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "23508", "content-length": "23530",
"content-type": "application/json; charset=utf-8", "content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -1122,7 +1122,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title\\" 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; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-with-excerpt\\" 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; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/html-ipsum/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">HTML Ipsum</a> <a href=\\"http://127.0.0.1:2369/html-ipsum/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">HTML Ipsum</a>
</td> </td>
</tr> </tr>
@ -1360,7 +1360,7 @@ exports[`Email Preview API Read can read post email preview with fields 4: [head
Object { Object {
"access-control-allow-origin": "http://127.0.0.1:2369", "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", "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "28319", "content-length": "28343",
"content-type": "application/json; charset=utf-8", "content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -1800,7 +1800,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title\\" 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; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt\\" 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; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">Post with email-only card</a> <a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">Post with email-only card</a>
</td> </td>
</tr> </tr>
@ -2025,7 +2025,7 @@ exports[`Email Preview API Read has custom content transformations for email com
Object { Object {
"access-control-allow-origin": "http://127.0.0.1:2369", "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", "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "23262", "content-length": "23284",
"content-type": "application/json; charset=utf-8", "content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -2801,7 +2801,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">Post with email-only card</a> <a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">Post with email-only card</a>
</td> </td>
</tr> </tr>
@ -3033,7 +3033,7 @@ exports[`Email Preview API Read uses the newsletter provided through ?newsletter
Object { Object {
"access-control-allow-origin": "http://127.0.0.1:2369", "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", "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "24023", "content-length": "24045",
"content-type": "application/json; charset=utf-8", "content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,
@ -3835,7 +3835,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">Post with email-only card</a> <a href=\\"http://127.0.0.1:2369/p/d52c42ae-2755-455c-80ec-70b2ec55c904/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">Post with email-only card</a>
</td> </td>
</tr> </tr>
@ -4067,7 +4067,7 @@ exports[`Email Preview API Read uses the posts newsletter by default 4: [headers
Object { Object {
"access-control-allow-origin": "http://127.0.0.1:2369", "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", "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
"content-length": "24023", "content-length": "24045",
"content-type": "application/json; charset=utf-8", "content-type": "application/json; charset=utf-8",
"content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/, "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
"etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/, "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,

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

@ -395,7 +395,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">A random test post</a> <a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">A random test post</a>
</td> </td>
</tr> </tr>
@ -1001,7 +1001,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/email/post-uuid/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a> <a href=\\"http://127.0.0.1:2369/email/post-uuid/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a>
</td> </td>
</tr> </tr>
@ -1593,7 +1593,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-6/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a> <a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-6/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a>
</td> </td>
</tr> </tr>
@ -2185,7 +2185,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-7/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a> <a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-7/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a>
</td> </td>
</tr> </tr>
@ -3317,7 +3317,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a> <a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a>
</td> </td>
</tr> </tr>
@ -3909,7 +3909,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-4/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a> <a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-4/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a>
</td> </td>
</tr> </tr>
@ -4595,7 +4595,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-3/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a> <a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-3/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a>
</td> </td>
</tr> </tr>
@ -6601,7 +6601,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is the main post title</a> <a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is the main post title</a>
</td> </td>
</tr> </tr>
@ -7338,7 +7338,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-12/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a> <a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-12/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a>
</td> </td>
</tr> </tr>
@ -7985,7 +7985,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-9/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a> <a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-9/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a>
</td> </td>
</tr> </tr>
@ -8632,7 +8632,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-8/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a> <a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-8/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a>
</td> </td>
</tr> </tr>
@ -9279,7 +9279,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-11/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a> <a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-11/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a>
</td> </td>
</tr> </tr>
@ -9926,7 +9926,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-10/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a> <a href=\\"http://127.0.0.1:2369/this-is-a-test-post-title-10/\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">This is a test post title</a>
</td> </td>
</tr> </tr>
@ -10573,7 +10573,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">A random test post</a> <a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">A random test post</a>
</td> </td>
</tr> </tr>
@ -11167,7 +11167,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">A random test post</a> <a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">A random test post</a>
</td> </td>
</tr> </tr>

6
ghost/core/test/integration/services/email-service/__snapshots__/cards.test.js.snap
View file

@ -395,7 +395,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">A random test post</a> <a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">A random test post</a>
</td> </td>
</tr> </tr>
@ -987,7 +987,7 @@ table.body h2 span {
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">A random test post</a> <a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">A random test post</a>
</td> </td>
</tr> </tr>
@ -1607,7 +1607,7 @@ Ghost: Independent technology for modern publishingBeautiful, modern publishing
</tr> </tr>
<tr> <tr>
<td class=\\"post-title post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\"> <td class=\\"post-title post-title-no-excerpt post-title-serif\\" style=\\"vertical-align: top; color: #000000; padding-bottom: 16px; font-size: 42px; line-height: 1.1em; font-weight: 700; text-align: center; font-family: Georgia, serif; letter-spacing: -0.01em;\\" valign=\\"top\\" align=\\"center\\">
<a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">A random test post</a> <a href=\\"http://127.0.0.1:2369/r/xxxxxx?m=member-uuid\\" class=\\"post-title-link\\" style=\\"display: block; text-align: center; margin-top: 50px; color: #000000; overflow-wrap: anywhere; text-decoration: none;\\" target=\\"_blank\\">A random test post</a>
</td> </td>
</tr> </tr>

4
ghost/email-service/lib/EmailRenderer.js
View file

@ -1097,9 +1097,9 @@ class EmailRenderer {
footerContent: newsletter.get('footer_content'), footerContent: newsletter.get('footer_content'),
classes: { classes: {
title: 'post-title' + (newsletter.get('title_font_category') === 'serif' ? ` post-title-serif` : ``) + (newsletter.get('title_alignment') === 'left' ? ` post-title-left` : ``), title: 'post-title' + ` ` + (post.get('custom_excerpt') ? 'post-title-with-excerpt' : 'post-title-no-excerpt') + (newsletter.get('title_font_category') === 'serif' ? ` post-title-serif` : ``) + (newsletter.get('title_alignment') === 'left' ? ` post-title-left` : ``),
titleLink: 'post-title-link' + (newsletter.get('title_alignment') === 'left' ? ` post-title-link-left` : ``), titleLink: 'post-title-link' + (newsletter.get('title_alignment') === 'left' ? ` post-title-link-left` : ``),
excerpt: 'post-excerpt' + ` ` + excerptFontClass + (newsletter.get('title_alignment') === 'left' ? ` post-excerpt-left` : ``), excerpt: 'post-excerpt' + ` ` + (newsletter.get('show_feature_image') && !!postFeatureImage ? 'post-excerpt-with-feature-image' : 'post-excerpt-no-feature-image') + ` ` + excerptFontClass + (newsletter.get('title_alignment') === 'left' ? ` post-excerpt-left` : ``),
meta: 'post-meta' + (newsletter.get('title_alignment') === 'left' ? ` post-meta-left` : ` post-meta-center`), meta: 'post-meta' + (newsletter.get('title_alignment') === 'left' ? ` post-meta-left` : ` post-meta-center`),
body: newsletter.get('body_font_category') === 'sans_serif' ? `post-content-sans-serif` : `post-content` body: newsletter.get('body_font_category') === 'sans_serif' ? `post-content-sans-serif` : `post-content`
}, },

27
ghost/email-service/lib/email-templates/partials/styles-old.hbs
View file

@ -353,12 +353,20 @@ figure blockquote p {
} }
.post-title { .post-title {
padding-bottom: 16px;
font-size: 36px; font-size: 36px;
line-height: 1.1em; line-height: 1.1em;
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
} }
.post-title-with-excerpt {
padding-bottom: 8px;
}
.post-title-no-excerpt {
padding-bottom: 16px;
}
.post-title-serif { .post-title-serif {
font-family: Georgia, serif; font-family: Georgia, serif;
letter-spacing: -0.01em; letter-spacing: -0.01em;
@ -384,20 +392,27 @@ figure blockquote p {
.post-excerpt { .post-excerpt {
margin: 0; margin: 0;
padding-bottom: 20px;
color: #15212A; color: #15212A;
font-size: 17px; font-size: 19px;
line-height: 1.6em; line-height: 1.4em;
text-align: center; text-align: center;
} }
.post-excerpt-with-feature-image {
padding-bottom: 28px;
}
.post-excerpt-no-feature-image {
padding-bottom: 32px;
}
.post-excerpt-serif-serif { .post-excerpt-serif-serif {
font-family: Georgia, serif; font-family: Georgia, serif;
font-size: 18px; font-size: 20px;
} }
.post-excerpt-serif-sans { .post-excerpt-serif-sans {
font-size: 18px; font-size: 20px;
font-family: Georgia, serif; font-family: Georgia, serif;
} }

6
ghost/email-service/test/email-renderer.test.js
View file

@ -2070,10 +2070,10 @@ describe('Email renderer', function () {
}); });
const data = await emailRenderer.getTemplateData({post, newsletter, html, addPaywall: false}); const data = await emailRenderer.getTemplateData({post, newsletter, html, addPaywall: false});
assert.deepEqual(data.classes, { assert.deepEqual(data.classes, {
title: 'post-title post-title-serif post-title-left', title: 'post-title post-title-no-excerpt post-title-serif post-title-left',
titleLink: 'post-title-link post-title-link-left', titleLink: 'post-title-link post-title-link-left',
meta: 'post-meta post-meta-left', meta: 'post-meta post-meta-left',
excerpt: 'post-excerpt post-excerpt-serif-sans post-excerpt-left', excerpt: 'post-excerpt post-excerpt-no-feature-image post-excerpt-serif-sans post-excerpt-left',
body: 'post-content-sans-serif' body: 'post-content-sans-serif'
}); });
}); });
@ -2092,7 +2092,7 @@ describe('Email renderer', function () {
show_excerpt: true show_excerpt: true
}); });
const data = await emailRenderer.getTemplateData({post, newsletter, html, addPaywall: false}); const data = await emailRenderer.getTemplateData({post, newsletter, html, addPaywall: false});
assert.equal(data.classes.excerpt, 'post-excerpt post-excerpt-serif-serif post-excerpt-left'); assert.equal(data.classes.excerpt, 'post-excerpt post-excerpt-no-feature-image post-excerpt-serif-serif post-excerpt-left');
}); });
it('show comment CTA is enabled if labs disabled', async function () { it('show comment CTA is enabled if labs disabled', async function () {