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

Updated email newsletter spacing and font sizes (#20273)

Browse Source 
REF MOM-146

- These styling changes are a general newsletter template improvement,
and are also laying the groundwork for including a subhead in the
newsletter header. Both the newsletter template as well as the
newsletter preview in settings have been updated.
This commit is contained in:
Sanne de Vries 2024-05-28 16:29:49 +02:00 committed by GitHub
parent e6fcbf45a1
commit 3ad77bd2c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/admin-x-design-system/tailwind.config.cjs
View File

@ -270,7 +270,7 @@ module.exports = {
base: '1.4rem',
xs: '1.2rem',
sm: '1.3rem',
md: '1.40rem',
md: '1.4rem',
lg: '1.65rem',
xl: '2rem',
'2xl': '2.4rem',

28
apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx
View File

@ -116,30 +116,30 @@ const NewsletterPreviewContent: React.FC<{
</div>
)}
{showHeader && (
<div className="border-b border-grey-200 py-12" style={{borderColor: secondaryBorderColor}}>
<div className="border-b border-grey-200 py-8" style={{borderColor: secondaryBorderColor}}>
{headerIcon && <img alt="" className="mx-auto mb-2 h-10 w-10" role="presentation" src={headerIcon} />}
{headerTitle && <h4 className="mb-1 text-center text-[1.6rem] font-bold uppercase leading-tight tracking-tight text-grey-900" style={{color: textColor}}>{headerTitle}</h4>}
{headerSubtitle && <h5 className="mb-1 text-center text-[1.4rem] font-normal leading-tight text-grey-600" style={{color: secondaryTextColor}}>{headerSubtitle}</h5>}
{headerSubtitle && <h5 className="mb-1 text-center text-md font-normal text-grey-700" style={{color: secondaryTextColor}}>{headerSubtitle}</h5>}
</div>
)}
{showPostTitleSection && (
<div className={clsx('flex flex-col pb-10 pt-12', titleAlignment === 'center' ? 'items-center' : 'items-start')}>
<div className={clsx('flex flex-col py-8', titleAlignment === 'center' ? 'items-center' : 'items-start')}>
<h2 className={clsx(
'pb-4 text-5xl font-bold leading-supertight text-black',
'pb-4 text-4xl font-bold leading-supertight text-black',
titleFontCategory === 'serif' && 'font-serif',
titleAlignment === 'center' ? 'text-center' : 'text-left'
)} style={{color: titleColor}}>
Your email newsletter
</h2>
<div className={clsx(
'flex w-full justify-between text-center text-sm leading-none tracking-[0.1px] text-grey-600',
'flex w-full justify-between text-center text-md leading-none text-grey-700',
titleAlignment === 'center' ? 'flex-col' : 'flex-row'
)}>
<p className="pb-2" style={{color: secondaryTextColor}}>
<p className="pb-1" style={{color: secondaryTextColor}}>
By {authorPlaceholder}
<span className="before:pl-0.5 before:pr-1 before:content-['•']">{currentDate}</span>
</p>
<p className="pb-2 underline" style={{color: secondaryTextColor}}><span>View in browser</span></p>
<p className="pb-1 underline" style={{color: secondaryTextColor}}><span>View in browser</span></p>
</div>
</div>
)}
@ -150,11 +150,11 @@ const NewsletterPreviewContent: React.FC<{
<div className="h-[300px] w-full max-w-[600px] bg-grey-200 bg-cover bg-no-repeat">
<img alt="Feature" className='min-h-full min-w-full shrink-0' src={CoverImage} />
</div>
<div className="mt-1 w-full max-w-[600px] pb-[30px] text-center text-[1.3rem] text-grey-600" style={{color: secondaryTextColor}}>Feature image caption</div>
<div className="mt-1 w-full max-w-[600px] pb-8 text-center text-[1.3rem] text-grey-700" style={{color: secondaryTextColor}}>Feature image caption</div>
</>
)}
<div className={clsx('max-w-[600px] border-b border-grey-200 py-5 text-[1.6rem] leading-[1.7] text-black', bodyFontCategory === 'serif' && 'font-serif')} style={{borderColor: secondaryBorderColor}}>
<div className={clsx('max-w-[600px] border-b border-grey-200 pb-5 text-[1.6rem] leading-[1.7] text-black', bodyFontCategory === 'serif' && 'font-serif')} style={{borderColor: secondaryBorderColor}}>
<p className="mb-5" style={{color: textColor}}>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
<p className="mb-5" style={{color: textColor}}>Over there on the right you&apos;ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we&apos;ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.</p>
<p className="mb-5" style={{color: textColor}}>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
@ -199,7 +199,7 @@ const NewsletterPreviewContent: React.FC<{
<div className="flex justify-between gap-4 py-2">
<div>
<h4 className="mb-1 mt-0.5 text-[1.9rem]" style={{color: textColor}}>The three latest posts published on your site</h4>
<p className="m-0 text-base text-grey-600" style={{color: secondaryTextColor}}>Posts sent as an email only will never be shown here.</p>
<p className="m-0 text-base text-grey-700" style={{color: secondaryTextColor}}>Posts sent as an email only will never be shown here.</p>
</div>
<div className="aspect-square h-auto w-full max-w-[100px] bg-grey-200 bg-cover bg-no-repeat">
<img alt="Latest post" src={LatestPosts1} />
@ -208,7 +208,7 @@ const NewsletterPreviewContent: React.FC<{
<div className="flex justify-between gap-4 py-2">
<div>
<h4 className="mb-1 mt-0.5 text-[1.9rem]" style={{color: textColor}}>Displayed at the bottom of each newsletter</h4>
<p className="m-0 text-base text-grey-600" style={{color: secondaryTextColor}}>Giving your readers one more place to discover your stories.</p>
<p className="m-0 text-base text-grey-700" style={{color: secondaryTextColor}}>Giving your readers one more place to discover your stories.</p>
</div>
<div className="aspect-square h-auto w-full max-w-[100px] bg-grey-200 bg-cover bg-no-repeat">
<img alt="Latest post" src={LatestPosts2} />
@ -217,7 +217,7 @@ const NewsletterPreviewContent: React.FC<{
<div className="flex justify-between gap-4 py-2">
<div>
<h4 className="mb-1 mt-0.5 text-[1.9rem]" style={{color: textColor}}>To keep your work front and center</h4>
<p className="m-0 text-base text-grey-600" style={{color: secondaryTextColor}}>Making sure that your audience stays engaged.</p>
<p className="m-0 text-base text-grey-700" style={{color: secondaryTextColor}}>Making sure that your audience stays engaged.</p>
</div>
<div className="aspect-square h-auto w-full max-w-[100px] bg-grey-200 bg-cover bg-no-repeat">
<img alt="Latest post" src={LatestPosts3} />
@ -246,9 +246,9 @@ const NewsletterPreviewContent: React.FC<{
{/* Footer */}
<div className="flex flex-col items-center pt-10">
<div dangerouslySetInnerHTML={{__html: footerContent || ''}} className="text break-words px-8 py-3 text-center text-[1.3rem] leading-base text-grey-600" style={{color: secondaryTextColor}} />
<div dangerouslySetInnerHTML={{__html: footerContent || ''}} className="text break-words px-8 py-3 text-center text-[1.3rem] leading-base text-grey-700" style={{color: secondaryTextColor}} />
<div className="px-8 pb-14 pt-3 text-center text-[1.3rem] text-grey-600">
<div className="px-8 pb-14 pt-3 text-center text-[1.3rem] text-grey-700">
<span style={{color: secondaryTextColor}}>{siteTitle} © {currentYear} &mdash; </span>
<span className="pointer-events-none cursor-auto underline" style={{color: secondaryTextColor}}>Unsubscribe</span>
</div>

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

@ -311,24 +311,24 @@ figure blockquote p {
}
.site-icon {
padding-bottom: 10px;
padding-top: 20px;
padding-bottom: 8px;
padding-top: 8px;
text-align: center;
border-radius: 3px;
}
.site-icon img {
width: 48px;
height: 48px;
width: 44px;
height: 44px;
border-radius: 3px;
}
.site-info {
padding-top: 50px;
padding-top: 32px;
}
.site-info-bordered {
padding-top: 50px;
padding-top: 32px;
border-bottom: 1px solid #e5eff5;
}
@ -342,7 +342,7 @@ figure blockquote p {
}
.site-url-bottom-padding {
padding-bottom: 50px;
padding-bottom: 32px;
}
.site-title {
@ -350,7 +350,7 @@ figure blockquote p {
}
.site-subtitle {
color: #8695a4;
color: #738a94;
font-size: 14px;
font-weight: 400;
text-transform: none;
@ -358,7 +358,7 @@ figure blockquote p {
.post-title {
padding-bottom: 16px;
font-size: 42px;
font-size: 36px;
line-height: 1.1em;
font-weight: 700;
text-align: center;
@ -375,7 +375,7 @@ figure blockquote p {
color: #15212A;
display: block;
text-align: center;
margin-top: 50px;
margin-top: 32px;
}
.post-title-link-left {
text-align: left;
@ -384,8 +384,8 @@ figure blockquote p {
.post-meta,
.view-online {
color: #738a94;
font-size: 13px;
letter-spacing: 0.1px;
font-size: 14px;
font-weight: 400;
text-align: center;
}
@ -418,6 +418,7 @@ figure blockquote p {
word-wrap: none;
white-space: nowrap;
color: #738a94;
text-decoration: underline !important;
}
.feature-image-row:first-child > td {
@ -438,9 +439,9 @@ figure blockquote p {
.feature-image-caption {
width: 100%;
padding-top: 5px;
padding-bottom: 30px;
padding-bottom: 32px;
text-align: center;
font-size: 13px!important;
font-size: 13px !important;
color: {{secondaryTextColor}};
line-height: 1.5em;
}
@ -1327,36 +1328,36 @@ a[data-flickr-embed] img {
table.body .site-info,
table.body .site-info-bordered {
padding-top: 30px !important;
padding-top: 24px !important;
}
table.body .site-url-bottom-padding {
padding-bottom: 30px !important;
padding-bottom: 24px !important;
}
table.body .post-title-link {
margin-top: 30px !important;
margin-top: 24px !important;
}
table.body .post-meta-wrapper {
padding-bottom: 30px !important;
padding-bottom: 24px !important;
}
table.body .site-icon img {
width: 40px !important;
height: 40px !important;
width: 36px !important;
height: 36px !important;
}
table.body .site-url a {
font-size: 14px !important;
padding-bottom: 15px !important;
font-size: 13px !important;
padding-bottom: 16px !important;
}
table.body .post-meta,
table.body .post-meta-date {
white-space: normal !important;
font-size: 12px !important;
line-height: 1.5em;
font-size: 13px !important;
line-height: 1.2em;
}
table.body .post-meta,
@ -1399,8 +1400,8 @@ a[data-flickr-embed] img {
}
table.body .post-title a {
font-size: 32px !important;
line-height: 1.15em !important;
font-size: 26px !important;
line-height: 1.1em !important;
}
table.feedback-buttons {

2
ghost/email-service/lib/email-templates/template-old.hbs
View File

@ -81,7 +81,7 @@
</tr>
<tr>
<td style="width: 100%">
<table class="post-meta-wrapper" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-bottom: 48px;">
<table class="post-meta-wrapper" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-bottom: 32px;">
<tr>
<td height="20" class="{{classes.meta}}" style="padding: 0;">
By {{post.authors}} • <span class="post-meta-date">{{post.publishedAt}} </span>