ghost 4.30.1 → 4.31.0

package/core/frontend/apps/amp/lib/views/amp.hbs

@@ -674,6 +674,140 @@
         font-size: 1.25em;
     }
 
+    .kg-header-card {
+        padding: 6em 3em;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .kg-header-card.kg-size-small {
+        padding-top: 4em;
+        padding-bottom: 4em;
+    }
+
+    .kg-header-card.kg-size-large {
+        padding-top: 12em;
+        padding-bottom: 12em;
+    }
+
+    .kg-header-card.kg-width-full {
+        padding-left: 4em;
+        padding-right: 4em;
+    }
+
+    .kg-header-card.kg-align-left {
+        text-align: left;
+        align-items: flex-start;
+    }
+
+    .kg-header-card.kg-style-invert {
+        background: #15171a;
+        color: #ffffff;
+    }
+
+    .kg-header-card.kg-style-clear {
+        color: #15171a;
+        border: 1px solid rgba(124, 139, 154, 0.25);
+        border-width: 1px 0;
+    }
+
+    .kg-header-card.kg-style-accent {
+        background-color: var(--ghost-accent-color);
+    }
+
+    .kg-header-card.kg-style-image {
+        background-color: #e7e7eb;
+        background-size: cover;
+        background-position: center center;
+    }
+
+    .kg-header-card h2 {
+        font-size: 4em;
+        font-weight: 700;
+        line-height: 1.1em;
+        margin: 0;
+    }
+
+    .kg-header-card h2 strong {
+        font-weight: 800;
+    }
+
+    .kg-header-card.kg-size-small h2 {
+        font-size: 3em;
+    }
+
+    .kg-header-card.kg-size-large h2 {
+        font-size: 5em;
+    }
+
+    .kg-header-card h3 {
+        font-size: 1.25em;
+        font-weight: 500;
+        line-height: 1.3em;
+        margin: 0;
+    }
+
+    .kg-header-card h3 strong {
+        font-weight: 600;
+    }
+
+    .kg-header-card.kg-size-small h3 {
+        font-size: 1em;
+    }
+
+    .kg-header-card.kg-size-large h3 {
+        font-size: 1.5em;
+    }
+
+    .kg-header-card:not(.kg-style-clear) h2,
+    .kg-header-card:not(.kg-style-clear) h3 {
+        color: #ffffff;
+    }
+
+    .kg-header-card a.kg-header-card-button {
+        display: flex;
+        position: static;
+        align-items: center;
+        padding: 0 1.2em;
+        height: 2.4em;
+        line-height: 1em;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+        font-size: 0.95em;
+        font-weight: 600;
+        text-decoration: none !important;
+        border-radius: 5px;
+        transition: opacity 0.2s ease-in-out;
+        background-color: var(--ghost-accent-color);
+        color: #ffffff !important;
+        margin: 1.75em 0 0;
+    }
+
+    .kg-header-card a.kg-header-card-button:hover {
+        opacity: 0.85;
+    }
+
+    .kg-header-card.kg-size-large a.kg-header-card-button {
+        margin-top: 2em;
+    }
+
+    .kg-header-card.kg-size-small a.kg-header-card-button {
+        margin-top: 1.5em;
+    }
+
+    .kg-header-card.kg-style-image a.kg-header-card-button,
+    .kg-header-card.kg-style-invert a.kg-header-card-button {
+        background: #ffffff;
+        color: #15171a !important;
+    }
+
+    .kg-header-card.kg-style-accent a.kg-header-card-button {
+        background: #ffffff;
+        color: var(--ghost-accent-color) !important;
+    }
+
     .kg-audio-card {
         display: flex;
         width: 100%;

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

@@ -8,20 +8,24 @@
     overflow: hidden;
     top: 0;
     left: 0;
+    height: 100%;
+}
+
+.kg-before-after-card .kg-before-after-card-image-after img {
+    width: 100%;
 }
 
-.kg-before-after-card img {
+.kg-before-after-card .kg-before-after-card-image-before img {
     max-width: none;
-    width: unset;
+    object-fit: cover;
 }
 
 .kg-before-after-card input {
-    top:0;
-    left: -25px;
     position: absolute;
+    top: 0;
     -webkit-appearance: none;
     appearance: none;
-    width: calc(100% + 50px);
+    width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0);
     outline: none;
@@ -31,17 +35,47 @@
 .kg-before-after-card input::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    width: 50px;
-    height: 50px;
+    width: 5px;
+    height: 100%;
     background: white;
     cursor: pointer;
-    border-radius: 25px;
 }
 
 .kg-before-after-card input::-moz-range-thumb {
-    width: 50px;
-    height: 50px;
+    width: 5px;
+    height: 100%;
     background: white;
     cursor: pointer;
-    border-radius: 25px;
+}
+
+.kg-before-after-card-slider-handle {
+    pointer-events: none;
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: white;
+    left: calc(50% - 18px);
+    top: calc(50% - 18px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.kg-before-after-card-slider-handle:after {
+    transform: rotate(-45deg);
+    content: '';
+    padding: 3px;
+    display: inline-block;
+    border: solid #5D5D5D;
+    border-width: 0 2px 2px 0;
+}
+
+.kg-before-after-card-slider-handle:before {
+    transform: rotate(135deg);
+    content: '';
+    padding: 3px;
+    display: inline-block;
+    border: solid #5D5D5D;
+    border-width: 0 2px 2px 0;
 }

package/core/frontend/src/cards/css/callout.css

@@ -42,8 +42,9 @@
     color: #fff;
 }
 
-.kg-callout-card-accent a {
+.kg-callout-card.kg-callout-card-accent a {
     color: #fff;
+    text-decoration: underline;
 }
 
 .kg-callout-card div.kg-callout-emoji {
@@ -55,4 +56,8 @@
 .kg-callout-card div.kg-callout-text {
     font-size: .95em;
     line-height: 1.5em;
+}
+
+.kg-callout-card + .kg-callout-card {
+    margin-top: 1em;
 }

package/core/frontend/src/cards/css/file.css

@@ -4,7 +4,7 @@
 
 .kg-file-card a.kg-file-card-container {
     display: flex;
-    align-items: center;
+    align-items: stretch;
     justify-content: space-between;
     color: inherit;
     padding: 6px;
@@ -25,6 +25,7 @@
     flex-direction: column;
     justify-content: space-between;
     margin: 4px 8px;
+    width: 100%
 }
 
 .kg-file-card-title {
@@ -35,14 +36,18 @@
 
 .kg-file-card-caption {
     font-size: 0.95em;
-    line-height: 1.5em;
+    line-height: 1.3em;
     opacity: 0.6;
 }
 
+.kg-file-card-title + .kg-file-card-caption {
+    margin-top: -6px;
+}
+
 .kg-file-card-metadata {
     display: inline;
     font-size: 0.825em;
-    line-height: 1.5em;
+    line-height: 1.3em;
     margin-top: 2px;
 }
 
@@ -108,6 +113,7 @@
 }
 
 .kg-file-card-small a.kg-file-card-container {
+    align-items: center;
     min-height: 52px;
 }
 

package/core/frontend/src/cards/css/header.css

@@ -0,0 +1,167 @@
+.kg-header-card {
+    padding: 6em 3em;
+    min-height: 60vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.kg-header-card.kg-size-small {
+    padding-top: 4em;
+    padding-bottom: 4em;
+    min-height: 40vh;
+}
+
+.kg-header-card.kg-size-large {
+    padding-top: 12em;
+    padding-bottom: 12em;
+    min-height: 80vh;
+}
+
+.kg-header-card.kg-width-full {
+    padding-left: 4em;
+    padding-right: 4em;
+}
+
+.kg-header-card.kg-align-left {
+    text-align: left;
+    align-items: flex-start;
+}
+
+.kg-header-card.kg-style-invert {
+    background: #15171a;
+    color: #ffffff;
+}
+
+.kg-header-card.kg-style-clear {
+    color: #15171a;
+    border: 1px solid rgba(124, 139, 154, 0.25);
+    border-width: 1px 0;
+}
+
+.kg-header-card.kg-style-accent {
+    background-color: var(--ghost-accent-color);
+}
+
+.kg-header-card.kg-style-image {
+    background-color: #e7e7eb;
+    background-size: cover;
+    background-position: center center;
+}
+
+.kg-header-card h2 {
+    font-size: 5em;
+    font-weight: 700;
+    line-height: 1.1em;
+    margin: 0;
+}
+
+.kg-header-card h2 strong {
+    font-weight: 800;
+}
+
+.kg-header-card.kg-size-small h2 {
+    font-size: 4em;
+}
+
+.kg-header-card.kg-size-large h2 {
+    font-size: 6em;
+}
+
+.kg-header-card h3 {
+    font-size: 1.5em;
+    font-weight: 500;
+    line-height: 1.3em;
+    margin: 0;
+}
+
+.kg-header-card h3 strong {
+    font-weight: 600;
+}
+
+.kg-header-card.kg-size-small h3 {
+    font-size: 1.25em;
+}
+
+.kg-header-card.kg-size-large h3 {
+    font-size: 1.75em;
+}
+
+.kg-header-card:not(.kg-style-clear) h2,
+.kg-header-card:not(.kg-style-clear) h3 {
+    color: #ffffff;
+}
+
+.kg-header-card a.kg-header-card-button {
+    display: flex;
+    position: static;
+    align-items: center;
+    padding: 0 1.2em;
+    height: 2.4em;
+    line-height: 1em;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    font-size: 0.95em;
+    font-weight: 600;
+    text-decoration: none !important;
+    border-radius: 5px;
+    transition: opacity 0.2s ease-in-out;
+    background-color: var(--ghost-accent-color);
+    color: #ffffff !important;
+    margin: 1.75em 0 0;
+}
+
+.kg-header-card a.kg-header-card-button:hover {
+    opacity: 0.85;
+}
+
+.kg-header-card.kg-size-large a.kg-header-card-button {
+    margin-top: 2em;
+}
+
+.kg-header-card.kg-size-small a.kg-header-card-button {
+    margin-top: 1.5em;
+}
+
+.kg-header-card.kg-style-image a.kg-header-card-button,
+.kg-header-card.kg-style-invert a.kg-header-card-button {
+    background: #ffffff;
+    color: #15171a !important;
+}
+
+.kg-header-card.kg-style-accent a.kg-header-card-button {
+    background: #ffffff;
+    color: var(--ghost-accent-color) !important;
+}
+
+@media (max-width: 640px) {
+    .kg-header-card {
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+
+    .kg-header-card h2 {
+        font-size: 3.5em;
+    }
+
+    .kg-header-card.kg-size-large h2 {
+        font-size: 4em;
+    }
+    
+    .kg-header-card.kg-size-small h2 {
+        font-size: 3em;
+    }
+
+    .kg-header-card h3 {
+        font-size: 1.25em;
+    }
+
+    .kg-header-card.kg-size-large h3 {
+        font-size: 1.5em;
+    }
+    
+    .kg-header-card.kg-size-small h3 {
+        font-size: 1em;
+    }
+}

package/core/frontend/src/cards/css/product.css

@@ -48,10 +48,6 @@
     font-size: 0.95em;
     line-height: 1.5em;
     opacity: .7;
-}
-
-.kg-product-card .kg-product-card-description p:not(:first-of-type) {
-    margin-top: 0.8em;
     margin-bottom: 0;
 }
 
@@ -59,13 +55,14 @@
     margin-top: -4px;
 }
 
+.kg-product-card .kg-product-card-description p:not(:first-of-type),
 .kg-product-card .kg-product-card-description ul,
 .kg-product-card .kg-product-card-description ol {
     margin-top: 0.95em;
 }
 
 .kg-product-card .kg-product-card-description li+li {
-    margin-top: 0.2em;
+    margin-top: 0.5em;
 }
 
 .kg-product-card-rating {

package/core/frontend/src/cards/css/toggle.css

@@ -51,6 +51,7 @@
     font-size: 0.95em;
     line-height: 1.5em;
     margin-top: 0.95em;
+    margin-bottom: 0;
 }
 
 .kg-toggle-card li + li {

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/server/services/mega/template.js

@@ -638,6 +638,116 @@ 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-invert {
+    background: #15171a;
+    color: #ffffff;
+}
+
+.kg-header-card.kg-style-clear {
+    border-top: 1px solid #e5eff6;
+    border-bottom: 1px solid #e5eff6;
+}
+
+.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: ${templateSettings.accentColor || '#15212A'};
+    border: solid 1px ${templateSettings.accentColor || '#15212A'};
+    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: #FFFFFF !important;
+}
+
+.kg-size-large .kg-header-card-button {
+    margin-top: 2em;
+}
+
+.kg-size-small .kg-header-card-button {
+    margin-top: 1.5em;
+}
+
+.kg-style-accent .kg-header-card-button {
+    background: #ffffff;
+    color: ${templateSettings.accentColor || '#15212A'} !important;
+}
+
+
 /* -------------------------------------
     HEADER, FOOTER, MAIN
 ------------------------------------- */

package/core/server/web/admin/views/default-prod.html

@@ -8,7 +8,7 @@
     <title>Ghost Admin</title>
 
     
-<meta name="ghost-admin/config/environment" content="%7B%22modulePrefix%22%3A%22ghost-admin%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%2F%22%2C%22locationType%22%3A%22trailing-hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%2C%22Array%22%3Atrue%2C%22String%22%3Atrue%2C%22Function%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_JQUERY_INTEGRATION%22%3Atrue%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22version%22%3A%224.30%22%2C%22name%22%3A%22ghost-admin%22%7D%2C%22ember-simple-auth%22%3A%7B%7D%2C%22moment%22%3A%7B%22includeTimezone%22%3A%22all%22%7D%2C%22emberKeyboard%22%3A%7B%22disableInputsInitializer%22%3Atrue%7D%2C%22%40sentry%2Fember%22%3A%7B%22disablePerformance%22%3Atrue%2C%22sentry%22%3A%7B%7D%7D%2C%22ember-cli-mirage%22%3A%7B%22usingProxy%22%3Afalse%2C%22useDefaultPassthroughs%22%3Atrue%7D%2C%22exportApplicationGlobal%22%3Afalse%2C%22ember-load%22%3A%7B%22loadingIndicatorClass%22%3A%22ember-load-indicator%22%7D%7D" />
+<meta name="ghost-admin/config/environment" content="%7B%22modulePrefix%22%3A%22ghost-admin%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%2F%22%2C%22locationType%22%3A%22trailing-hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%2C%22Array%22%3Atrue%2C%22String%22%3Atrue%2C%22Function%22%3Afalse%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_JQUERY_INTEGRATION%22%3Atrue%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22version%22%3A%224.31%22%2C%22name%22%3A%22ghost-admin%22%7D%2C%22ember-simple-auth%22%3A%7B%7D%2C%22moment%22%3A%7B%22includeTimezone%22%3A%22all%22%7D%2C%22emberKeyboard%22%3A%7B%22disableInputsInitializer%22%3Atrue%7D%2C%22%40sentry%2Fember%22%3A%7B%22disablePerformance%22%3Atrue%2C%22sentry%22%3A%7B%7D%7D%2C%22ember-cli-mirage%22%3A%7B%22usingProxy%22%3Afalse%2C%22useDefaultPassthroughs%22%3Atrue%7D%2C%22exportApplicationGlobal%22%3Afalse%2C%22ember-load%22%3A%7B%22loadingIndicatorClass%22%3A%22ember-load-indicator%22%7D%7D" />
 
     <meta name="HandheldFriendly" content="True" />
     <meta name="MobileOptimized" content="320" />
@@ -41,7 +41,7 @@
 
     
                 <link rel="stylesheet" href="assets/vendor.min-987af30228885bce50f05c4723fe6f53.css">
-                <link rel="stylesheet" href="assets/ghost.min-c21fea11c3f431994a8ee7c47a8ed145.css" title="light">
+                <link rel="stylesheet" href="assets/ghost.min-e628c133ed6b5ec32a1cc3511c2b2978.css" title="light">
             
 
     
@@ -59,8 +59,8 @@
 <div id="ember-basic-dropdown-wormhole"></div>
 
 
-                <script src="assets/vendor.min-a2fd1e62ce6da8911fee8e812d8c6ceb.js"></script>
-                <script src="assets/ghost.min-884660873d56fcc3d2a3b9fe94c9f022.js"></script>
+                <script src="assets/vendor.min-f4bc3ac0c7d33722341d0da4291aa888.js"></script>
+                <script src="assets/ghost.min-7690e7e32d3e53ec5480a234962341a6.js"></script>
             
 </body>
 </html>