Add custom settings

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 .gh-content table th,
-html.dark-mode .post-full-content table td {
+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 .gh-content .kg-bookmark-container,
-html.dark-mode .post-full-content .kg-bookmark-container:hover {
+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 {
+@media (prefers-color-scheme: dark) {
-    border: none;
+    html.auto-color body {
-    background: linear-gradient(color-mod(var(--color-darkmode) l(-6%)), color-mod(var(--color-darkmode) l(-3%)));
+        color: rgba(255, 255, 255, 0.75);
-}
+        background: var(--color-darkmode);
+    }
 
-html.dark-mode .subscribe-form-title {
+    html.auto-color img {
-    color: rgba(255, 255, 255, 0.9);
-}
-
-html.dark-mode .subscribe-form p {
-    color: rgba(255, 255, 255, 0.7);
-}
-
-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.dark-mode .subscribe-email:focus {
-    border-color: color-mod(var(--color-darkmode) l(+25%));
-}
-
-html.dark-mode .subscribe-form button {
         opacity: 0.9;
-}
+    }
 
-html.dark-mode .subscribe-form .invalid .message-error,
+    html.auto-color .post-card,
-html.dark-mode .subscribe-form .error .message-error {
+    html.auto-color .post-card:hover {
-    color: color-mod(var(--color-red) l(+5%) s(-5%));
+        border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
-}
+    }
 
-html.dark-mode .subscribe-form .success .message-success {
+    html.auto-color .post-card-byline-content a {
-    color: color-mod(var(--color-green) l(+5%) s(-5%));
+        color: rgba(255, 255, 255, 0.75);
+    }
+
+    html.auto-color .post-card-byline-content a:hover {
+        color: #fff;
+    }
+
+    html.auto-color .post-card-image {
+        background: var(--color-darkmode);
+    }
+
+    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.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);
+    }
 }
 
 /*

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">

index.hbs

@@ -2,7 +2,8 @@
 {{!-- The tag above means: insert everything in this file
 into the {body} of the default.hbs template --}}
 
-<div class="site-header-content">
+{{#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 --}}
@@ -24,13 +25,14 @@ into the {body} of the default.hbs template --}}
             {{/if}}
         </h1>
         <p>{{@site.description}}</p>
-</div>
+    </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 --}}

package.json

@@ -87,6 +87,66 @@
             "xl": {
                 "width": 2000
             }
+        },
+        "custom": {
+            "title_font": {
+                "type": "select",
+                "options": ["Modern sans-serif", "Elegant serif"],
+                "default": "Modern sans-serif"
+            },
+            "body_font": {
+                "type": "select",
+                "options": ["Modern sans-serif", "Elegant serif"],
+                "default": "Elegant serif"
+            },
+            "publication_cover_style": {
+                "type": "select",
+                "options": ["None", "Medium", "Large"],
+                "default": "Medium",
+                "group": "homepage"
+            },
+            "feed_layout": {
+                "type": "select",
+                "options": ["Dynamic grid", "Simple grid", "List"],
+                "default": "Dynamic grid",
+                "group": "homepage"
+            },
+            "color_scheme": {
+                "type": "select",
+                "options": ["Light", "Dark", "Auto"],
+                "default": "Light"
+            },
+            "header_button_background": {
+                "type": "color",
+                "default": "#ffffff"
+            },
+            "header_button_text_color": {
+                "type": "select",
+                "options": ["Light", "Dark"],
+                "default": "Dark"
+            },
+            "post_image_width": {
+                "type": "select",
+                "options": ["Wide", "Full", "Small"],
+                "default": "Wide",
+                "group": "post"
+            },
+            "email_signup_for_logged_out_visitors": {
+                "type": "select",
+                "options": ["Footer", "Bottom of post", "None"],
+                "default": "Footer",
+                "group": "post"
+            },
+            "email_signup_text": {
+                "type": "text",
+                "default": "Sign up for more like this.",
+                "group": "post"
+            },
+            "show_recent_posts": {
+                "type": "boolean",
+                "default": true,
+                "group": "post"
+            }
         }
     },
     "renovate": {

partials/post-card.hbs

@@ -1,7 +1,7 @@
 {{!-- This is a partial file used to generate a post "card"
 which templates loop over to generate a list of posts. --}}
 
-<article class="post-card {{post_class}} {{#is "home"}}{{#if feature_image}}{{#has index="0"}}post-card-large{{/has}}{{/if}}{{/is}}">
+<article class="post-card {{post_class}} {{#match @custom.feed_layout "!=" "Simple grid"}}{{#is "home"}}{{#match @custom.feed_layout "Dynamic grid"}}{{#has index="0"}}{{#if feature_image}}post-card-large{{/if}}{{/has}}{{else}}post-card-large{{/match}}{{/is}}{{/match}}">
 
     {{#if feature_image}}
     <a class="post-card-image-link" href="{{url}}">

post.hbs

@@ -8,7 +8,7 @@ into the {body} tag of the default.hbs template --}}
 {{!-- Everything inside the #post block pulls data from the post --}}
 
 <main id="site-main" class="site-main">
-    <article class="article {{post_class}}">
+    <article class="article {{post_class}} {{#match @custom.post_image_width "Full"}}image-full{{else match @custom.post_image_width "=" "Small"}}image-small{{/match}}">
 
         <header class="article-header gh-canvas">
 
@@ -83,22 +83,25 @@ into the {body} tag of the default.hbs template --}}
 </main>
 
 {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
-{{#unless @member}}
+{{#match @custom.email_signup_for_logged_out_visitors "!=" "None"}}
-<section class="footer-cta">
+{{#unless @member}}{{#if access}}
+    <section class="footer-cta {{#match @custom.email_signup_for_logged_out_visitors "Bottom of post"}}cta-alt{{/match}}">
         <div class="inner">
-        <h2>Sign up for more like this.</h2>
+            {{#if @custom.email_signup_text}}<h2>{{@custom.email_signup_text}}</h2>{{/if}}
             <a class="footer-cta-button" href="#/portal">
-            <div>Enter your email</div>
+                <div class="footer-cta-input">Enter your email</div>
                 <span>Subscribe</span>
             </a>
             {{!-- ^ This looks like a form element, but it's just a link to Portal,
             making the form validation and submission much simpler. --}}
         </div>
-</section>
+    </section>
-{{/unless}}
+{{/if}}{{/unless}}
+{{/match}}
 
 
 {{!-- Read more links, just above the footer --}}
+{{#if @custom.show_recent_posts}}
 <aside class="read-more-wrap">
     <div class="read-more inner">
 
@@ -118,5 +121,6 @@ into the {body} tag of the default.hbs template --}}
 
     </div>
 </aside>
+{{/if}}
 
 {{/post}}