Various design improvements (#42)

There are a couple of minor improvements which customers solve at the moment with various hacks and should be part of the theme instead.

* Removed max-width from card excerpt

* Updated custom theme settings

- Added show/hide "Read more" section in posts
- Added drop-cap option for posts
- Added show/hide metadata for posts

* Added lock icon for members-only posts on list

* Updated excerpt logic to work with access levels

* Fixing missing id's for input fields

* Updated secondary color contrast

Author: peterzimon

assets/built/screen.css

@@ -59,9 +59,9 @@ production stylesheet in assets/built/screen.css
     --color-darker-gray: #15171a;
     --color-black: #000;
     --color-primary-text: var(--color-darker-gray);
-    --color-secondary-text: rgb(0 0 0 / 0.5);
+    --color-secondary-text: rgb(0 0 0 / 0.55);
     --color-border: rgb(0 0 0 / 0.08);
-    --color-dark-border: rgb(0 0 0 / 0.5);
+    --color-dark-border: rgb(0 0 0 / 0.55);
     --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     --font-serif: "EB Garamond", Georgia, Times, serif;
     --font-serif-alt: Georgia, Times, serif;
@@ -369,7 +369,7 @@ button.gh-form-input {
     .gh-form {
         font-size: 1.6rem;
     }
-    
+
     .gh-form .gh-button {
         padding-inline: 12px;
     }
@@ -973,7 +973,6 @@ Search                         LOGO                    Login Subscribe
     display: -webkit-box;
     overflow-y: hidden;
     margin-top: 8px;
-    max-width: 720px;
     font-size: 1.45rem;
     line-height: 1.4;
     -webkit-line-clamp: 2;
@@ -984,6 +983,7 @@ Search                         LOGO                    Login Subscribe
     display: flex;
     gap: 4px;
     flex-wrap: wrap;
+    align-items: center;
     padding-bottom: 1px;
     font-size: 1.25rem;
     font-weight: 500;
@@ -992,6 +992,13 @@ Search                         LOGO                    Login Subscribe
     color: var(--color-secondary-text);
 }
 
+.gh-card-meta svg {
+    width: 16px;
+    height: 16px;
+    margin-right: 2px;
+    margin-top: -2px;
+}
+
 .gh-card-meta:not(:empty) {
     margin-top: 12px;
 }
@@ -2128,6 +2135,20 @@ unless a heading is the very first element in the post content */
     margin-top: calc(56px * var(--content-spacing-factor, 1));
 }
 
+/* Add drop cap setting */
+.post-template .gh-content.drop-cap > p:first-of-type:first-letter {
+    margin :0 0.2em 0em 0;
+    font-size: 3.1em;
+    float:left;
+    line-height: 1;
+    margin-left: -1px;
+    font-weight: 700;
+}
+
+.has-serif-body.post-template .gh-content.drop-cap > p:first-of-type:first-letter {
+    font-size: 3.2em;
+}
+
 /* Add a small margin between a heading and paragraph after it */
 .gh-content > [id] + p {
     margin-top: calc(12px * var(--content-spacing-factor, 1));

assets/built/screen.css.map

@@ -191,6 +191,21 @@
                 "type": "boolean",
                 "default": false,
                 "group": "homepage"
+            },
+            "show_post_metadata": {
+                "type": "boolean",
+                "default": true,
+                "group": "post"
+            },
+            "enable_drop_caps_on_posts": {
+                "type": "boolean",
+                "default": false,
+                "group": "post"
+            },
+            "show_related_articles": {
+                "type": "boolean",
+                "default": true,
+                "group": "post"
             }
         }
     },

assets/css/screen.css

@@ -14,7 +14,7 @@
                             {{#if @custom.signup_subheading}}{{@custom.signup_subheading}}{{else}}{{@site.description}}{{/if}}
                         </p>
                     </div>
-                    {{> "email-subscription"}}
+                    {{> "email-subscription" email_field_id="cta-email"}}
                 </div>
             </section>
         {{/match}}

package.json

@@ -16,7 +16,7 @@
                 Powered by <a href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a>
             </div>
         </div>
-        
+
         {{#if @site.members_enabled}}
             {{#unless @member}}
                 <section class="gh-footer-signup">
@@ -26,7 +26,7 @@
                     <p class="gh-footer-signup-subhead is-body">
                         {{#if @custom.signup_subheading}}{{@custom.signup_subheading}}{{else}}{{@site.description}}{{/if}}
                     </p>
-                    {{> "email-subscription"}}
+                    {{> "email-subscription" email_field_id="footer-email"}}
                 </section>
             {{/unless}}
         {{/if}}

partials/components/cta.hbs

@@ -1,5 +1,5 @@
 <section class="gh-header is-{{#match headerStyle "Magazine"}}magazine{{else match headerStyle "Highlight"}}highlight{{else}}classic{{/match}}{{#if @custom.background_image}}{{#if @site.cover_image}} has-image{{/if}}{{/if}} gh-outer">
-        
+
     {{!-- Background image --}}
     {{#if @custom.background_image}}
         {{#match headerStyle "!=" "Magazine"}}
@@ -64,7 +64,7 @@
         {{!-- Landing layout --}}
         {{#match headerStyle "Landing"}}
             <h1 class="gh-header-title is-title">{{#if @custom.header_text}}{{@custom.header_text}}{{else}}{{@site.description}}{{/if}}</h1>
-            {{> "email-subscription"}}
+            {{> "email-subscription" email_field_id="header-email"}}
         {{/match}}
 
         {{!-- Search layout --}}

partials/components/footer.hbs

@@ -1,5 +1,5 @@
 <form class="gh-form" data-members-form>
-    <input class="gh-form-input" type="email" placeholder="[email protected]" required data-members-email>
+    <input class="gh-form-input" id="{{email_field_id}}" type="email" placeholder="[email protected]" required data-members-email>
     <button class="gh-button" type="submit" aria-label="Subscribe">
         <span><span>Subscribe</span> {{> "icons/arrow"}}</span>
         {{> "icons/loader"}}

partials/components/header-content.hbs

@@ -1,5 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M16.25 6.875H3.75C3.40482 6.875 3.125 7.15482 3.125 7.5V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V7.5C16.875 7.15482 16.5952 6.875 16.25 6.875Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-    <path d="M7.1875 6.875V4.0625C7.1875 3.31658 7.48382 2.60121 8.01126 2.07376C8.53871 1.54632 9.25408 1.25 10 1.25C10.7459 1.25 11.4613 1.54632 11.9887 2.07376C12.5162 2.60121 12.8125 3.31658 12.8125 4.0625V6.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-    <path d="M10 13.125C10.6904 13.125 11.25 12.5654 11.25 11.875C11.25 11.1846 10.6904 10.625 10 10.625C9.30964 10.625 8.75 11.1846 8.75 11.875C8.75 12.5654 9.30964 13.125 10 13.125Z" fill="currentColor"></path>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20" id="Lock-1--Streamline-Ultimate"><defs></defs><title>lock-1</title><path d="M4.375 8.125h11.25s1.25 0 1.25 1.25v8.75s0 1.25 -1.25 1.25H4.375s-1.25 0 -1.25 -1.25v-8.75s0 -1.25 1.25 -1.25" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M5.625 8.125V5a4.375 4.375 0 0 1 8.75 0v3.125" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="m10 12.5 0 2.5" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>

partials/email-subscription.hbs

@@ -21,10 +21,20 @@
                 <p class="gh-card-tag">{{primary_tag.name}}</p>
             {{/if}}
             <h3 class="gh-card-title is-title">{{title}}</h3>
-            {{#if excerpt}}
-                <p class="gh-card-excerpt is-body">{{excerpt}}</p>
+            {{#if custom_excerpt}}
+                <p class="gh-card-excerpt is-body">{{custom_excerpt}}</p>
             {{/if}}
-            <footer class="gh-card-meta"><!--
+            {{#unless custom_excerpt}}
+                {{#if excerpt}}
+                    <p class="gh-card-excerpt is-body">{{excerpt}}</p>
+                {{/if}}
+            {{/unless}}
+            <footer class="gh-card-meta">
+                {{#unless access}}
+                    {{^has visibility="public"}}
+                        {{> "icons/lock"}}
+                    {{/has}}
+                {{/unless}}<!--
              -->{{#if @custom.show_author}}
                     <span class="gh-card-author">By {{#foreach authors}}{{#if @first}}{{name}}{{else}}, {{name}}{{/if}}{{/foreach}}</span>
                 {{/if}}

partials/icons/lock.hbs

@@ -17,6 +17,7 @@
                 <p class="gh-article-excerpt is-body">{{custom_excerpt}}</p>
             {{/if}}
 
+            {{#if @custom.show_post_metadata}}
             <div class="gh-article-meta">
                 <div class="gh-article-author-image">
                     {{#foreach authors}}
@@ -39,12 +40,13 @@
                     </div>
                 </div>
             </div>
+            {{/if}}
 
             {{> "feature-image"}}
 
         </header>
 
-        <section class="gh-content gh-canvas is-body">
+        <section class="gh-content gh-canvas is-body{{#if @custom.enable_drop_caps_on_posts}} drop-cap{{/if}}">
             {{content}}
         </section>
 
@@ -60,17 +62,19 @@
 
 {{/post}}
 
-{{#get "posts" include="authors" filter="id:-{{post.id}}" limit="4" as |next|}}
-    {{#if next}}
-        <section class="gh-container is-grid gh-outer">
-            <div class="gh-container-inner gh-inner">
-                <h2 class="gh-container-title">Read more</h2>
-                <div class="gh-feed">
-                    {{#foreach next}}
-                        {{> "post-card" lazyLoad=true}}
-                    {{/foreach}}
+{{#if @custom.show_related_articles}}
+    {{#get "posts" include="authors" filter="id:-{{post.id}}" limit="4" as |next|}}
+        {{#if next}}
+            <section class="gh-container is-grid gh-outer">
+                <div class="gh-container-inner gh-inner">
+                    <h2 class="gh-container-title">Read more</h2>
+                    <div class="gh-feed">
+                        {{#foreach next}}
+                            {{> "post-card" lazyLoad=true}}
+                        {{/foreach}}
+                    </div>
                 </div>
-            </div>
-        </section>
-    {{/if}}
-{{/get}}
+            </section>
+        {{/if}}
+    {{/get}}
+{{/if}}