ghost 4.29.0 → 4.32.0

package/core/frontend/src/cards/js/before-after.js

@@ -2,35 +2,30 @@
     const beforeAfterCards = [...document.querySelectorAll('.kg-before-after-card')];
 
     for (let card of beforeAfterCards) {
-        const isFullWidth = card.classList.contains('kg-width-full');
         const input = card.querySelector('input');
         const overlay = card.querySelector('.kg-before-after-card-image-before');
-        const orientation = card.querySelector('div').getAttribute('data-orientation');
+        const button = card.querySelector('.kg-before-after-card-slider-button');
         const images = [...card.querySelectorAll('img')];
-        const smallestImageWidth = Math.min(
-            ...images.map(img => parseInt(img.getAttribute('width')))
-        );
 
         function updateSlider() {
-            if (orientation === 'vertical') {
-                overlay.setAttribute('style', `height: ${input.value}%`);
-            } else {
-                overlay.setAttribute('style', `width: ${input.value}%`);
-            }
+            overlay.setAttribute('style', `width: ${input.value}%`);
+            button.setAttribute('style', `left: calc(${input.value}% - 18px`);
         }
 
         function updateDimensions() {
-            const containerWidth = parseInt(getComputedStyle(card).getPropertyValue('width'));
-            const width = isFullWidth ? containerWidth : Math.min(smallestImageWidth, containerWidth);
-            for (let image of images) {
-                image.setAttribute('style', `width: ${width.toString()}px;`);
-            }
+            const imageWidth = getComputedStyle(images[0]).getPropertyValue('width');
+
+            images[1].setAttribute('style', `width: ${imageWidth}`);
         }
 
         input.addEventListener('input', function () {
             updateSlider();
         });
 
+        input.addEventListener('change', function () {
+            input.blur();
+        });
+
         window.addEventListener('resize', function () {
             updateDimensions();
         });

package/core/frontend/src/cards/js/video.js

@@ -1,6 +1,7 @@
 (function() {
     const handleVideoPlayer = function (videoElementContainer) {
-        const videoPlayerContainer = videoElementContainer.querySelector('.kg-video-player');
+        const videoPlayer = videoElementContainer.querySelector('.kg-video-player');
+        const videoPlayerContainer = videoElementContainer.querySelector('.kg-video-player-container');
         const playIconContainer = videoElementContainer.querySelector('.kg-video-play-icon');
         const pauseIconContainer = videoElementContainer.querySelector('.kg-video-pause-icon');
         const seekSlider = videoElementContainer.querySelector('.kg-video-seek-slider');
@@ -11,6 +12,8 @@
         const videoEl = videoElementContainer.querySelector('video');
         const durationContainer = videoElementContainer.querySelector('.kg-video-duration');
         const currentTimeContainer = videoElementContainer.querySelector('.kg-video-current-time');
+        const largePlayIcon = videoElementContainer.querySelector('.kg-video-large-play-icon');
+        const videoOverlay = videoElementContainer.querySelector('.kg-video-overlay');
         let playbackRates = [{
             rate: 0.75,
             label: '0.7×'
@@ -30,20 +33,23 @@
 
         let raf = null;
         let currentPlaybackRateIdx = 1;
-
+        if (!!videoEl.loop) {
+            largePlayIcon.classList.add("kg-video-hide-animated");
+            videoOverlay.classList.add("kg-video-hide-animated");
+        }
         const whilePlaying = () => {
             seekSlider.value = Math.floor(videoEl.currentTime);
             currentTimeContainer.textContent = calculateTime(seekSlider.value);
-            videoPlayerContainer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`);
+            videoPlayer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`);
             raf = requestAnimationFrame(whilePlaying);
         }
 
         const showRangeProgress = (rangeInput) => {
             if (rangeInput === seekSlider) {
-                videoPlayerContainer.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%');
+                videoPlayer.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%');
             }
             else {
-                videoPlayerContainer.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%');
+                videoPlayer.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%');
             }
         }
 
@@ -65,7 +71,7 @@
         const displayBufferedAmount = () => {
             if (videoEl.buffered.length > 0) {
                 const bufferedAmount = Math.floor(videoEl.buffered.end(videoEl.buffered.length - 1));
-                videoPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
+                videoPlayer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
             }
         }
 
@@ -99,33 +105,84 @@
             });
         }
 
-        playIconContainer.addEventListener('click', () => {
+        videoElementContainer.onmouseover = () => {
+            if (!videoEl.loop) {
+                videoPlayerContainer.classList.remove("kg-video-hide-animated");
+            }
+        }
+
+        videoElementContainer.onmouseleave = () => {
+            const isPlaying = !!(videoEl.currentTime > 0 && !videoEl.paused && !videoEl.ended && videoEl.readyState > 2);
+            if (isPlaying) {
+                videoPlayerContainer.classList.add("kg-video-hide-animated");
+            }
+        }
+
+        videoElementContainer.addEventListener('click', () => {
+            if (!videoEl.loop) {
+                const isPlaying = !!(videoEl.currentTime > 0 && !videoEl.paused && !videoEl.ended && videoEl.readyState > 2);
+                if (isPlaying) {
+                    handleOnPause();
+                } else {
+                    handleOnPlay();
+                }
+            }
+        });
+
+        videoEl.onplay = () => {
+            largePlayIcon.classList.add("kg-video-hide-animated");
+            videoOverlay.classList.add("kg-video-hide-animated");
+            playIconContainer.classList.add("kg-video-hide");
+            pauseIconContainer.classList.remove("kg-video-hide");
+        };
+
+        const handleOnPlay = () => {
+            largePlayIcon.classList.add("kg-video-hide-animated");
+            videoOverlay.classList.add("kg-video-hide-animated");
             playIconContainer.classList.add("kg-video-hide");
             pauseIconContainer.classList.remove("kg-video-hide");
             videoEl.play();
             raf = requestAnimationFrame(whilePlaying);
-        });
+        }
 
-        pauseIconContainer.addEventListener('click', () => {
+        const handleOnPause = () => {
             pauseIconContainer.classList.add("kg-video-hide");
             playIconContainer.classList.remove("kg-video-hide");
             videoEl.pause();
             cancelAnimationFrame(raf);
+        }
+
+        largePlayIcon.addEventListener('click', (event) => {
+            event.stopPropagation();
+            handleOnPlay();
+        });
+
+        playIconContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
+            handleOnPlay();
         });
 
-        muteIconContainer.addEventListener('click', () => {
+        pauseIconContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
+            handleOnPause();
+        });
+
+        muteIconContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
             muteIconContainer.classList.add("kg-video-hide");
             unmuteIconContainer.classList.remove("kg-video-hide");
             videoEl.muted = false;
         });
 
-        unmuteIconContainer.addEventListener('click', () => {
+        unmuteIconContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
             unmuteIconContainer.classList.add("kg-video-hide");
             muteIconContainer.classList.remove("kg-video-hide");
             videoEl.muted = true;
         });
 
-        playbackRateContainer.addEventListener('click', () => {
+        playbackRateContainer.addEventListener('click', (event) => {
+            event.stopPropagation();
             let nextPlaybackRate = playbackRates[(currentPlaybackRateIdx + 1) % 5];
             currentPlaybackRateIdx = currentPlaybackRateIdx + 1;
             videoEl.playbackRate = nextPlaybackRate.rate;
@@ -135,6 +192,7 @@
         videoEl.addEventListener('progress', displayBufferedAmount);
 
         seekSlider.addEventListener('input', (e) => {
+            e.stopPropagation();
             showRangeProgress(e.target);
             currentTimeContainer.textContent = calculateTime(seekSlider.value);
             if (!videoEl.paused) {
@@ -142,14 +200,24 @@
             }
         });
 
-        seekSlider.addEventListener('change', () => {
+        seekSlider.addEventListener('change', (event) => {
+            event.stopPropagation();
             videoEl.currentTime = seekSlider.value;
             if (!videoEl.paused) {
                 requestAnimationFrame(whilePlaying);
             }
         });
 
+        volumeSlider.addEventListener('click', (event) => {
+            event.stopPropagation();
+        });
+
+        seekSlider.addEventListener('click', (event) => {
+            event.stopPropagation();
+        });
+
         volumeSlider.addEventListener('input', (e) => {
+            e.stopPropagation();
             const value = e.target.value;
             showRangeProgress(e.target);
             videoEl.volume = value / 100;

package/core/frontend/web/middleware/error-handler.js

@@ -7,7 +7,7 @@ const config = require('../../../shared/config');
 const helpers = require('../../services/routing/helpers');
 
 // @TODO: make this properly shared code
-const shared = require('../../../server/web/shared/middleware/error-handler');
+const {prepareError} = require('@tryghost/mw-error-handler');
 
 const messages = {
     oopsErrorTemplateHasError: 'Oops, seems there is an error in the error template.',
@@ -85,7 +85,7 @@ const themeErrorRenderer = (err, req, res, next) => {
 
 module.exports.handleThemeResponse = [
     // Make sure the error can be served
-    shared.prepareError,
+    prepareError,
     // Handle the error in Sentry
     sentry.errorHandler,
     // Render the error using theme template

package/core/frontend/web/site.js

@@ -20,6 +20,7 @@ const offersService = require('../../server/services/offers');
 const customRedirects = require('../../server/services/redirects');
 const siteRoutes = require('./routes');
 const shared = require('../../server/web/shared');
+const errorHandler = require('@tryghost/mw-error-handler');
 const mw = require('./middleware');
 const labs = require('../../shared/labs');
 
@@ -176,7 +177,7 @@ module.exports = function setupSiteApp(options = {}) {
     siteApp.use(SiteRouter);
 
     // ### Error handlers
-    siteApp.use(shared.middleware.errorHandler.pageNotFound);
+    siteApp.use(errorHandler.pageNotFound);
     config.get('apps:internal').forEach((appName) => {
         const app = require(path.join(config.get('paths').internalAppPath, appName));
 

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

@@ -15,8 +15,7 @@ const Twitter = require('../../services/twitter-embed');
 const twitter = new Twitter({
     config: {
         bearerToken: config.get('twitter').privateReadOnlyToken
-    },
-    logging: require('@tryghost/logging')
+    }
 });
 
 oembed.registerProvider(nft);

package/core/server/data/db/state-manager.js

@@ -1,5 +1,6 @@
 const KnexMigrator = require('knex-migrator');
 const errors = require('@tryghost/errors');
+const logging = require('@tryghost/logging');
 
 const states = {
     READY: 0,
@@ -8,7 +9,7 @@ const states = {
     ERROR: 3
 };
 
-const printState = ({state, logging}) => {
+const printState = ({state}) => {
     if (state === states.READY) {
         logging.info('Database is in a ready state.');
     }
@@ -67,13 +68,11 @@ class DatabaseStateManager {
         }
     }
 
-    async makeReady({logging}) {
+    async makeReady() {
         try {
             let state = await this.getState();
 
-            if (logging) {
-                printState({state, logging});
-            }
+            printState({state});
 
             if (state === states.READY) {
                 return;
@@ -89,9 +88,7 @@ class DatabaseStateManager {
 
             state = await this.getState();
 
-            if (logging) {
-                printState({state, logging});
-            }
+            printState({state});
         } catch (error) {
             let errorToThrow = error;
             if (!errors.utils.isGhostError(error)) {

package/core/server/lib/image/cached-image-size-from-url.js

@@ -1,9 +1,8 @@
 const debug = require('@tryghost/debug')('utils:image-size-cache');
 const errors = require('@tryghost/errors');
-
+const logging = require('@tryghost/logging');
 class CachedImageSizeFromUrl {
-    constructor({logging, imageSize}) {
-        this.logging = logging;
+    constructor({imageSize}) {
         this.imageSize = imageSize;
         this.cache = new Map();
     }
@@ -37,7 +36,7 @@ class CachedImageSizeFromUrl {
                 return this.cache.get(url);
             }).catch((err) => {
                 debug('Cached image (error):', url);
-                this.logging.error(err);
+                logging.error(err);
     
                 // in case of error we just attach the url
                 this.cache.set(url, url);

package/core/server/lib/image/image-utils.js

@@ -4,10 +4,10 @@ const Gravatar = require('./gravatar');
 const ImageSize = require('./image-size');
 
 class ImageUtils {
-    constructor({config, logging, urlUtils, settingsCache, storageUtils, storage, validator, request}) {
+    constructor({config, urlUtils, settingsCache, storageUtils, storage, validator, request}) {
         this.blogIcon = new BlogIcon({config, urlUtils, settingsCache, storageUtils});
         this.imageSize = new ImageSize({config, storage, storageUtils, validator, urlUtils, request});
-        this.cachedImageSizeFromUrl = new CachedImageSizeFromUrl({logging, imageSize: this.imageSize});
+        this.cachedImageSizeFromUrl = new CachedImageSizeFromUrl({imageSize: this.imageSize});
         this.gravatar = new Gravatar({config, request});
     }
 }

package/core/server/lib/image/index.js

@@ -4,8 +4,7 @@ const storage = require('../../adapters/storage');
 const storageUtils = require('../../adapters/storage/utils');
 const validator = require('@tryghost/validator');
 const config = require('../../../shared/config');
-const logging = require('@tryghost/logging');
 const settingsCache = require('../../../shared/settings-cache');
 const ImageUtils = require('./image-utils');
 
-module.exports = new ImageUtils({config, logging, urlUtils, settingsCache, storageUtils, storage, validator, request});
+module.exports = new ImageUtils({config, urlUtils, settingsCache, storageUtils, storage, validator, request});

package/core/server/run-update-check.js

@@ -31,18 +31,6 @@ if (parentPort) {
 (async () => {
     const updateCheck = require('./update-check');
 
-    const logging = {
-        info(message) {
-            postParentPortMessage(message);
-        },
-        warn(message) {
-            postParentPortMessage(message);
-        },
-        error(message) {
-            postParentPortMessage(message);
-        }
-    };
-
     // INIT required services
     const models = require('./models');
     models.init();
@@ -54,7 +42,7 @@ if (parentPort) {
     await settings.init();
     // Finished INIT
 
-    await updateCheck({logging});
+    await updateCheck();
 
     postParentPortMessage(`Ran update check`);
 

package/core/server/services/email-analytics/index.js

@@ -1,5 +1,4 @@
 const config = require('../../../shared/config');
-const logging = require('@tryghost/logging');
 const db = require('../../data/db');
 const settings = require('../../../shared/settings-cache');
 const {EmailAnalyticsService} = require('@tryghost/email-analytics-service');
@@ -9,11 +8,10 @@ const queries = require('./lib/queries');
 
 module.exports = new EmailAnalyticsService({
     config,
-    logging,
     settings,
-    eventProcessor: new EventProcessor({db, logging}),
+    eventProcessor: new EventProcessor({db}),
     providers: [
-        new MailgunProvider({config, settings, logging})
+        new MailgunProvider({config, settings})
     ],
     queries
 });

package/core/server/services/email-analytics/jobs/fetch-latest.js

@@ -28,24 +28,6 @@ if (parentPort) {
     const config = require('../../../../shared/config');
     const db = require('../../../data/db');
 
-    const logging = {
-        info(message) {
-            if (parentPort) {
-                parentPort.postMessage(message);
-            }
-        },
-        warn(message) {
-            if (parentPort) {
-                parentPort.postMessage(message);
-            }
-        },
-        error(message) {
-            if (parentPort) {
-                parentPort.postMessage(message);
-            }
-        }
-    };
-
     const settingsRows = await db.knex('settings')
         .whereIn('key', ['mailgun_api_key', 'mailgun_domain', 'mailgun_base_url']);
 
@@ -69,10 +51,9 @@ if (parentPort) {
     const emailAnalyticsService = new EmailAnalyticsService({
         config,
         settings,
-        logging,
-        eventProcessor: new EventProcessor({db, logging}),
+        eventProcessor: new EventProcessor({db}),
         providers: [
-            new MailgunProvider({config, settings, logging})
+            new MailgunProvider({config, settings})
         ],
         queries
     });

package/core/server/services/integrations/integrations-service.js

@@ -1,4 +1,4 @@
-const {NotFoundError, GhostError} = require('@tryghost/errors');
+const {NotFoundError, InternalServerError} = require('@tryghost/errors');
 const tpl = require('@tryghost/tpl');
 
 const messages = {
@@ -29,7 +29,7 @@ class IntegrationsService {
                     withRelated: ['api_keys', 'webhooks']
                 });
             } catch (err) {
-                throw new GhostError({
+                throw new InternalServerError({
                     err: err
                 });
             }

package/core/server/services/invites/index.js

@@ -1,12 +1,10 @@
 const settingsCache = require('../../../shared/settings-cache');
 const mailService = require('../../services/mail');
-const logging = require('@tryghost/logging');
 const urlUtils = require('../../../shared/url-utils');
 const Invites = require('./invites');
 
 module.exports = new Invites({
     settingsCache,
-    logging,
     mailService,
     urlUtils
 });

package/core/server/services/invites/invites.js

@@ -1,5 +1,6 @@
 const security = require('@tryghost/security');
 const tpl = require('@tryghost/tpl');
+const logging = require('@tryghost/logging');
 
 const messages = {
     invitedByName: '{invitedByName} has invited you to join {blogName}',
@@ -10,9 +11,8 @@ const messages = {
 };
 
 class Invites {
-    constructor({settingsCache, logging, mailService, urlUtils}) {
+    constructor({settingsCache, mailService, urlUtils}) {
         this.settingsCache = settingsCache;
-        this.logging = logging;
         this.mailService = mailService;
         this.urlUtils = urlUtils;
     }
@@ -80,7 +80,7 @@ class Invites {
                     });
                     const helpText = tpl(messages.errorSendingEmail.help);
                     err.message = `${errorMessage} ${helpText}`;
-                    this.logging.warn(err.message);
+                    logging.warn(err.message);
                 }
 
                 return Promise.reject(err);

package/core/server/services/jobs/job-service.js

@@ -17,6 +17,6 @@ const workerMessageHandler = ({name, message}) => {
     logging.info(`Worker for job ${name} sent a message: ${message}`);
 };
 
-const jobManager = new JobManager({logging, errorHandler, workerMessageHandler});
+const jobManager = new JobManager({errorHandler, workerMessageHandler});
 
 module.exports = jobManager;

package/core/server/services/mail/templates/invite-user.html

@@ -101,7 +101,7 @@ a {
 }
 </style>
 </head>
-<body class="" style="background-color: #ffffff; 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: 14px; line-height: 1.5em; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
+<body style="background-color: #ffffff; 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: 14px; line-height: 1.5em; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
 
 <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
     <tr>

package/core/server/services/mail/templates/reset-password.html

@@ -101,7 +101,7 @@ a {
 }
 </style>
 </head>
-<body class="" style="background-color: #ffffff; 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: 14px; line-height: 1.5em; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
+<body style="background-color: #ffffff; 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: 14px; line-height: 1.5em; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
 
 <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
     <tr>

package/core/server/services/mail/templates/welcome.html

@@ -101,7 +101,7 @@ a {
 }
 </style>
 </head>
-<body class="" style="background-color: #ffffff; 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: 14px; line-height: 1.5em; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
+<body style="background-color: #ffffff; 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: 14px; line-height: 1.5em; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
 
 <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
     <tr>

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

@@ -638,6 +638,114 @@ figure blockquote p {
     font-size: 20px;
 }
 
+.kg-header-card {
+    margin: 0 0 1.5em 0;
+    padding: 110px 35px 110px 35px;
+    text-align: center;
+}
+
+.kg-header-card.kg-size-small {
+    padding-top: 75px;
+    padding-bottom: 75px;
+}
+
+.kg-header-card.kg-size-large {
+    padding-top: 140px;
+    padding-bottom: 140px;
+}
+
+.kg-header-card.kg-align-left {
+    text-align: left;
+}
+
+.kg-header-card.kg-style-dark {
+    background: #15171a;
+    color: #ffffff;
+}
+
+.kg-header-card.kg-style-light {
+    background-color: #F9F9FA;
+}
+
+.kg-header-card.kg-style-accent {
+    background: ${templateSettings.accentColor || '#15171a'};
+    color: #ffffff;
+}
+
+.kg-header-card.kg-style-image {
+    background-color: #e7e7eb;
+    background-size: cover;
+    background-position: center center;
+    color: #ffffff;
+}
+
+.kg-header-card h2 {
+    font-size: 3em;
+    font-weight: 700;
+    line-height: 1.1em;
+    margin: 0 0 0.125em;
+}
+
+.kg-header-card h2 strong {
+    font-weight: 800;
+}
+
+.kg-header-card.kg-size-small h2 {
+    font-size: 2.5em;
+}
+
+.kg-header-card.kg-size-large h2 {
+    font-size: 3.5em;
+}
+
+.kg-header-card h3 {
+    font-size: 1.125em;
+    font-weight: 500;
+    line-height: 1.3em;
+    margin: 0;
+}
+
+.kg-header-card h3 strong {
+    font-weight: 600;
+}
+
+.kg-header-card.kg-size-large h3 {
+    font-size: 1.25em;
+}
+
+.kg-header-card.kg-size-small h3 {
+    font-size: 1em;
+}
+
+.kg-header-card-button {
+    margin-top: 1.75em;
+    background: #ffffff;
+    border-radius: 5px;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: bold;
+    margin: 0;
+    padding: 8px 16px;
+    text-decoration: none !important;
+    color: #15171A !important;
+}
+
+.kg-size-large .kg-header-card-button {
+    margin-top: 2em;
+}
+
+.kg-size-small .kg-header-card-button {
+    margin-top: 1.5em;
+}
+
+.kg-style-light .kg-header-card-button {
+    background: ${templateSettings.accentColor || '#15212A'} !important;
+    color: #ffffff !important;
+}
+
+
 /* -------------------------------------
     HEADER, FOOTER, MAIN
 ------------------------------------- */
@@ -1003,7 +1111,7 @@ ${ templateSettings.showBadge ? `
 </style>
 </head>
 
-<body class="">
+<body>
     <span class="preheader">${ post.excerpt ? post.excerpt : `${post.title} – ` }</span>
     <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" width="100%">