Ghost/core/server/services/mega/template.js

/* eslint indent: warn, no-irregular-whitespace: warn */
module.exports = ({post, site, templateConfig}) => {
    const date = new Date();
    return `<!doctype html>
<html>

<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>${post.title}</title>
<style>
/* -------------------------------------
    GLOBAL RESETS
------------------------------------- */

/*All the styling goes here*/

img {
    border: none;
    -ms-interpolation-mode: bicubic;
    max-width: 100%;
}

body {
    background-color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    -webkit-font-smoothing: antialiased;
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    color: #15212A;
}

table {
    border-collapse: separate;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
    width: 100%;
}

table td {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    font-size: 18px;
    vertical-align: top;
    color: #15212A;
}

/* -------------------------------------
    BODY & CONTAINER
------------------------------------- */
.body {
    background-color: #fff;
    width: 100%;
}

/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
    display: block;
    margin: 0 auto !important;
    /* makes it centered */
    max-width: 600px;
}

/* This should also be a block element, so that it will fill 100% of the .container */
.content {
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    max-width: 600px;
}

/* -------------------------------------
    POST CONTENT
------------------------------------- */
hr {
    position: relative;
    display: block;
    width: 100%;
    margin: 3em 0;
    padding: 0;
    height: 1px;
    border: 0;
    border-top: 1px solid #e5eff5;
}

p,
ul,
ol,
dl,
blockquote {
    margin: 0 0 1.5em 0;
    line-height: 1.6em;
}

ol,
ul {
    padding-left: 1.3em;
    padding-right: 1.5em;
}

ol ol,
ul ul,
ul ol,
ol ul {
    margin: 0.5em 0 1em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

ul,
ol {
    max-width: 100%;
}

li {
    margin: 0.5em 0;
    padding-left: 0.3em;
    line-height: 1.6em;
}

dt {
    float: left;
    margin: 0 20px 0 0;
    width: 120px;
    color: #15212A;
    font-weight: 500;
    text-align: right;
}

dd {
    margin: 0 0 5px 0;
    text-align: left;
}

blockquote {
    margin: 2em 0;
    padding: 0 25px 0 25px;
    border-left: #15212A 2px solid;
    font-style: italic;
    font-size: 20px;
    line-height: 1.75em;
    letter-spacing: -0.2px;
}

blockquote p {
    margin: 0.8em 0;
    font-size: 1.2em;
    font-weight: 300;
}

blockquote small {
    display: inline-block;
    margin: 0.8em 0 0.8em 1.5em;
    font-size: 0.9em;
    opacity: 0.8;
}

blockquote cite {
    font-weight: bold;
}
blockquote cite a {
    font-weight: normal;
}

a {
    color: #15212A;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    line-height: 1.15em;
    font-weight: 600;
    text-rendering: optimizeLegibility;
}

h1 {
    margin: 1.5em 0 0.5em 0;
    font-size: 42px;
    font-weight: 600;
}

h2 {
    margin: 1.5em 0 0.5em 0;
    font-size: 32px;
    line-height: 1.22em;
}

h3 {
    margin: 1.5em 0 0.5em 0;
    font-size: 26px;
    line-height: 1.25em;
}

h4 {
    margin: 1.8em 0 0.5em 0;
    font-size: 21px;
    line-height: 1.3em;
}

h5 {
    margin: 2em 0 0.5em 0;
    font-size: 19px;
    line-height: 1.4em;
}

h6 {
    margin: 2em 0 0.5em 0;
    font-size: 19px;
    line-height: 1.4em;
    font-weight: 700;
}

strong {
    font-weight: 700;
}

figure {
    margin: 0 0 1.5em;
    padding: 0;
}

figcaption {
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    font-size: 14px;
    padding-top: 5px;
    line-height: 1.5em;
}

code {
    font-size: 0.9em;
}

pre {
    white-space: pre-wrap;
    background: #15212A;
    padding: 15px;
    border-radius: 3px;
    line-height: 1.2em;
    color: #ffffff;
}

p code {
    background: #F2F7FA;
    word-break: break-all;
    padding: 1px 7px;
    border-radius: 3px;
}

figure blockquote p {
    font-size: 1em;
}

.site-icon {
    padding-bottom: 10px;
    padding-top: 20px;
    text-align: center;
    border-radius: 3px;
}

.site-icon img {
    width: 48px;
    height: 48px;
    border-radius: 3px;
}

.site-info {
    padding-top: 50px;
    border-bottom: 1px solid #e5eff5;
}

.site-url {
    color: #15212A;
    font-size: 16px;
    letter-spacing: -0.1px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 50px;
}

.post-title {
    padding-bottom: 10px;
    font-size: 42px;
    line-height: 1.1em;
    font-weight: 600;
    text-align: center;
}

.post-title-link {
    color: #15212A;
    display: block;
    text-align: center;
    margin-top: 50px;
}

.post-meta,
.view-online {
    padding-bottom: 50px;
    white-space: nowrap;
    color: #738a94;
    font-size: 13px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    text-align: center;
}

.view-online {
    text-align: right;
}

.view-online-link {
    word-wrap: none;
    white-space: nowrap;
    color: #15212A;
}

.feature-image {
    padding-bottom: 30px;
    width: 100%;
}

.post-content {
    max-width: 600px !important;
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1.5em;
    color: #23323D;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5eff5;
}

.post-content a {
    color: #08121A;
    text-decoration: underline;
}

.kg-bookmark-card {
    width: 100%;
    background: #ffffff;
}

.kg-bookmark-card a {
    text-decoration: none;
}

.kg-card + .kg-bookmark-card {
    margin-top: 0;
}

.kg-image-card img {
    display: block;
    margin: 0 auto;
    height: auto !important;
}

.kg-bookmark-container {
    display: flex;
    min-height: 148px;
    color: #15212A;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid #e5eff5;
}

.kg-bookmark-content {
    flex-grow: 1;
    padding: 20px;
}

.kg-bookmark-title {
    color: #15212A;
    font-size: 15px;
    line-height: 1.5em;
    font-weight: 600;
}

.kg-bookmark-description {
    display: -webkit-box;
    overflow-y: hidden;
    margin-top: 12px;
    max-height: 40px;
    color: #738a94;
    font-size: 13px;
    line-height: 1.5em;
    font-weight: 400;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kg-bookmark-thumbnail {
    min-width: 140px;
    max-width: 180px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 0 2px 2px 0;
}

.kg-bookmark-thumbnail img {
    display: none;
}

.kg-bookmark-metadata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
    color: #15212A;
    font-size: 13px;
    font-weight: 400;
}

.kg-bookmark-icon {
    margin-right: 8px;
    width: 22px;
    height: 22px;
}

.kg-bookmark-author {
    line-height: 1.5em;
}

.kg-bookmark-author:after {
    content: "•";
    margin: 0 6px;
}

.kg-bookmark-publisher {
    overflow: hidden;
    max-width: 240px;
    line-height: 1.5em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kg-gallery-container {
    margin-top: -20px;
}

.kg-gallery-image img {
    width: 100% !important;
    height: auto !important;
    padding-top: 20px;
}

.kg-video-preview {
    background-color: #1d1f21;
    background-image: radial-gradient(circle at center, #5b5f66, #1d1f21);
    display: block;
    text-decoration: none !important;
}
.kg-video-preview table {
    background-size: cover;
    min-height: 200px; /* for when images aren't loaded */
}
.kg-video-play-button {
    height: 2em;
    width: 3em;
    margin: 0 auto;
    border-radius: 10px;
    padding: 1em 0.8em 0.6em 1em;
    font-size: 1em; /* change this to resize */
    background-color: rgba(0,0,0,0.85);
}
.kg-video-play-button div {
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    line-height: 0px; /* fix for Yahoo Mail */
    border-color: transparent transparent transparent white;
    border-style: solid;
    border-width: 0.8em 0 0.8em 1.5em;
}


/* -------------------------------------
    HEADER, FOOTER, MAIN
------------------------------------- */
.main {
    background: #ffffff;
    border-radius: 3px;
    width: 100%;
}

.wrapper {
    box-sizing: border-box;
    padding: 0 20px;
}

.content-block {
    padding-bottom: 10px;
    padding-top: 10px;
}

.footer {
    color: #738a94;
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    padding-bottom: 40px;
    padding-top: 50px;
}

/* -------------------------------------
    BUTTONS
------------------------------------- */
.btn {
    box-sizing: border-box;
    width: 100%;
}

.btn>tbody>tr>td {
    padding-bottom: 15px;
}

.btn table {
    width: auto;
}

.btn table td {
    background-color: #ffffff;
    border-radius: 5px;
    text-align: center;
}

.btn a {
    background-color: #ffffff;
    border: solid 1px #3498db;
    border-radius: 5px;
    box-sizing: border-box;
    color: #3498db;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding: 12px 25px;
    text-decoration: none;
    text-transform: capitalize;
}

.btn-primary table td {
    background-color: #3498db;
}

.btn-primary a {
    background-color: #3498db;
    border-color: #3498db;
    color: #ffffff;
}

/* -------------------------------------
    OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
    margin-bottom: 0;
}

.first {
    margin-top: 0;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

.align-left {
    text-align: left;
}

.clear {
    clear: both;
}

.mt0 {
    margin-top: 0;
}

.mb0 {
    margin-bottom: 0;
}

.preheader {
    color: transparent;
    display: none;
    height: 0;
    max-height: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    mso-hide: all;
    visibility: hidden;
    width: 0;
}

/* -------------------------------------
    RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 620px) {

    table.body {
        width: 100%;
        min-width: 100%;
    }

    table.body p,
    table.body ul,
    table.body ol,
    table.body td,
    table.body span {
        font-size: 16px !important;
    }

    table.body pre {
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }

    table.body .wrapper,
    table.body .article {
        padding: 0 10px !important;
    }

    table.body .content {
        padding: 0 !important;
    }

    table.body .container {
        padding: 0 !important;
        width: 100% !important;
    }

    table.body .main {
        border-left-width: 0 !important;
        border-radius: 0 !important;
        border-right-width: 0 !important;
    }

    table.body .btn table {
        width: 100% !important;
    }

    table.body .btn a {
        width: 100% !important;
    }

    table.body .img-responsive {
        height: auto !important;
        max-width: 100% !important;
        width: auto !important;
    }

    table.body .site-icon img {
        width: 40px !important;
        height: 40px !important;
    }

    table.body .site-url a {
        font-size: 14px !important;
        padding-bottom: 15px !important;
    }

    table.body .post-meta {
        white-space: normal !important;
        font-size: 12px !important;
        line-height: 1.5em;
    }

    table.body .view-online-link,
    table.body .footer,
    table.body .footer a {
        font-size: 12px !important;
    }

    table.body .post-title a {
        font-size: 32px !important;
        line-height: 1.15em !important;
    }

    table.body .kg-bookmark-card {
        width: 90vw !important;
    }

    table.body .kg-bookmark-thumbnail {
        display: none !important;
    }

    table.body .kg-bookmark-metadata span {
        font-size: 13px !important;
    }

    table.body .kg-embed-card {
        max-width: 90vw !important;
    }

    table.body h1 {
        font-size: 32px !important;
        line-height: 1.3em !important;
    }

    table.body h2 {
        font-size: 26px !important;
        line-height: 1.22em !important;
    }

    table.body h3 {
        font-size: 21px !important;
        line-height: 1.25em !important;
    }

    table.body h4 {
        font-size: 19px !important;
        line-height: 1.3em !important;
    }

    table.body h5 {
        font-size: 16px !important;
        line-height: 1.4em !important;
    }

    table.body h6 {
        font-size: 16px !important;
        line-height: 1.4em !important;
    }

    table.body blockquote {
        font-size: 17px !important;
        line-height: 1.6em !important;
        margin-bottom: 0 !important;
        padding-left: 15px !important;
    }

    table.body blockquote + * {
        margin-top: 1.5em !important;
    }

    table.body hr {
        margin: 2em 0 !important;
    }

    table.body figcaption,
    table.body figcaption a {
        font-size: 13px !important;
    }

}

/* -------------------------------------
    PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
@media all {
    .ExternalClass {
        width: 100%;
    }

    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div {
        line-height: 100%;
    }

    .apple-link a {
        color: inherit !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-decoration: none !important;
    }

    #MessageViewBody a {
        color: inherit;
        text-decoration: none;
        font-size: inherit;
        font-family: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    .btn-primary table td:hover {
        background-color: #34495e !important;
    }

    .btn-primary a:hover {
        background-color: #34495e !important;
        border-color: #34495e !important;
    }
}


${ templateConfig.showPoweredBy ? `
.footer-powered {
    text-align: center;
    padding-bottom: 40px;
}

.gh-powered {
    width: 142px;
    height: 30px;
}
` : ''}

/* ----- ENDIF THE BROWSER ----- */

</style>
</head>

<body class="">
    <span class="preheader">${ post.excerpt ? post.excerpt : `${post.title} – ` }</span>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" width="100%">

        <!-- Outlook doesn't respect max-width so we need an extra centered table -->
        <!--[if mso]>
        <tr>
            <td>
                <center>
                    <table border="0" cellpadding="0" cellspacing="0" width="600">
        <![endif]-->

        <tr>
            <td>&nbsp;</td>
            <td class="container">
                <div class="content">

                    <!-- START CENTERED WHITE CONTAINER -->
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main" width="100%">

                        <!-- START MAIN CONTENT AREA -->
                        <tr>
                            <td class="wrapper">
                                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">


                                    ${ templateConfig.showSiteHeader ? `
                                    <tr>
                                        <td class="site-info" width="100%" align="center">
                                            <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                                                ${ site.iconUrl ? `
                                                <tr>
                                                    <td class="site-icon"><a href="${site.url}"><img src="${site.iconUrl}" border="0"></a></td>
                                                </tr>
                                                ` : ``}
                                                <tr>
                                                    <td class="site-url"><div style="width: 100% !important;"><a href="${site.url}">${site.title}</a></div></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    ` : ''}


                                    <tr>
                                        <td class="post-title"><a href="${post.url}" class="post-title-link">${post.title}</a></td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                                <tr>
                                                    <td class="post-meta">
                                                        By ${post.authors} –
                                                        ${post.published_at} –
                                                        <a href="${post.url}" class="view-online-link">View online →</a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    ${post.feature_image ? `
                                    <tr>
                                        <td class="feature-image"><img src="${post.feature_image}"></td>
                                    </tr>
                                    ` : ``}
                                    <tr>
                                        <td class="post-content">
                                            <!-- POST CONTENT START -->
                                            ${post.html}
                                            <!-- POST CONTENT END -->

                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>

                        <!-- END MAIN CONTENT AREA -->

                        <tr>
                            <td class="wrapper" align="center">
                                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                        <td class="footer">${site.title} &copy; ${date.getFullYear()} – <a href="%recipient.unsubscribe_url%">Unsubscribe</a></td>
                                    </tr>

                                    ${ templateConfig.showPoweredBy ? `
                                    <tr>
                                        <td class="footer-powered"><a href="https://ghost.org/"><img src="https://static.ghost.org/v3.0.0/images/powered.png" border="0" width="142" height="30" class="gh-powered" alt="Publish with Ghost"></a></td>
                                    </tr>
                                    ` : '' }
                                </table>
                            </td>
                        </tr>

                    </table>
                    <!-- END CENTERED WHITE CONTAINER -->
                </div>
            </td>
            <td>&nbsp;</td>
        </tr>

    <!--[if mso]>
                    </table>
                </center>
            </td>
        </tr>
    <![endif]-->

    </table>
</body>

</html>`;
};
-												Added eslint ignore comments for template

no-issue

											
										
										
											2019-11-06 09:12:21 +03:00
+								/* eslint indent: warn, no-irregular-whitespace: warn */
-												Added minor member newsletter customisations via config

no issue
- adds a `members:emailTemplate` config object
  - `showSiteHeader` - defaults to `true`, shows the site title and icon in member emails
  - `showPoweredBy` - defaults to `false`, adds a "Publish with Ghost" button to member email footer
- updates member newsletter email template with hideable site header and "powered by" badge

											
										
										
											2020-08-20 18:14:43 +03:00
+								module.exports = ({post, site, templateConfig}) => {
-												Added authors to email preview template

											
										
										
											2019-11-06 14:03:28 +03:00
+								    const date = new Date();
-												Added current year in email footer

											
										
										
											2019-11-06 12:16:50 +03:00
+								    return `<!doctype html>
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								<html>
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
 								<head>
 								<meta name="viewport" content="width=device-width" />
 								<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 								<title>${post.title}</title>
 								<style>
 								/* -------------------------------------
 								    GLOBAL RESETS
 								------------------------------------- */
 								/*All the styling goes here*/
 								img {
 								    border: none;
 								    -ms-interpolation-mode: bicubic;
 								    max-width: 100%;
 								}
 								body {
 								    background-color: #fff;
 								    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 								    -webkit-font-smoothing: antialiased;
 								    font-size: 18px;
 								    line-height: 1.4;
 								    margin: 0;
 								    padding: 0;
 								    -ms-text-size-adjust: 100%;
 								    -webkit-text-size-adjust: 100%;
 								    color: #15212A;
 								}
 								table {
 								    border-collapse: separate;
 								    mso-table-lspace: 0pt;
 								    mso-table-rspace: 0pt;
 								    width: 100%;
 								}
 								table td {
 								    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 								    font-size: 18px;
 								    vertical-align: top;
 								    color: #15212A;
 								}
 								/* -------------------------------------
 								    BODY & CONTAINER
 								------------------------------------- */
 								.body {
 								    background-color: #fff;
 								    width: 100%;
 								}
 								/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
 								.container {
 								    display: block;
 								    margin: 0 auto !important;
 								    /* makes it centered */
 								    max-width: 600px;
 								}
 								/* This should also be a block element, so that it will fill 100% of the .container */
 								.content {
 								    box-sizing: border-box;
 								    display: block;
 								    margin: 0 auto;
 								    max-width: 600px;
 								}
 								/* -------------------------------------
 								    POST CONTENT
 								------------------------------------- */
 								hr {
 								    position: relative;
 								    display: block;
 								    width: 100%;
 								    margin: 3em 0;
 								    padding: 0;
 								    height: 1px;
 								    border: 0;
 								    border-top: 1px solid #e5eff5;
 								}
 								p,
 								ul,
 								ol,
 								dl,
 								blockquote {
 								    margin: 0 0 1.5em 0;
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								    line-height: 1.6em;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
 								ol,
 								ul {
 								    padding-left: 1.3em;
 								    padding-right: 1.5em;
 								}
 								ol ol,
 								ul ul,
 								ul ol,
 								ol ul {
 								    margin: 0.5em 0 1em;
 								}
 								ul {
 								    list-style: disc;
 								}
 								ol {
 								    list-style: decimal;
 								}
 								ul,
 								ol {
 								    max-width: 100%;
 								}
 								li {
 								    margin: 0.5em 0;
 								    padding-left: 0.3em;
 								    line-height: 1.6em;
 								}
 								dt {
 								    float: left;
 								    margin: 0 20px 0 0;
 								    width: 120px;
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    color: #15212A;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    font-weight: 500;
 								    text-align: right;
 								}
 								dd {
 								    margin: 0 0 5px 0;
 								    text-align: left;
 								}
 								blockquote {
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    margin: 2em 0;
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								    padding: 0 25px 0 25px;
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    border-left: #15212A 2px solid;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    font-style: italic;
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								    font-size: 20px;
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    line-height: 1.75em;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    letter-spacing: -0.2px;
 								}
 								blockquote p {
 								    margin: 0.8em 0;
 								    font-size: 1.2em;
 								    font-weight: 300;
 								}
 								blockquote small {
 								    display: inline-block;
 								    margin: 0.8em 0 0.8em 1.5em;
 								    font-size: 0.9em;
 								    opacity: 0.8;
 								}
 								blockquote cite {
 								    font-weight: bold;
 								}
 								blockquote cite a {
 								    font-weight: normal;
 								}
 								a {
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    color: #15212A;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    text-decoration: none;
 								}
 								h1,
 								h2,
 								h3,
 								h4,
 								h5,
 								h6 {
 								    margin-top: 0;
 								    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    line-height: 1.15em;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    font-weight: 600;
 								    text-rendering: optimizeLegibility;
 								}
 								h1 {
 								    margin: 1.5em 0 0.5em 0;
-												Refined mail design

											
										
										
											2019-11-13 16:11:54 +03:00
+								    font-size: 42px;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    font-weight: 600;
 								}
 								h2 {
 								    margin: 1.5em 0 0.5em 0;
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    font-size: 32px;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    line-height: 1.22em;
 								}
 								h3 {
 								    margin: 1.5em 0 0.5em 0;
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    font-size: 26px;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    line-height: 1.25em;
 								}
 								h4 {
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    margin: 1.8em 0 0.5em 0;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    font-size: 21px;
 								    line-height: 1.3em;
 								}
 								h5 {
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    margin: 2em 0 0.5em 0;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    font-size: 19px;
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    line-height: 1.4em;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
 								h6 {
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    margin: 2em 0 0.5em 0;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    font-size: 19px;
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    line-height: 1.4em;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    font-weight: 700;
 								}
 								strong {
 								    font-weight: 700;
 								}
 								figure {
 								    margin: 0 0 1.5em;
 								    padding: 0;
 								}
 								figcaption {
 								    text-align: center;
 								    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 								    font-size: 14px;
-												Email design refinements

											
										
										
											2019-11-20 20:27:52 +03:00
+								    padding-top: 5px;
-												🐛 Fixed small image alignment for newsletters

no refs.
- fixed image alignment to be center for images smaller than newsletter content width

											
										
										
											2020-01-21 15:21:45 +03:00
+								    line-height: 1.5em;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								code {
 								    font-size: 0.9em;
 								}
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								pre {
 								    white-space: pre-wrap;
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    background: #15212A;
 								    padding: 15px;
 								    border-radius: 3px;
 								    line-height: 1.2em;
 								    color: #ffffff;
 								}
 								p code {
 								    background: #F2F7FA;
 								    word-break: break-all;
 								    padding: 1px 7px;
 								    border-radius: 3px;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
 								figure blockquote p {
 								    font-size: 1em;
 								}
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								.site-icon {
-												Refined mail design

											
										
										
											2019-11-13 16:11:54 +03:00
+								    padding-bottom: 10px;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    padding-top: 20px;
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    text-align: center;
 								    border-radius: 3px;
 								}
 								.site-icon img {
 								    width: 48px;
 								    height: 48px;
 								    border-radius: 3px;
 								}
 								.site-info {
-												Refined mail design

											
										
										
											2019-11-13 16:11:54 +03:00
+								    padding-top: 50px;
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								    border-bottom: 1px solid #e5eff5;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
 								.site-url {
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    color: #15212A;
 								    font-size: 16px;
 								    letter-spacing: -0.1px;
 								    font-weight: 700;
 								    text-transform: uppercase;
 								    text-align: center;
-												Refined mail design

											
										
										
											2019-11-13 16:11:54 +03:00
+								    padding-bottom: 50px;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
 								.post-title {
-												Email design refinements

											
										
										
											2019-11-20 20:27:52 +03:00
+								    padding-bottom: 10px;
-												Refined mail design

											
										
										
											2019-11-13 16:11:54 +03:00
+								    font-size: 42px;
 								    line-height: 1.1em;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    font-weight: 600;
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    text-align: center;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
 								.post-title-link {
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    color: #15212A;
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								    display: block;
 								    text-align: center;
 								    margin-top: 50px;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								.post-meta,
 								.view-online {
-												Refined mail design

											
										
										
											2019-11-13 16:11:54 +03:00
+								    padding-bottom: 50px;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    white-space: nowrap;
 								    color: #738a94;
 								    font-size: 13px;
 								    letter-spacing: 0.2px;
 								    text-transform: uppercase;
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    text-align: center;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
 								.view-online {
 								    text-align: right;
 								}
 								.view-online-link {
 								    word-wrap: none;
 								    white-space: nowrap;
-												Refined email template

											
										
										
											2019-11-06 11:39:10 +03:00
+								    color: #15212A;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								.feature-image {
 								    padding-bottom: 30px;
 								    width: 100%;
 								}
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								.post-content {
 								    max-width: 600px !important;
 								    font-family: Georgia, serif;
 								    font-size: 18px;
 								    line-height: 1.5em;
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    color: #23323D;
-												Email design refinements

											
										
										
											2019-11-20 20:27:52 +03:00
+								    padding-bottom: 20px;
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								    border-bottom: 1px solid #e5eff5;
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								}
 								.post-content a {
 								    color: #08121A;
 								    text-decoration: underline;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
 								.kg-bookmark-card {
 								    width: 100%;
 								    background: #ffffff;
 								}
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								.kg-bookmark-card a {
 								    text-decoration: none;
 								}
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								.kg-card + .kg-bookmark-card {
 								    margin-top: 0;
 								}
-												🐛 Fixed small image alignment for newsletters

no refs.
- fixed image alignment to be center for images smaller than newsletter content width

											
										
										
											2020-01-21 15:21:45 +03:00
+								.kg-image-card img {
 								    display: block;
 								    margin: 0 auto;
-												🐛 Fixed emails appearing very wide in Outlook and improved email image sizes

closes https://github.com/TryGhost/Ghost/issues/11536

- bumps `@tryghost/kg-default-cards`
  - image and gallery cards now output `width/height` attributes on `img` elements with a max width of 600px
  - uses resized images where possible to keep email weight down
- adds `height: auto` style to image card images so that the `height` attribute does not cause distortion at smaller screen widths

											
										
										
											2020-08-18 17:33:40 +03:00
+								    height: auto !important;
-												🐛 Fixed small image alignment for newsletters

no refs.
- fixed image alignment to be center for images smaller than newsletter content width

											
										
										
											2020-01-21 15:21:45 +03:00
+								}
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								.kg-bookmark-container {
 								    display: flex;
 								    min-height: 148px;
 								    color: #15212A;
 								    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 								    text-decoration: none;
 								    border-radius: 3px;
 								    border: 1px solid #e5eff5;
 								}
 								.kg-bookmark-content {
 								    flex-grow: 1;
 								    padding: 20px;
 								}
 								.kg-bookmark-title {
 								    color: #15212A;
 								    font-size: 15px;
 								    line-height: 1.5em;
 								    font-weight: 600;
 								}
 								.kg-bookmark-description {
 								    display: -webkit-box;
 								    overflow-y: hidden;
 								    margin-top: 12px;
 								    max-height: 40px;
 								    color: #738a94;
 								    font-size: 13px;
 								    line-height: 1.5em;
 								    font-weight: 400;
 								    -webkit-line-clamp: 2;
 								    -webkit-box-orient: vertical;
 								}
 								.kg-bookmark-thumbnail {
 								    min-width: 140px;
 								    max-width: 180px;
-												🐛 Fixed bookmark card display in member emails when using Gmail+Chrome

no issue

- updates `@tryghost/kg-default-cards` which contains two fixes
  - removes email-specific output being added to post html (had no visual impact due to use of conditional comments but keeps rendered html smaller+cleaner)
  - adds a background-url style to the thumbnail container to give two options for styling
- updates member email template styling to hide the `<img>` element in bookmark cards and use a background image instead to get consistent rendering across email clients

											
										
										
											2020-08-24 20:17:22 +03:00
+								    background-repeat: no-repeat;
 								    background-size: cover;
 								    background-position: center;
 								    border-radius: 0 2px 2px 0;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
 								.kg-bookmark-thumbnail img {
-												🐛 Fixed bookmark card display in member emails when using Gmail+Chrome

no issue

- updates `@tryghost/kg-default-cards` which contains two fixes
  - removes email-specific output being added to post html (had no visual impact due to use of conditional comments but keeps rendered html smaller+cleaner)
  - adds a background-url style to the thumbnail container to give two options for styling
- updates member email template styling to hide the `<img>` element in bookmark cards and use a background image instead to get consistent rendering across email clients

											
										
										
											2020-08-24 20:17:22 +03:00
+								    display: none;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
 								.kg-bookmark-metadata {
 								    display: flex;
 								    flex-wrap: wrap;
 								    align-items: center;
 								    margin-top: 14px;
 								    color: #15212A;
 								    font-size: 13px;
 								    font-weight: 400;
 								}
 								.kg-bookmark-icon {
 								    margin-right: 8px;
 								    width: 22px;
 								    height: 22px;
 								}
 								.kg-bookmark-author {
 								    line-height: 1.5em;
 								}
 								.kg-bookmark-author:after {
 								    content: "•";
 								    margin: 0 6px;
 								}
 								.kg-bookmark-publisher {
 								    overflow: hidden;
 								    max-width: 240px;
 								    line-height: 1.5em;
 								    text-overflow: ellipsis;
 								    white-space: nowrap;
 								}
-												Email design refinements

											
										
										
											2019-11-20 20:27:52 +03:00
+								.kg-gallery-container {
 								    margin-top: -20px;
 								}
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								.kg-gallery-image img {
 								    width: 100% !important;
-												Fixed gallery image height

											
										
										
											2019-11-07 13:17:20 +03:00
+								    height: auto !important;
-												Email design refinements

											
										
										
											2019-11-20 20:27:52 +03:00
+								    padding-top: 20px;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
-												✨ Improved display of video embed cards in member emails

refs core/server/api/canary/oembed.js

- updated `kg-default-cards` to a version that will render a thumbnail and play button overlay for video embed cards when rendering to an email target
- added styling for video embed play button overlays to members email template

											
										
										
											2020-04-29 18:44:10 +03:00
+								.kg-video-preview {
 								    background-color: #1d1f21;
 								    background-image: radial-gradient(circle at center, #5b5f66, #1d1f21);
 								    display: block;
 								    text-decoration: none !important;
 								}
 								.kg-video-preview table {
 								    background-size: cover;
-												Fixed video embed card fallback display in Outlook

refs https://github.com/TryGhost/Ghost/issues/11756

- updates `@tryghost/kg-default-cards` which includes a VML version of video embed card fallbacks
- fixes play button styling for Yahoo Mail
- adds a minimum height to video embeds so they appear more reasonable when images are not loaded

											
										
										
											2020-04-30 14:07:49 +03:00
+								    min-height: 200px; /* for when images aren't loaded */
-												✨ Improved display of video embed cards in member emails

refs core/server/api/canary/oembed.js

- updated `kg-default-cards` to a version that will render a thumbnail and play button overlay for video embed cards when rendering to an email target
- added styling for video embed play button overlays to members email template

											
										
										
											2020-04-29 18:44:10 +03:00
+								}
 								.kg-video-play-button {
 								    height: 2em;
 								    width: 3em;
 								    margin: 0 auto;
 								    border-radius: 10px;
 								    padding: 1em 0.8em 0.6em 1em;
 								    font-size: 1em; /* change this to resize */
 								    background-color: rgba(0,0,0,0.85);
 								}
 								.kg-video-play-button div {
-												Fixed video embed card fallback display across gmail apps

refs https://github.com/TryGhost/Ghost/issues/11756

- bumped kg-default-cards package to generate fixed html for video embed fallbacks

											
										
										
											2020-05-01 15:22:40 +03:00
+								    display: block;
 								    width: 0;
 								    height: 0;
 								    margin: 0 auto;
-												Fixed video embed card fallback display in Outlook

refs https://github.com/TryGhost/Ghost/issues/11756

- updates `@tryghost/kg-default-cards` which includes a VML version of video embed card fallbacks
- fixes play button styling for Yahoo Mail
- adds a minimum height to video embeds so they appear more reasonable when images are not loaded

											
										
										
											2020-04-30 14:07:49 +03:00
+								    line-height: 0px; /* fix for Yahoo Mail */
-												✨ Improved display of video embed cards in member emails

refs core/server/api/canary/oembed.js

- updated `kg-default-cards` to a version that will render a thumbnail and play button overlay for video embed cards when rendering to an email target
- added styling for video embed play button overlays to members email template

											
										
										
											2020-04-29 18:44:10 +03:00
+								    border-color: transparent transparent transparent white;
 								    border-style: solid;
 								    border-width: 0.8em 0 0.8em 1.5em;
 								}
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
 								/* -------------------------------------
 								    HEADER, FOOTER, MAIN
 								------------------------------------- */
 								.main {
 								    background: #ffffff;
 								    border-radius: 3px;
 								    width: 100%;
 								}
 								.wrapper {
 								    box-sizing: border-box;
-												Refined mail design

											
										
										
											2019-11-13 16:11:54 +03:00
+								    padding: 0 20px;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
 								.content-block {
 								    padding-bottom: 10px;
 								    padding-top: 10px;
 								}
 								.footer {
-												Refined email template

											
										
										
											2019-11-06 11:39:10 +03:00
+								    color: #738a94;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    margin-top: 20px;
 								    text-align: center;
 								    font-size: 13px;
 								    padding-bottom: 40px;
-												Email design refinements

											
										
										
											2019-11-20 20:27:52 +03:00
+								    padding-top: 50px;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
 								/* -------------------------------------
 								    BUTTONS
 								------------------------------------- */
 								.btn {
 								    box-sizing: border-box;
 								    width: 100%;
 								}
 								.btn>tbody>tr>td {
 								    padding-bottom: 15px;
 								}
 								.btn table {
 								    width: auto;
 								}
 								.btn table td {
 								    background-color: #ffffff;
 								    border-radius: 5px;
 								    text-align: center;
 								}
 								.btn a {
 								    background-color: #ffffff;
 								    border: solid 1px #3498db;
 								    border-radius: 5px;
 								    box-sizing: border-box;
 								    color: #3498db;
 								    cursor: pointer;
 								    display: inline-block;
 								    font-size: 14px;
 								    font-weight: bold;
 								    margin: 0;
 								    padding: 12px 25px;
 								    text-decoration: none;
 								    text-transform: capitalize;
 								}
 								.btn-primary table td {
 								    background-color: #3498db;
 								}
 								.btn-primary a {
 								    background-color: #3498db;
 								    border-color: #3498db;
 								    color: #ffffff;
 								}
 								/* -------------------------------------
 								    OTHER STYLES THAT MIGHT BE USEFUL
 								------------------------------------- */
 								.last {
 								    margin-bottom: 0;
 								}
 								.first {
 								    margin-top: 0;
 								}
 								.align-center {
 								    text-align: center;
 								}
 								.align-right {
 								    text-align: right;
 								}
 								.align-left {
 								    text-align: left;
 								}
 								.clear {
 								    clear: both;
 								}
 								.mt0 {
 								    margin-top: 0;
 								}
 								.mb0 {
 								    margin-bottom: 0;
 								}
 								.preheader {
 								    color: transparent;
 								    display: none;
 								    height: 0;
 								    max-height: 0;
 								    max-width: 0;
 								    opacity: 0;
 								    overflow: hidden;
 								    mso-hide: all;
 								    visibility: hidden;
 								    width: 0;
 								}
 								/* -------------------------------------
 								    RESPONSIVE AND MOBILE FRIENDLY STYLES
 								------------------------------------- */
 								@media only screen and (max-width: 620px) {
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body {
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								        width: 100%;
 								        min-width: 100%;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body p,
 								    table.body ul,
 								    table.body ol,
 								    table.body td,
 								    table.body span {
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								        font-size: 16px !important;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body pre {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        white-space: pre-wrap !important;
 								        word-break: break-word !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .wrapper,
 								    table.body .article {
-												Refined mail design

											
										
										
											2019-11-13 16:11:54 +03:00
+								        padding: 0 10px !important;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .content {
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								        padding: 0 !important;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .container {
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								        padding: 0 !important;
 								        width: 100% !important;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .main {
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								        border-left-width: 0 !important;
 								        border-radius: 0 !important;
 								        border-right-width: 0 !important;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .btn table {
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								        width: 100% !important;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .btn a {
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								        width: 100% !important;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .img-responsive {
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								        height: auto !important;
 								        max-width: 100% !important;
 								        width: auto !important;
 								    }
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .site-icon img {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        width: 40px !important;
 								        height: 40px !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .site-url a {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        font-size: 14px !important;
 								        padding-bottom: 15px !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .post-meta {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        white-space: normal !important;
 								        font-size: 12px !important;
 								        line-height: 1.5em;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .view-online-link,
 								    table.body .footer,
 								    table.body .footer a {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        font-size: 12px !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .post-title a {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        font-size: 32px !important;
-												Refined mail design

											
										
										
											2019-11-13 16:11:54 +03:00
+								        line-height: 1.15em !important;
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .kg-bookmark-card {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        width: 90vw !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .kg-bookmark-thumbnail {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        display: none !important;
 								    }
-												✨ Improved display of video embed cards in member emails

refs core/server/api/canary/oembed.js

- updated `kg-default-cards` to a version that will render a thumbnail and play button overlay for video embed cards when rendering to an email target
- added styling for video embed play button overlays to members email template

											
										
										
											2020-04-29 18:44:10 +03:00
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .kg-bookmark-metadata span {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        font-size: 13px !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body .kg-embed-card {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        max-width: 90vw !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body h1 {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        font-size: 32px !important;
 								        line-height: 1.3em !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body h2 {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        font-size: 26px !important;
 								        line-height: 1.22em !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body h3 {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        font-size: 21px !important;
 								        line-height: 1.25em !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body h4 {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        font-size: 19px !important;
 								        line-height: 1.3em !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body h5 {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        font-size: 16px !important;
 								        line-height: 1.4em !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body h6 {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        font-size: 16px !important;
 								        line-height: 1.4em !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body blockquote {
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								        font-size: 17px !important;
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        line-height: 1.6em !important;
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								        margin-bottom: 0 !important;
 								        padding-left: 15px !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body blockquote + * {
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								        margin-top: 1.5em !important;
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								    }
-												✨ Improved display of video embed cards in member emails

refs core/server/api/canary/oembed.js

- updated `kg-default-cards` to a version that will render a thumbnail and play button overlay for video embed cards when rendering to an email target
- added styling for video embed play button overlays to members email template

											
										
										
											2020-04-29 18:44:10 +03:00
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body hr {
-												Refined post email template

											
										
										
											2019-11-06 10:53:29 +03:00
+								        margin: 2em 0 !important;
 								    }
-												🐛 Fixed tiny font sizes sometimes seen in member emails on gmail mobile apps

refs https://github.com/TryGhost/Ghost/issues/11756

- fixed gmail scaling problems
  - the `width: 600px` on `.container` was forcing gmail to always render at 600px wide and then use scaling to resize the email to fit the device width
  - for most emails gmail would also apply their own font resizing to compensate so it didn't look _too_ bad
  - some emails however would not trigger the font resizing, most notably when posts contained a feature image, which would result in very small text
  - removing the fixed `width: 600px` resolves the scaling problem and lets the email be truly responsive
- removed attribute selectors in the media query CSS
  - gmail does not support attribute selectors
  - attribute selectors used to be necessary for Yahoo Mail but this is no longer the case
- tested using litmus.com for all popular email clients

											
										
										
											2020-05-01 13:06:52 +03:00
+								    table.body figcaption,
 								    table.body figcaption a {
-												Refined figcaption size in emails

											
										
										
											2019-11-06 14:35:03 +03:00
+								        font-size: 13px !important;
 								    }
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
 								/* -------------------------------------
 								    PRESERVE THESE STYLES IN THE HEAD
 								------------------------------------- */
 								@media all {
 								    .ExternalClass {
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								        width: 100%;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    }
 								    .ExternalClass,
 								    .ExternalClass p,
 								    .ExternalClass span,
 								    .ExternalClass font,
 								    .ExternalClass td,
 								    .ExternalClass div {
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								        line-height: 100%;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    }
 								    .apple-link a {
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								        color: inherit !important;
 								        font-family: inherit !important;
 								        font-size: inherit !important;
 								        font-weight: inherit !important;
 								        line-height: inherit !important;
 								        text-decoration: none !important;
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								    }
 								    #MessageViewBody a {
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								        color: inherit;
 								        text-decoration: none;
 								        font-size: inherit;
 								        font-family: inherit;
 								        font-weight: inherit;
 								        line-height: inherit;
 								    }
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
 								    .btn-primary table td:hover {
 								        background-color: #34495e !important;
 								    }
 								    .btn-primary a:hover {
 								        background-color: #34495e !important;
 								        border-color: #34495e !important;
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								    }
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								}
-												Added minor member newsletter customisations via config

no issue
- adds a `members:emailTemplate` config object
  - `showSiteHeader` - defaults to `true`, shows the site title and icon in member emails
  - `showPoweredBy` - defaults to `false`, adds a "Publish with Ghost" button to member email footer
- updates member newsletter email template with hideable site header and "powered by" badge

											
										
										
											2020-08-20 18:14:43 +03:00
 								${ templateConfig.showPoweredBy ? `
 								.footer-powered {
 								    text-align: center;
 								    padding-bottom: 40px;
 								}
 								.gh-powered {
 								    width: 142px;
 								    height: 30px;
 								}
 								` : ''}
 								/* ----- ENDIF THE BROWSER ----- */
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								</style>
 								</head>
 								<body class="">
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								    <span class="preheader">${ post.excerpt ? post.excerpt : `${post.title} – ` }</span>
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" width="100%">
-												Fixed Outlook not centring content column in member emails

refs https://github.com/TryGhost/Ghost/issues/11756

- we removed the fixed `width: 600px` to fix gmail scaling but that means we need a new way of creating a 600px centre column in Outlook

											
										
										
											2020-05-01 15:40:02 +03:00
 								        <!-- Outlook doesn't respect max-width so we need an extra centered table -->
 								        <!--[if mso]>
 								        <tr>
 								            <td>
 								                <center>
 								                    <table border="0" cellpadding="0" cellspacing="0" width="600">
 								        <![endif]-->
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								        <tr>
 								            <td>&nbsp;</td>
 								            <td class="container">
 								                <div class="content">
 								                    <!-- START CENTERED WHITE CONTAINER -->
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="main" width="100%">
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
 								                        <!-- START MAIN CONTENT AREA -->
 								                        <tr>
 								                            <td class="wrapper">
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								                                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
-												Added minor member newsletter customisations via config

no issue
- adds a `members:emailTemplate` config object
  - `showSiteHeader` - defaults to `true`, shows the site title and icon in member emails
  - `showPoweredBy` - defaults to `false`, adds a "Publish with Ghost" button to member email footer
- updates member newsletter email template with hideable site header and "powered by" badge

											
										
										
											2020-08-20 18:14:43 +03:00
 								                                    ${ templateConfig.showSiteHeader ? `
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								                                    <tr>
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								                                        <td class="site-info" width="100%" align="center">
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								                                            <table role="presentation" border="0" cellpadding="0" cellspacing="0">
-												🐛 Fixed missing publication icon in newsletter emails

no issue

Email template was incorrectly setting up publication icon url in case of subdirectory setup, leading to missing publication logo from newsletter emails in such cases. This adds the fix to use correct absolute url for publication icons in all setups.

											
										
										
											2020-03-12 07:22:33 +03:00
+								                                                ${ site.iconUrl ? `
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								                                                <tr>
-												🐛 Fixed missing publication icon in newsletter emails

no issue

Email template was incorrectly setting up publication icon url in case of subdirectory setup, leading to missing publication logo from newsletter emails in such cases. This adds the fix to use correct absolute url for publication icons in all setups.

											
										
										
											2020-03-12 07:22:33 +03:00
+								                                                    <td class="site-icon"><a href="${site.url}"><img src="${site.iconUrl}" border="0"></a></td>
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								                                                </tr>
 								                                                ` : ``}
 								                                                <tr>
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								                                                    <td class="site-url"><div style="width: 100% !important;"><a href="${site.url}">${site.title}</a></div></td>
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								                                                </tr>
 								                                            </table>
 								                                        </td>
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								                                    </tr>
-												Added minor member newsletter customisations via config

no issue
- adds a `members:emailTemplate` config object
  - `showSiteHeader` - defaults to `true`, shows the site title and icon in member emails
  - `showPoweredBy` - defaults to `false`, adds a "Publish with Ghost" button to member email footer
- updates member newsletter email template with hideable site header and "powered by" badge

											
										
										
											2020-08-20 18:14:43 +03:00
+								                                    ` : ''}
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								                                    <tr>
 								                                        <td class="post-title"><a href="${post.url}" class="post-title-link">${post.title}</a></td>
 								                                    </tr>
 								                                    <tr>
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								                                        <td align="center">
 								                                            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								                                                <tr>
 								                                                    <td class="post-meta">
-												✨ Improved display of video embed cards in member emails

refs core/server/api/canary/oembed.js

- updated `kg-default-cards` to a version that will render a thumbnail and play button overlay for video embed cards when rendering to an email target
- added styling for video embed play button overlays to members email template

											
										
										
											2020-04-29 18:44:10 +03:00
+								                                                        By ${post.authors} –
 								                                                        ${post.published_at} –
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								                                                        <a href="${post.url}" class="view-online-link">View online →</a>
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								                                                    </td>
 								                                                </tr>
 								                                            </table>
 								                                        </td>
 								                                    </tr>
-												Fixed code linting issues

no issue

- just extraneous whitespace

											
										
										
											2020-02-03 20:49:41 +03:00
+								                                    ${post.feature_image ? `
 								                                    <tr>
 								                                        <td class="feature-image"><img src="${post.feature_image}"></td>
 								                                    </tr>
 								                                    ` : ``}
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								                                    <tr>
 								                                        <td class="post-content">
 								                                            <!-- POST CONTENT START -->
 								                                            ${post.html}
 								                                            <!-- POST CONTENT END -->
 								                                        </td>
 								                                    </tr>
 								                                </table>
 								                            </td>
 								                        </tr>
 								                        <!-- END MAIN CONTENT AREA -->
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
 								                        <tr>
-												Refined email styles

											
										
										
											2019-11-22 13:40:56 +03:00
+								                            <td class="wrapper" align="center">
 								                                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								                                    <tr>
-												Fixed code linting issues

no issue

- just extraneous whitespace

											
										
										
											2020-02-03 20:49:41 +03:00
+								                                        <td class="footer">${site.title} &copy; ${date.getFullYear()} – <a href="%recipient.unsubscribe_url%">Unsubscribe</a></td>
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								                                    </tr>
-												Added minor member newsletter customisations via config

no issue
- adds a `members:emailTemplate` config object
  - `showSiteHeader` - defaults to `true`, shows the site title and icon in member emails
  - `showPoweredBy` - defaults to `false`, adds a "Publish with Ghost" button to member email footer
- updates member newsletter email template with hideable site header and "powered by" badge

											
										
										
											2020-08-20 18:14:43 +03:00
 								                                    ${ templateConfig.showPoweredBy ? `
 								                                    <tr>
 								                                        <td class="footer-powered"><a href="https://ghost.org/"><img src="https://static.ghost.org/v3.0.0/images/powered.png" border="0" width="142" height="30" class="gh-powered" alt="Publish with Ghost"></a></td>
 								                                    </tr>
 								                                    ` : '' }
-												Working on email template

											
										
										
											2019-11-06 06:21:35 +03:00
+								                                </table>
 								                            </td>
 								                        </tr>
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								                    </table>
 								                    <!-- END CENTERED WHITE CONTAINER -->
 								                </div>
 								            </td>
 								            <td>&nbsp;</td>
 								        </tr>
-												Fixed Outlook not centring content column in member emails

refs https://github.com/TryGhost/Ghost/issues/11756

- we removed the fixed `width: 600px` to fix gmail scaling but that means we need a new way of creating a 600px centre column in Outlook

											
										
										
											2020-05-01 15:40:02 +03:00
 								    <!--[if mso]>
 								                    </table>
 								                </center>
 								            </td>
 								        </tr>
 								    <![endif]-->
-												Added basic HTML template support to MEGA (#11336)

no issue

- Sends formatted email to members
- Added css inlining support for MEGA template
- Migrated MEGA service to use API serializers
- Service needs to be compliant with the API to be able to serve absolute URLs for resources like images
- Fixed send email check for previously sent mails
											
										
										
											2019-11-04 13:53:42 +03:00
+								    </table>
-												Updated post email template

											
										
										
											2019-11-05 12:36:40 +03:00
+								</body>
-												Added current year in email footer

											
										
										
											2019-11-06 12:16:50 +03:00
+								</html>`;
-												✨ Improved display of video embed cards in member emails

refs core/server/api/canary/oembed.js

- updated `kg-default-cards` to a version that will render a thumbnail and play button overlay for video embed cards when rendering to an email target
- added styling for video embed play button overlays to members email template

											
										
										
											2020-04-29 18:44:10 +03:00
+								};