v4.7.0

The default CSS styles of new Koenig cards that have been released in the past couple of weeks was updated for better usability in themes in general (read commit message for reasons and more reference).

This commit contains CSS cleanup and updates in theme styles that aligns Casper to this change.

assets/css/screen.css

@@ -556,6 +556,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     word-break: break-word;
 }
 
+@media (max-width: 700px) {
+    .post-card {
+        min-height: auto;
+    }
+}
+
 .post-card-image-link {
     position: relative;
     display: block;
@@ -750,6 +756,30 @@ make sure this only happens on large viewports / desktop-ish devices.
 
  */
 
+@media (min-width: 701px) {
+    .post-feed.list .post-card-large {
+        grid-column: 1 / span 3;
+        display: grid;
+        grid-gap: 4vmin;
+        grid-template-columns: 3fr 5fr;
+        min-height: auto;
+        border-top: 0;
+    }
+
+    .post-feed.list .post-card-large.no-image {
+        grid-template-columns: 1fr;
+    }
+
+    .post-feed.list .post-card-large:not(.no-image) .post-card-header {
+        margin-top: 0;
+    }
+
+    .post-feed.list .post-card-large .post-card-content {
+        justify-content: flex-start;
+        margin-top: -6px;
+    }
+}
+
 @media (min-width: 1001px) {
     .post-card-large {
         grid-column: 1 / span 3;
@@ -760,15 +790,6 @@ make sure this only happens on large viewports / desktop-ish devices.
         border-top: 0;
     }
 
-    .post-feed.list .post-card-large {
-        grid-template-columns: 3fr 5fr;
-        min-height: auto;
-    }
-
-    .post-feed.list .post-card-large.no-image {
-        grid-template-columns: 1fr;
-    }
-
     .post-card-large:not(.no-image) .post-card-header {
         margin-top: 0;
     }
@@ -802,11 +823,6 @@ make sure this only happens on large viewports / desktop-ish devices.
         justify-content: center;
     }
 
-    .post-feed.list .post-card-large .post-card-content {
-        justify-content: flex-start;
-        margin-top: -6px;
-    }
-
     .post-card-large .post-card-title {
         margin-top: 0;
         font-size: 3.2rem;
@@ -995,17 +1011,13 @@ is the very first element in the post content */
 }
 
 /* Now the content typography styles */
-.gh-content a:not(.gh-post-upgrade-cta a):not(.kg-bookmark-container):not(.kg-btn):not(.kg-nft-card-container):not(.kg-callout-card-accent a) {
+.gh-content a {
     color: var(--ghost-accent-color);
     text-decoration: underline;
     word-break: break-word;
 }
 
-.gh-content .kg-callout-card-accent a {
+.gh-content > blockquote:not([class]),
-    text-decoration: underline;
-}
-
-.gh-content > blockquote,
 .gh-content > ol,
 .gh-content > ul,
 .gh-content > dl,
@@ -1016,23 +1028,30 @@ is the very first element in the post content */
     line-height: 1.6em;
 }
 
-.gh-content .kg-callout-text,
+.gh-content .kg-callout-card .kg-callout-text,
-.gh-content .kg-toggle-content > ol,
+.gh-content .kg-toggle-card .kg-toggle-content > ol,
-.gh-content .kg-toggle-content > ul,
+.gh-content .kg-toggle-card .kg-toggle-content > ul,
-.gh-content .kg-toggle-content > p {
+.gh-content .kg-toggle-card .kg-toggle-content > p {
     font-family: var(--font-serif);
     font-weight: 400;
-    font-size: 2.0rem;
+    font-size: 1.9rem;
     line-height: 1.6em;
 }
 
-.gh-content .kg-callout-emoji {
+.gh-content .kg-product-card .kg-product-card-description > p,
-    font-size: 2.2rem;
+.gh-content .kg-product-card .kg-product-card-description > ol,
-    line-height: 1.5em;
+.gh-content .kg-product-card .kg-product-card-description > ul {
+    font-size: 1.7rem;
+    line-height: 1.6em;
 }
 
-.gh-content .kg-toggle-heading-text {
+.gh-content .kg-callout-card .kg-callout-emoji {
-    font-size: 2.2rem;
+    font-size: 2.1rem;
+    line-height: 1.4em;
+}
+
+.gh-content .kg-toggle-card .kg-toggle-heading-text {
+    font-size: 2.0rem;
 }
 
 .has-sans-body .gh-content > blockquote,
@@ -1040,26 +1059,30 @@ is the very first element in the post content */
 .has-sans-body .gh-content > ul,
 .has-sans-body .gh-content > dl,
 .has-sans-body .gh-content > p,
-.has-sans-body .kg-callout-text,
+.has-sans-body .gh-content .kg-callout-card .kg-callout-text,
-.has-sans-body .kg-toggle-content > ol,
+.has-sans-body .gh-content .kg-toggle-card .kg-toggle-content > ol,
-.has-sans-body .kg-toggle-content > ul,
+.has-sans-body .gh-content .kg-toggle-card .kg-toggle-content > ul,
-.has-sans-body .kg-toggle-content > p {
+.has-sans-body .gh-content .kg-toggle-card .kg-toggle-content > p {
     font-family: var(--font-sans);
 }
 
 .gh-content > ul,
 .gh-content > ol,
-.gh-content > dl {
+.gh-content > dl,
+.gh-content .kg-toggle-card .kg-toggle-content > ol,
+.gh-content .kg-toggle-card .kg-toggle-content > ul,
+.gh-content .kg-product-card .kg-product-card-description > ol,
+.gh-content .kg-product-card .kg-product-card-description > ul {
     padding-left: 1.9em;
 }
 
-.gh-content > blockquote {
+.gh-content > blockquote:not([class]) {
     position: relative;
     font-style: italic;
     padding: 0;
 }
 
-.gh-content > blockquote::before {
+.gh-content > blockquote:not([class])::before {
     content: "";
     position: absolute;
     left: -1.5em;
@@ -1093,19 +1116,25 @@ is the very first element in the post content */
 }
 
 @media (max-width: 650px) {
-    .gh-content > blockquote,
+    .gh-content > blockquote:not([class]),
     .gh-content > ol,
     .gh-content > ul,
     .gh-content > dl,
     .gh-content > p,
-    .kg-callout-text,
+    .gh-content .kg-callout-card .kg-callout-text,
-    .kg-toggle-content > ol,
+    .gh-content .kg-toggle-card .kg-toggle-content > ol,
-    .kg-toggle-content > ul,
+    .gh-content .kg-toggle-card .kg-toggle-content > ul,
-    .kg-toggle-content > p {
+    .gh-content .kg-toggle-card .kg-toggle-content > p {
         font-size: 1.7rem;
     }
 
-    .gh-content blockquote::before {
+    .gh-content .kg-product-card .kg-product-card-description > p,
+    .gh-content .kg-product-card .kg-product-card-description > ol,
+    .gh-content .kg-product-card .kg-product-card-description > ul {
+        font-size: 1.5rem;
+    }
+
+    .gh-content blockquote:not([class])::before {
         left: -4vmin;
     }
 }
@@ -1143,12 +1172,29 @@ except for when immediately preceeded by a heading */
     margin: auto;
 }
 
-.has-serif-title .kg-toggle-heading-text {
+.has-serif-title .kg-toggle-card .kg-toggle-heading-text {
     font-family: var(--font-serif);
 }
 
-.kg-toggle-content > * + * {
+.gh-content .kg-callout-card-accent a {
-    margin-top: min(2.4rem, 4vmin);
+    text-decoration: underline;
+}
+
+.kg-blockquote-alt {
+    font-family: var(--font-serif);
+    color: var(--color-midgrey);
+}
+
+.has-sans-body .kg-blockquote-alt {
+    font-family: var(--font-sans);
+}
+
+.kg-header-card h2.kg-header-card-header {
+    color: color-mod(var(--color-darkgrey) l(-5%));
+}
+
+.has-serif-title .kg-header-card h2.kg-header-card-header {
+    font-family: var(--font-serif);
 }
 
 
@@ -1810,7 +1856,7 @@ html.dark-mode .gh-content :not(pre) > code {
     color: var(--color-wash);
 }
 
-html.dark-mode .gh-content a:not(.kg-btn):not(.kg-nft-card-container) {
+html.dark-mode .gh-content a:not(.kg-btn):not(.kg-nft-card-container):not(.kg-product-card-button):not(.kg-header-card-button) {
     color: #fff;
 }
 
@@ -1867,6 +1913,19 @@ html.dark-mode .site-archive-header .no-image {
     background: var(--color-darkmode);
 }
 
+html.dark-mode .kg-header-card.kg-style-dark {
+    background: color-mod(var(--color-darkgrey) l(-5%));
+}
+
+html.dark-mode .kg-header-card.kg-style-light {
+    background: color-mod(var(--color-darkgrey) l(+5%));
+}
+
+html.dark-mode .kg-header-card h2.kg-header-card-header,
+html.dark-mode .kg-header-card h3.kg-header-card-subheader {
+    color: #fff;
+}
+
 @media (prefers-color-scheme: dark) {
     html.auto-color body {
         color: rgba(255, 255, 255, 0.75);
@@ -1948,7 +2007,7 @@ html.dark-mode .site-archive-header .no-image {
         color: var(--color-wash);
     }
 
-    html.auto-color .gh-content a:not(.kg-btn):not(.kg-nft-card-container) {
+    html.auto-color .gh-content a:not(.kg-btn):not(.kg-nft-card-container):not(.kg-product-card-button):not(.kg-header-card-button) {
         color: #fff;
     }
 
@@ -2004,6 +2063,19 @@ html.dark-mode .site-archive-header .no-image {
         color: rgba(255, 255, 255, 0.9);
         background: var(--color-darkmode);
     }
+
+    html.auto-color .kg-header-card.kg-style-dark {
+        background: color-mod(var(--color-darkgrey) l(-5%));
+    }
+
+    html.auto-color .kg-header-card.kg-style-light {
+        background: color-mod(var(--color-darkgrey) l(+5%));
+    }
+
+    html.auto-color .kg-header-card h2.kg-header-card-header,
+    html.auto-color .kg-header-card h3.kg-header-card-subheader {
+        color: #fff;
+    }
 }
 
 /*

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.3.1",
+    "version": "4.7.0",
     "engines": {
         "ghost": ">=4.0.0",
         "ghost-api": "v4"

partials/post-card.hbs

@@ -42,7 +42,7 @@ which templates loop over to generate a list of posts. --}}
                 <li class="author-list-item">
                     {{#if profile_image}}
                     <a href="{{url}}" class="static-avatar">
-                        <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
+                        <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy" />
                     </a>
                     {{else}}
                     <a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>