Settings cleanup

assets/css/screen.css

@@ -75,7 +75,7 @@ production stylesheet in assets/built/screen.css
 /* Full width page blocks */
 .outer {
     position: relative;
-    padding: 0 24px;
+    padding: 0 4vmin;
 }
 
 /* Centered content container blocks */
@@ -112,7 +112,7 @@ production stylesheet in assets/built/screen.css
     display: flex;
     align-items: flex-end;
     padding-top: 64px;
-    padding-bottom: 64px;
+    padding-bottom: 6.4vmin;
     color: var(--color-darkgrey);
 }
 
@@ -125,6 +125,7 @@ production stylesheet in assets/built/screen.css
 .has-cover-image .site-header-content {
     min-height: 600px;
     padding-top: 104px;
+    background-color: var(--ghost-accent-color);
     color: #fff;
 }
 
@@ -171,7 +172,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
 }
 
 .site-header-content.vertical .site-title {
-    font-size: 10rem;
+    font-size: 6.4rem;
 }
 
 .site-description {
@@ -221,14 +222,21 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
     padding-bottom: 24px;
     font-size: 1.6rem;
     line-height: 1.3em;
+    background-color: #fff;
 }
 
-.has-cover-image .gh-head {
+.has-cover-image:not(.home-template) .gh-head {
+    background-color: var(--ghost-accent-color);
+    color: #fff;
+}
+
+.home-template.has-cover-image .gh-head {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     z-index: 2000;
+    background-color: transparent;
     color: #fff;
 }
 
@@ -238,7 +246,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
 
 .gh-head-inner {
     display: grid;
-    grid-gap: 32px;
+    grid-gap: 40px;
     grid-template-columns: auto auto 1fr;
     grid-auto-flow: row dense;
 }
@@ -260,6 +268,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
     font-weight: 800;
     font-size: 2.6rem;
     letter-spacing: -0.02em;
+    color: inherit;
 }
 
 .has-cover-image .gh-head-logo {
@@ -306,10 +315,7 @@ body:not(.has-cover-image) .site-header-content:not(.vertical) {
 .gh-head-menu .nav a {
     display: inline-block;
     line-height: 1.5;
-}
+    color: inherit;
-
-.has-cover-image .gh-head-menu .nav a {
-    color: #fff;
 }
 
 
@@ -457,7 +463,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
         justify-content: space-between;
         user-select: none;
     }
-    .no-logo .gh-head-brand {
+    .no-logo #gh-head .gh-head-brand {
         justify-content: flex-end;
     }
     #gh-head .gh-head-menu {
@@ -537,7 +543,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     display: grid;
     gap: 64px 48px;
     grid-template-columns: repeat(6, 1fr);
-    padding: 64px 0;
+    padding: 6.4vmin 0;
 }
 
 @media (max-width: 1000px) {
@@ -614,6 +620,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     color: var(--color-secondary-text);
     font-size: 1.4rem;
     font-weight: 600;
+    letter-spacing: -0.005em;
     line-height: 1;
 }
 
@@ -621,7 +628,6 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     margin: 0;
     font-size: 2.6rem;
     font-weight: 800;
-    transition: color 0.2s ease-in-out;
 }
 
 .no-image .post-card-title {
@@ -728,6 +734,10 @@ make sure this only happens on large viewports / desktop-ish devices.
         grid-column: span 1;
     }
 
+    .post-card-large.no-image .post-card-content {
+        grid-column: span 2;
+    }
+
     .post-card-large .post-card-image {
         position: absolute;
         width: 100%;
@@ -800,10 +810,6 @@ make sure this only happens on large viewports / desktop-ish devices.
     padding: 0 0 64px 0;
 }
 
-.article .article-header > * {
-    grid-column: wide-start / wide-end;
-}
-
 .article-tag {
     margin-bottom: 16px;
     font-size: 1.6rem;
@@ -815,9 +821,9 @@ make sure this only happens on large viewports / desktop-ish devices.
 
 .article-title {
     margin-bottom: 0;
-    font-size: 6.4rem;
+    font-size: 5.2rem;
     font-weight: 800;
-    line-height: 1.05;
+    line-height: 1;
     color: var(--color-darkgrey);
 }
 
@@ -829,7 +835,7 @@ make sure this only happens on large viewports / desktop-ish devices.
     margin-top: 16px;
     max-width: 720px;
     font-size: 2rem;
-    line-height: 1.5;
+    line-height: 1.45;
     color: var(--color-darkgrey);
 }
 
@@ -912,7 +918,7 @@ headings, text, images and lists. We deal with cards lower down. */
 
 /* Default vertical spacing */
 .gh-content > * + * {
-    margin-top: 4vmin;
+    margin-top: 3.2vmin;
     margin-bottom: 0;
 }
 
@@ -941,11 +947,11 @@ is the very first element in the post content */
 .gh-content > hr,
 .gh-content > blockquote {
     position: relative;
-    margin-top: 6vmin;
+    margin-top: 4.8vmin;
 }
 .gh-content > hr + *,
 .gh-content > blockquote + * {
-    margin-top: 6vmin !important;
+    margin-top: 4.8vmin !important;
 }
 
 /* Now the content typography styles */
@@ -962,7 +968,7 @@ is the very first element in the post content */
 .gh-content > p {
     font-family: var(--font-serif);
     font-weight: 400;
-    font-size: 2.1rem;
+    font-size: 2rem;
     line-height: 1.6em;
 }
 
@@ -1604,17 +1610,6 @@ iframe.instagram-media + script + :not([id]) {
 /* 12. Dark Mode
 /* ---------------------------------------------------------- */
 
-/* If you prefer a dark color scheme, you can enable dark mode
-by adding the following code to the Head section of "Code Injection"
-settings inside: Ghost Admin > Settings > Advanced
-
-<script>document.documentElement.classList.add('dark-mode');</script>
-
-Or you can just edit default.hbs and add the .dark-mode class directly
-to the html tag on the very first line of the file.
-
- */
-
 html.dark-mode body {
     color: rgba(255, 255, 255, 0.75);
     background: var(--color-darkmode);
@@ -1628,16 +1623,16 @@ html.dark-mode kbd {
     background: color-mod(var(--color-darkmode) l(+5%));
 }
 
-html.dark-mode .post-card,
+html.dark-mode figcaption a {
-html.dark-mode .post-card:hover {
+    color: #fff;
-    border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
 }
 
-html.dark-mode .post-card-byline-content a {
+html.dark-mode .gh-head {
-    color: rgba(255, 255, 255, 0.75);
+    background: var(--color-darkmode);
+    color: #fff;
 }
 
-html.dark-mode .post-card-byline-content a:hover {
+html.dark-mode .site-header-content {
     color: #fff;
 }
 
@@ -1646,23 +1641,19 @@ html.dark-mode .post-card-image {
 }
 
 html.dark-mode .post-card-title {
-    color: rgba(255, 255, 255, 0.85);
+    color: #fff;
 }
 
 html.dark-mode .post-card-excerpt {
-    color: color-mod(var(--color-midgrey) l(+10%));
+    color: var(--color-secondary-text);
-}
-
-html.dark-mode .post-full-content {
-    background: var(--color-darkmode);
 }
 
 html.dark-mode .article-title {
-    color: rgba(255, 255, 255, 0.9);
+    color: #fff;
 }
 
 html.dark-mode .article-excerpt {
-    color: color-mod(var(--color-midgrey) l(+10%));
+    color: var(--color-secondary-text);
 }
 
 html.dark-mode .post-full-image {
@@ -1673,11 +1664,7 @@ html.dark-mode .article-byline {
     border-top-color: color-mod(var(--color-darkmode) l(+15%));
 }
 
-html.dark-mode .article-byline-meta h4 a {
+html.dark-mode .article-byline-meta .author-name a {
-    color: rgba(255, 255, 255, 0.75);
-}
-
-html.dark-mode .article-byline-meta h4 a:hover {
     color: #fff;
 }
 
@@ -1769,6 +1756,10 @@ html.dark-mode .kg-header-card h3.kg-header-card-subheader {
     color: #fff;
 }
 
+html.dark-mode .footer-cta-title {
+    color: #fff;
+}
+
 @media (prefers-color-scheme: dark) {
     html.auto-color body {
         color: rgba(255, 255, 255, 0.75);

default.hbs

@@ -18,14 +18,14 @@
     {{ghost_head}}
 
 </head>
-<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}}{{#if @site.cover_image}} has-cover-image{{/if}}{{#is "home"}}{{#match @custom.about_section "!=" "None"}}{{#if @custom.include_logo_in_about_section}} no-logo{{/if}}{{/match}}{{/is}}">
+<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}}{{#if @custom.show_publication_cover}} has-cover-image{{/if}}{{#is "home"}}{{#match @custom.about_section "!=" "None"}}{{#if @custom.include_logo_in_about_section}} no-logo{{/if}}{{/match}}{{/is}}">
 <div class="viewport">
 
     <header id="gh-head" class="gh-head outer">
         <nav class="gh-head-inner inner">
 
             <div class="gh-head-brand">
-                <a class="gh-head-logo" href="{{@site.url}}">
+                <a class="gh-head-logo{{#unless @site.logo}} no-image{{/unless}}" href="{{@site.url}}">
                     {{#if @site.logo}}
                         <img src="{{@site.logo}}" alt="{{@site.title}}" />
                     {{else}}

index.hbs

@@ -4,18 +4,20 @@ into the {body} of the default.hbs template --}}
 
 <div class="site-header-content outer{{#match @custom.about_section "Vertical"}} vertical{{/match}}">
 
-    {{#if @site.cover_image}}
+    {{#if @custom.show_publication_cover}}
-        {{!-- This is a responsive image, it loads different sizes depending on device
+        {{#if @site.cover_image}}
-        https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+            {{!-- This is a responsive image, it loads different sizes depending on device
-        <img class="site-header-cover"
+            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
-            srcset="{{img_url @site.cover_image size="s"}} 300w,
+            <img class="site-header-cover"
-                    {{img_url @site.cover_image size="m"}} 600w,
+                srcset="{{img_url @site.cover_image size="s"}} 300w,
-                    {{img_url @site.cover_image size="l"}} 1000w,
+                        {{img_url @site.cover_image size="m"}} 600w,
-                    {{img_url @site.cover_image size="xl"}} 2000w"
+                        {{img_url @site.cover_image size="l"}} 1000w,
-            sizes="100vw"
+                        {{img_url @site.cover_image size="xl"}} 2000w"
-            src="{{img_url @site.cover_image size="xl"}}"
+                sizes="100vw"
-            alt="{{@site.title}}"
+                src="{{img_url @site.cover_image size="xl"}}"
-        />
+                alt="{{@site.title}}"
+            />
+        {{/if}}
     {{/if}}
 
     {{#match @custom.about_section "!=" "None"}}
@@ -27,7 +29,13 @@ into the {body} of the default.hbs template --}}
             {{/if}}
             <div class="site-header-wrapper">
                 {{#match @custom.about_section "Horizontal"}}
-                    <h1 class="site-title">{{@site.title}}</h1>
+                    {{#if @site.logo}}
+                        <h1 class="site-title">{{@site.title}}</h1>
+                    {{else}}
+                        {{#if @custom.include_logo_in_about_section}}
+                            <h1 class="site-title">{{@site.title}}</h1>
+                        {{/if}}
+                    {{/if}}
                 {{else}}
                     {{#if @custom.include_logo_in_about_section}}
                         {{#unless @site.logo}}

package.json

@@ -105,14 +105,19 @@
                 ],
                 "default": "Elegant serif"
             },
+            "show_publication_cover": {
+                "type": "boolean",
+                "default": true,
+                "group": "homepage"
+            },
             "about_section": {
                 "type": "select",
                 "options": [
-                    "Horizontal",
                     "Vertical",
+                    "Horizontal",
                     "None"
                 ],
-                "default": "Horizontal",
+                "default": "Vertical",
                 "group": "homepage"
             },
             "include_logo_in_about_section": {

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}}{{#match @custom.feed_layout "!=" "List"}}{{#is "home"}}{{^is "paged"}}{{#has index="0"}}{{#match @custom.first_post_layout "Large card"}} post-card-large{{/match}}{{#match @custom.first_post_layout "Full-width card"}} post-card-full{{/match}}{{/has}}{{#match @custom.feed_layout "Dynamic grid"}}{{#match @custom.first_post_layout "None"}}{{#has index="0,1"}} dynamic{{/has}}{{else}}{{#has index="1,2"}} dynamic{{/has}}{{/match}}{{/match}}{{/is}}{{/is}}{{else}} post-card-large{{/match}}{{#if @custom.keep_card_thumbnail_ratio}} keep-ratio{{/if}}">
+<article class="post-card {{post_class}}{{#match @custom.feed_layout "!=" "List"}}{{#is "home"}}{{^is "paged"}}{{#has index="0"}}{{#match @custom.first_post_layout "Large card"}} post-card-large{{/match}}{{#match @custom.first_post_layout "Full-width card"}} post-card-full{{/match}}{{/has}}{{#match @custom.feed_layout "Dynamic grid"}}{{#match @custom.first_post_layout "None"}}{{#has index="0,1"}} dynamic{{/has}}{{else}}{{#has index="1,2"}} dynamic{{/has}}{{/match}}{{/match}}{{/is}}{{/is}}{{else}}{{#is "home"}} post-card-large{{/is}}{{/match}}{{#if @custom.keep_card_thumbnail_ratio}} keep-ratio{{/if}}">
 
     {{#if feature_image}}
         <a class="post-card-image-link" href="{{url}}">