ghost 4.20.2 → 4.22.0

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

@@ -161,6 +161,10 @@ production stylesheet in assets/built/screen.css
     background: var(--ghost-accent-color);
 }
 
+.site-header-content.large {
+    padding-top: 28vmin;
+    padding-bottom: 28vmin;
+}
 
 
 /* 5. Site Navigation
@@ -301,12 +305,12 @@ production stylesheet in assets/built/screen.css
 a.gh-head-button {
     display: block;
     padding: 8px 15px;
-    color: var(--color-darkgrey);
+    color: var(--button-text-color, var(--color-darkgrey));
     font-weight: 500;
     letter-spacing: -0.015em;
     font-size: 1.5rem;
     line-height: 1em;
-    background: #fff;
+    background: var(--button-bg-color, #fff);
     border-radius: 30px;
 }
 
@@ -422,7 +426,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
         justify-content: space-between;
         user-select: none;
     }
-    .home-template #gh-head .gh-head-brand {
+    .home-template #gh-head.has-cover .gh-head-brand {
         justify-content: flex-end;
     }
     #gh-head .gh-head-menu {
@@ -489,7 +493,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     }
 }
 
-.home-template .gh-head {
+.home-template .gh-head.has-cover {
     position: absolute;
     top: 0;
     right: 0;
@@ -505,10 +509,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     background: var(--ghost-accent-color);
 }
 
-.home-template .gh-head-logo {
+.home-template .gh-head.has-cover .gh-head-logo {
     display: none;
 }
-.home-template .gh-head-menu {
+.home-template .gh-head.has-cover .gh-head-menu {
     margin-left: -2.5vmin;
 }
 
@@ -524,6 +528,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     padding: 4vmin 0;
 }
 
+.post-feed.list {
+    row-gap: 6vmin;
+    max-width: 940px;
+    margin: 2vmin auto 0;
+}
+
 @media (max-width: 1000px) {
     .post-feed {
         grid-template-columns: 1fr 1fr;
@@ -602,6 +612,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     margin-top: 0;
 }
 
+.has-serif-title .post-card-title {
+    font-family: var(--font-serif);
+}
+
 .post-card-content {
     flex-grow: 1;
     display: flex;
@@ -611,6 +625,11 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
 .post-card-excerpt {
     max-width: 56em;
     color: color-mod(var(--color-midgrey) l(-8%));
+    font-family: var(--font-serif);
+}
+
+.has-sans-body .post-card-excerpt {
+    font-family: var(--font-sans-serif);
 }
 
 .post-card-excerpt p {
@@ -741,6 +760,15 @@ 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;
     }
@@ -752,6 +780,18 @@ make sure this only happens on large viewports / desktop-ish devices.
         min-height: 380px;
     }
 
+    .post-feed.list .post-card-large .post-card-image-link {
+        grid-column: 1 / span 1;
+        height: max-content;
+        min-height: auto;
+    }
+
+    .post-feed.list .post-card-large .post-card-image-link::after {
+        content: "";
+        display: block;
+        padding-bottom: 60%;
+    }
+
     .post-card-large .post-card-image {
         position: absolute;
         width: 100%;
@@ -762,13 +802,21 @@ 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;
     }
 
+    .post-feed.list .post-card-large .post-card-title {
+        font-size: 2.4rem;
+    }
+
     .post-card-large .post-card-excerpt p {
-        margin-bottom: 1.5em;
         font-size: 1.7rem;
         line-height: 1.55em;
         -webkit-line-clamp: 8;
@@ -820,6 +868,10 @@ make sure this only happens on large viewports / desktop-ish devices.
     color: color-mod(var(--color-darkgrey) l(-5%));
 }
 
+.has-serif-title .article-title {
+    font-family: var(--font-serif);
+}
+
 .article-excerpt {
     margin: 0 0 1rem;
     font-size: 2rem;
@@ -833,6 +885,14 @@ make sure this only happens on large viewports / desktop-ish devices.
     margin: 6vmin 0 0;
 }
 
+.image-full .article-image {
+    grid-column: full-start / full-end;
+}
+
+.image-small .article-image {
+    grid-column: main-start / main-end;
+}
+
 .gh-canvas .article-image img {
     display: block;
     margin-left: auto;
@@ -908,6 +968,10 @@ headings, text, images and lists. We deal with cards lower down. */
     color: var(--color-darkgrey);
 }
 
+.has-serif-title .gh-content > [id] {
+    font-family: var(--font-serif);
+}
+
 /* Add back a top margin to all headings, unless a heading
 is the very first element in the post content */
 .gh-content > [id]:not(:first-child) {
@@ -948,6 +1012,14 @@ is the very first element in the post content */
     line-height: 1.6em;
 }
 
+.has-sans-body .gh-content > blockquote,
+.has-sans-body .gh-content > ol,
+.has-sans-body .gh-content > ul,
+.has-sans-body .gh-content > dl,
+.has-sans-body .gh-content > p {
+    font-family: var(--font-sans);
+}
+
 .gh-content > ul,
 .gh-content > ol,
 .gh-content > dl {
@@ -1398,18 +1470,28 @@ Ghost editor. */
 
 .footer-cta {
     position: relative;
+    margin-bottom: -40px;
     padding: 9vmin 4vmin 10vmin;
     color: #fff;
     text-align: center;
     background: var(--color-darkgrey);
 }
 
+.footer-cta.cta-alt {
+    padding: 2vmin 4vmin 12vmin;
+    background: transparent;
+}
+
 /* Increases the default h2 size by 15%, for small and large screens */
 .footer-cta h2 {
     margin: 0 0 30px;
     font-size: 3.2rem;
 }
 
+.footer-cta.cta-alt h2 {
+    color: var(--color-darkgrey);
+}
+
 @media (max-width: 600px) {
     .footer-cta h2 {
         font-size: 2.65rem;
@@ -1430,9 +1512,13 @@ Ghost editor. */
     border-radius: 8px;
 }
 
+.footer-cta.cta-alt .footer-cta-button {
+    border: 1px solid var(--color-lightgrey);
+}
+
 .footer-cta-button span {
     display: inline-block;
-    padding: 10px 20px;
+    padding: 10px 15px;
     color: #fff;
     font-weight: 500;
     background: var(--ghost-accent-color);
@@ -1446,7 +1532,7 @@ Ghost editor. */
 .read-more-wrap {
     width: 100%;
     padding: 4vmin;
-    margin: 0 auto -40px;
+    margin: 40px auto -40px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     background: color-mod(var(--color-darkgrey) l(-5%));
 }
@@ -1846,20 +1932,20 @@ html.dark-mode .gh-content :not(pre) > code {
     color: var(--color-wash);
 }
 
-html.dark-mode .post-full-content a {
+html.dark-mode .gh-content a {
     color: #fff;
     box-shadow: inset 0 -1px 0 #fff;
 }
 
-html.dark-mode .post-full-content strong {
+html.dark-mode .gh-content strong {
     color: #fff;
 }
 
-html.dark-mode .post-full-content em {
+html.dark-mode .gh-content em {
     color: #fff;
 }
 
-html.dark-mode .post-full-content code {
+html.dark-mode .gh-content code {
     color: #fff;
     background: #000;
 }
@@ -1868,40 +1954,40 @@ html.dark-mode hr {
     border-top-color: color-mod(var(--color-darkmode) l(+8%));
 }
 
-html.dark-mode .post-full-content hr:after {
+html.dark-mode .gh-content hr:after {
     background: color-mod(var(--color-darkmode) l(+8%));
     box-shadow: var(--color-darkmode) 0 0 0 5px;
 }
 
-html.dark-mode .gh-content figcaption {
+html.dark-mode figcaption {
     color: rgba(255, 255, 255, 0.6);
 }
 
-html.dark-mode .post-full-content table td:first-child {
+html.dark-mode .gh-content table td:first-child {
     background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
 }
 
-html.dark-mode .post-full-content table td:last-child {
+html.dark-mode .gh-content table td:last-child {
     background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
 }
 
-html.dark-mode .post-full-content table th {
+html.dark-mode .gh-content table th {
     color: rgba(255, 255, 255, 0.85);
     background-color: color-mod(var(--color-darkmode) l(+8%));
 }
 
-html.dark-mode .post-full-content table th,
-html.dark-mode .post-full-content table td {
+html.dark-mode .gh-content table th,
+html.dark-mode .gh-content table td {
     border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
 }
 
-html.dark-mode .post-full-content .kg-bookmark-container,
-html.dark-mode .post-full-content .kg-bookmark-container:hover {
+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 .post-full-content input {
+html.dark-mode .gh-content input {
     color: color-mod(var(--color-midgrey) l(-30%));
 }
 
@@ -1922,40 +2008,167 @@ html.dark-mode .site-archive-header .no-image {
     background: var(--color-darkmode);
 }
 
-html.dark-mode .subscribe-form {
-    border: none;
-    background: linear-gradient(color-mod(var(--color-darkmode) l(-6%)), color-mod(var(--color-darkmode) l(-3%)));
-}
+@media (prefers-color-scheme: dark) {
+    html.auto-color body {
+        color: rgba(255, 255, 255, 0.75);
+        background: var(--color-darkmode);
+    }
 
-html.dark-mode .subscribe-form-title {
-    color: rgba(255, 255, 255, 0.9);
-}
+    html.auto-color img {
+        opacity: 0.9;
+    }
 
-html.dark-mode .subscribe-form p {
-    color: rgba(255, 255, 255, 0.7);
-}
+    html.auto-color .post-card,
+    html.auto-color .post-card:hover {
+        border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
+    }
 
-html.dark-mode .subscribe-email {
-    border-color: color-mod(var(--color-darkmode) l(+6%));
-    color: rgba(255, 255, 255, 0.9);
-    background: color-mod(var(--color-darkmode) l(+3%));
-}
+    html.auto-color .post-card-byline-content a {
+        color: rgba(255, 255, 255, 0.75);
+    }
 
-html.dark-mode .subscribe-email:focus {
-    border-color: color-mod(var(--color-darkmode) l(+25%));
-}
+    html.auto-color .post-card-byline-content a:hover {
+        color: #fff;
+    }
 
-html.dark-mode .subscribe-form button {
-    opacity: 0.9;
-}
+    html.auto-color .post-card-image {
+        background: var(--color-darkmode);
+    }
 
-html.dark-mode .subscribe-form .invalid .message-error,
-html.dark-mode .subscribe-form .error .message-error {
-    color: color-mod(var(--color-red) l(+5%) s(-5%));
-}
+    html.auto-color .post-card-title {
+        color: rgba(255, 255, 255, 0.85);
+    }
+
+    html.auto-color .post-card-excerpt {
+        color: color-mod(var(--color-midgrey) l(+10%));
+    }
+
+    html.auto-color .post-full-content {
+        background: var(--color-darkmode);
+    }
+
+    html.auto-color .article-title {
+        color: rgba(255, 255, 255, 0.9);
+    }
+
+    html.auto-color .article-excerpt {
+        color: color-mod(var(--color-midgrey) l(+10%));
+    }
+
+    html.auto-color .post-full-image {
+        background-color: color-mod(var(--color-darkmode) l(+8%));
+    }
+
+    html.auto-color .article-byline {
+        border-top-color: color-mod(var(--color-darkmode) l(+15%));
+    }
+
+    html.auto-color .article-byline-meta h4 a {
+        color: rgba(255, 255, 255, 0.75);
+    }
+
+    html.auto-color .article-byline-meta h4 a:hover {
+        color: #fff;
+    }
+
+    html.auto-color .no-image .author-social-link a {
+        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 {
+        color: rgba(255, 255, 255, 0.9);
+    }
+
+    html.auto-color .gh-content pre {
+        background: color-mod(var(--color-darkgrey) l(-8%));
+    }
+
+    html.auto-color .gh-content :not(pre) > code {
+        background: color-mod(var(--color-darkgrey) l(+6%));
+        border-color: color-mod(var(--color-darkmode) l(+8%));
+        color: var(--color-wash);
+    }
+
+    html.auto-color .gh-content a {
+        color: #fff;
+        box-shadow: inset 0 -1px 0 #fff;
+    }
+
+    html.auto-color .gh-content strong {
+        color: #fff;
+    }
 
-html.dark-mode .subscribe-form .success .message-success {
-    color: color-mod(var(--color-green) l(+5%) s(-5%));
+    html.auto-color .gh-content em {
+        color: #fff;
+    }
+
+    html.auto-color .gh-content code {
+        color: #fff;
+        background: #000;
+    }
+
+    html.auto-color hr {
+        border-top-color: color-mod(var(--color-darkmode) l(+8%));
+    }
+
+    html.auto-color .gh-content hr:after {
+        background: color-mod(var(--color-darkmode) l(+8%));
+        box-shadow: var(--color-darkmode) 0 0 0 5px;
+    }
+
+    html.auto-color figcaption {
+        color: rgba(255, 255, 255, 0.6);
+    }
+
+    html.auto-color .gh-content table td:first-child {
+        background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
+    }
+
+    html.auto-color .gh-content table td:last-child {
+        background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
+    }
+
+    html.auto-color .gh-content table th {
+        color: rgba(255, 255, 255, 0.85);
+        background-color: color-mod(var(--color-darkmode) l(+8%));
+    }
+
+    html.auto-color .gh-content table th,
+    html.auto-color .gh-content table td {
+        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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{@site.locale}}">
+<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{/match}}{{#match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>
 <head>
 
     {{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
@@ -9,6 +9,15 @@
     <meta name="HandheldFriendly" content="True" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <style>
+        :root {
+            {{#if @custom.header_button_background}}
+            --button-bg-color: {{@custom.header_button_background}};
+            {{/if}}
+            --button-text-color: {{#match @custom.header_button_text_color "Light"}}#fff{{else}}var(--color-darkgrey){{/match}};
+        }
+    </style>
+
     {{!-- Theme assets - use the {asset} helper to reference styles & scripts,
     this will take care of caching and cache-busting automatically --}}
     <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
@@ -18,10 +27,10 @@
     {{ghost_head}}
 
 </head>
-<body class="{{body_class}}">
+<body class="{{body_class}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}">
 <div class="viewport">
 
-    <header id="gh-head" class="gh-head {{#if @site.cover_image}}has-cover{{/if}}">
+    <header id="gh-head" class="gh-head{{#match @custom.publication_cover_style "!=" "None"}} has-cover{{/match}}">
         <nav class="gh-head-inner inner gh-container">
 
             <div class="gh-head-brand">

package/content/themes/casper/index.hbs

@@ -2,35 +2,37 @@
 {{!-- The tag above means: insert everything in this file
 into the {body} of the default.hbs template --}}
 
-<div class="site-header-content">
-    {{#if @site.cover_image}}
-        {{!-- This is a responsive image, it loads different sizes depending on device
-        https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
-        <img class="site-header-cover"
-            srcset="{{img_url @site.cover_image size="s"}} 300w,
-                    {{img_url @site.cover_image size="m"}} 600w,
-                    {{img_url @site.cover_image size="l"}} 1000w,
-                    {{img_url @site.cover_image size="xl"}} 2000w"
-            sizes="100vw"
-            src="{{img_url @site.cover_image size="xl"}}"
-            alt=""
-        />
-    {{/if}}
-    <h1 class="site-title">
-        {{#if @site.logo}}
-            <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
-        {{else}}
-            {{@site.title}}
+{{#match @custom.publication_cover_style "!=" "None"}}
+    <div class="site-header-content{{#match @custom.publication_cover_style "Large"}} large{{/match}}">
+        {{#if @site.cover_image}}
+            {{!-- This is a responsive image, it loads different sizes depending on device
+            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+            <img class="site-header-cover"
+                srcset="{{img_url @site.cover_image size="s"}} 300w,
+                        {{img_url @site.cover_image size="m"}} 600w,
+                        {{img_url @site.cover_image size="l"}} 1000w,
+                        {{img_url @site.cover_image size="xl"}} 2000w"
+                sizes="100vw"
+                src="{{img_url @site.cover_image size="xl"}}"
+                alt=""
+            />
         {{/if}}
-    </h1>
-    <p>{{@site.description}}</p>
-</div>
+        <h1 class="site-title">
+            {{#if @site.logo}}
+                <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
+            {{else}}
+                {{@site.title}}
+            {{/if}}
+        </h1>
+        <p>{{@site.description}}</p>
+    </div>
+{{/match}}
 
 {{!-- The main content area --}}
 <main id="site-main" class="site-main outer">
     <div class="inner posts">
 
-        <div class="post-feed">
+        <div class="post-feed{{#match @custom.feed_layout "List"}} list{{/match}}">
             {{#foreach posts}}
 
                 {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}