ghost 4.22.3 → 4.25.0

package/content/themes/casper/assets/css/screen.css

@@ -995,7 +995,7 @@ is the very first element in the post content */
 }
 
 /* Now the content typography styles */
-.gh-content a {
+.gh-content a:not(.gh-post-upgrade-cta a):not(.kg-bookmark-container):not(.kg-btn):not(.kg-nft-card-container) {
     color: var(--ghost-accent-color);
     text-decoration: underline;
     word-break: break-word;
@@ -1005,7 +1005,11 @@ is the very first element in the post content */
 .gh-content > ol,
 .gh-content > ul,
 .gh-content > dl,
-.gh-content > p {
+.gh-content > p,
+.kg-callout-text,
+.kg-toggle-content > ol,
+.kg-toggle-content > ul,
+.kg-toggle-content > p {
     font-family: var(--font-serif);
     font-weight: 400;
     font-size: 2.1rem;
@@ -1016,7 +1020,11 @@ is the very first element in the post content */
 .has-sans-body .gh-content > ol,
 .has-sans-body .gh-content > ul,
 .has-sans-body .gh-content > dl,
-.has-sans-body .gh-content > p {
+.has-sans-body .gh-content > p,
+.has-sans-body .kg-callout-text,
+.has-sans-body .kg-toggle-content > ol,
+.has-sans-body .kg-toggle-content > ul,
+.has-sans-body .kg-toggle-content > p {
     font-family: var(--font-sans);
 }
 
@@ -1066,11 +1074,15 @@ is the very first element in the post content */
 }
 
 @media (max-width: 650px) {
-    .gh-content blockquote,
-    .gh-content ol,
-    .gh-content ul,
-    .gh-content dl,
-    .gh-content p {
+    .gh-content > blockquote,
+    .gh-content > ol,
+    .gh-content > ul,
+    .gh-content > dl,
+    .gh-content > p,
+    .kg-callout-text,
+    .kg-toggle-content > ol,
+    .kg-toggle-content > ul,
+    .kg-toggle-content > p {
         font-size: 1.7rem;
     }
 
@@ -1112,6 +1124,14 @@ except for when immediately preceeded by a heading */
     margin: auto;
 }
 
+.has-serif-title .kg-toggle-heading-text {
+    font-family: var(--font-serif);
+}
+
+.kg-toggle-content > * + * {
+    margin-top: min(2.4rem, 4vmin);
+}
+
 
 /* Captions */
 figcaption {
@@ -1143,162 +1163,6 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* Galleries
-/* ---------------------------------------------------------- */
-
-/* When there galleries are mixed with images, reduce margin
-between them, so it looks like 1 big gallery */
-.kg-image-card + .kg-gallery-card,
-.kg-gallery-card + .kg-image-card,
-.kg-gallery-card + .kg-gallery-card {
-    margin-top: 0.75em;
-}
-
-.kg-image-card.kg-card-hascaption + .kg-gallery-card,
-.kg-gallery-card.kg-card-hascaption + .kg-image-card,
-.kg-gallery-card.kg-card-hascaption + .kg-gallery-card {
-    margin-top: 1.75em;
-}
-
-.kg-gallery-container {
-    position: relative;
-}
-
-.kg-gallery-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
-
-.kg-gallery-image img {
-    display: block;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.kg-gallery-row:not(:first-of-type) {
-    margin: 0.75em 0 0 0;
-}
-
-.kg-gallery-image:not(:first-of-type) {
-    margin: 0 0 0 0.75em;
-}
-
-
-/* Bookmark Cards
-/* ---------------------------------------------------------- */
-
-/* These are styled links with structured data, similar to a
-Twitter card. These styles roughly match what you see in the
-Ghost editor. */
-
-.kg-bookmark-card,
-.kg-bookmark-publisher {
-    position: relative;
-    width: 100%;
-}
-
-.kg-bookmark-container,
-.kg-bookmark-container:hover {
-    display: flex;
-    color: currentColor;
-    font-family: var(--font-sans-serif);
-    text-decoration: none !important;
-    background: rgba(255,255,255,0.6);
-    border-radius: 5px;
-    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
-    overflow: hidden;
-}
-
-.kg-bookmark-content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    flex-basis: 100%;
-    align-items: flex-start;
-    justify-content: flex-start;
-    padding: 20px;
-}
-
-.kg-bookmark-title {
-    font-size: 1.5rem;
-    line-height: 1.4em;
-    font-weight: 600;
-    color: #15171A;
-}
-
-.kg-bookmark-description {
-    display: -webkit-box;
-    font-size: 1.4rem;
-    line-height: 1.5em;
-    margin-top: 3px;
-    color: #626d79;
-    font-weight: 400;
-    max-height: 44px;
-    overflow-y: hidden;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
-
-.kg-bookmark-metadata {
-    display: flex;
-    align-items: center;
-    margin-top: 22px;
-    width: 100%;
-    color: #394047;
-    font-size: 1.4rem;
-    font-weight: 500;
-}
-
-.kg-bookmark-icon {
-    width: 20px;
-    height: 20px;
-    margin-right: 6px;
-}
-
-.kg-bookmark-author,
-.kg-bookmark-publisher {
-    display: inline;
-}
-
-.kg-bookmark-publisher {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 240px;
-    white-space: nowrap;
-    display: block;
-    line-height: 1.65em;
-}
-
-.kg-bookmark-metadata > span:nth-of-type(2) {
-    color: #626d79;
-    font-weight: 400;
-}
-
-.kg-bookmark-metadata > span:nth-of-type(2):before {
-    content: "•";
-    color: #394047;
-    margin: 0 6px;
-}
-
-.kg-bookmark-thumbnail {
-    position: relative;
-    flex-grow: 1;
-    min-width: 33%;
-}
-
-.kg-bookmark-thumbnail img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-radius: 0 4px 4px 0;
-}
-
-
 /* Card captions
 /* ---------------------------------------------------------- */
 
@@ -1913,12 +1777,7 @@ html.dark-mode .no-image .author-social-link a {
     color: rgba(255, 255, 255, 0.75);
 }
 
-html.dark-mode .gh-content h1,
-html.dark-mode .gh-content h2,
-html.dark-mode .gh-content h3,
-html.dark-mode .gh-content h4,
-html.dark-mode .gh-content h5,
-html.dark-mode .gh-content h6 {
+html.dark-mode .gh-content > [id] {
     color: rgba(255, 255, 255, 0.9);
 }
 
@@ -1932,9 +1791,8 @@ html.dark-mode .gh-content :not(pre) > code {
     color: var(--color-wash);
 }
 
-html.dark-mode .gh-content a {
+html.dark-mode .gh-content a:not(.kg-btn):not(.kg-nft-card-container) {
     color: #fff;
-    box-shadow: inset 0 -1px 0 #fff;
 }
 
 html.dark-mode .gh-content strong {
@@ -1981,28 +1839,10 @@ html.dark-mode .gh-content table td {
     border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
 }
 
-html.dark-mode .gh-content .kg-bookmark-container,
-html.dark-mode .gh-content .kg-bookmark-container:hover {
-    color: rgba(255, 255, 255, 0.75);
-    box-shadow: 0 0 1px rgba(255,255,255,0.9);
-}
-
 html.dark-mode .gh-content input {
     color: color-mod(var(--color-midgrey) l(-30%));
 }
 
-html.dark-mode .kg-bookmark-title {
-    color: #fff;
-}
-
-html.dark-mode .kg-bookmark-description {
-    color: rgba(255, 255, 255, 0.75);
-}
-
-html.dark-mode .kg-bookmark-metadata {
-    color: rgba(255, 255, 255, 0.75);
-}
-
 html.dark-mode .site-archive-header .no-image {
     color: rgba(255, 255, 255, 0.9);
     background: var(--color-darkmode);
@@ -2075,12 +1915,7 @@ html.dark-mode .site-archive-header .no-image {
         color: rgba(255, 255, 255, 0.75);
     }
 
-    html.auto-color .gh-content h1,
-    html.auto-color .gh-content h2,
-    html.auto-color .gh-content h3,
-    html.auto-color .gh-content h4,
-    html.auto-color .gh-content h5,
-    html.auto-color .gh-content h6 {
+    html.auto-color .gh-content > [id] {
         color: rgba(255, 255, 255, 0.9);
     }
 
@@ -2094,9 +1929,8 @@ html.dark-mode .site-archive-header .no-image {
         color: var(--color-wash);
     }
 
-    html.auto-color .gh-content a {
+    html.auto-color .gh-content a:not(.kg-btn):not(.kg-nft-card-container) {
         color: #fff;
-        box-shadow: inset 0 -1px 0 #fff;
     }
 
     html.auto-color .gh-content strong {
@@ -2143,28 +1977,10 @@ html.dark-mode .site-archive-header .no-image {
         border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
     }
 
-    html.auto-color .gh-content .kg-bookmark-container,
-    html.auto-color .gh-content .kg-bookmark-container:hover {
-        color: rgba(255, 255, 255, 0.75);
-        box-shadow: 0 0 1px rgba(255,255,255,0.9);
-    }
-
     html.auto-color .gh-content input {
         color: color-mod(var(--color-midgrey) l(-30%));
     }
 
-    html.auto-color .kg-bookmark-title {
-        color: #fff;
-    }
-
-    html.auto-color .kg-bookmark-description {
-        color: rgba(255, 255, 255, 0.75);
-    }
-
-    html.auto-color .kg-bookmark-metadata {
-        color: rgba(255, 255, 255, 0.75);
-    }
-
     html.auto-color .site-archive-header .no-image {
         color: rgba(255, 255, 255, 0.9);
         background: var(--color-darkmode);

package/content/themes/casper/default.hbs

@@ -61,9 +61,9 @@
                 </div>
 
                 {{#unless @member}}
-                    <a class="gh-head-button" href="#/portal/signup">Subscribe</a>
+                    <a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
                 {{else}}
-                    <a class="gh-head-button" href="#/portal/account">Account</a>
+                    <a class="gh-head-button" href="#/portal/account" data-portal="account">Account</a>
                 {{/unless}}
             </div>
         </nav>

package/content/themes/casper/package.json

@@ -2,7 +2,7 @@
     "name": "casper",
     "description": "A clean, minimal default theme for the Ghost publishing platform",
     "demo": "https://demo.ghost.io",
-    "version": "4.2.0",
+    "version": "4.3.0",
     "engines": {
         "ghost": ">=4.0.0",
         "ghost-api": "v4"
@@ -50,7 +50,7 @@
         "autoprefixer": "10.2.5",
         "beeper": "2.1.0",
         "cssnano": "4.1.10",
-        "gscan": "4.10.1",
+        "gscan": "4.11.1",
         "gulp": "4.0.2",
         "gulp-concat": "2.6.1",
         "gulp-livereload": "4.0.2",
@@ -88,6 +88,7 @@
                 "width": 2000
             }
         },
+        "card_assets": true,
         "custom": {
             "title_font": {
                 "type": "select",

package/content/themes/casper/post.hbs

@@ -88,7 +88,7 @@ into the {body} tag of the default.hbs template --}}
     <section class="footer-cta {{#match @custom.email_signup_for_logged_out_visitors "Bottom of post"}}cta-alt{{/match}}">
         <div class="inner">
             {{#if @custom.email_signup_text}}<h2>{{@custom.email_signup_text}}</h2>{{/if}}
-            <a class="footer-cta-button" href="#/portal">
+            <a class="footer-cta-button" href="#/portal" data-portal>
                 <div class="footer-cta-input">Enter your email</div>
                 <span>Subscribe</span>
             </a>