v1.3.1

fixes DES-203, closes https://github.com/TryGhost/Source/issues/41

assets/css/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;
@@ -83,50 +83,7 @@ production stylesheet in assets/built/screen.css
 /* 2. Fonts
 /* ---------------------------------------------------------- */
 
-@font-face {
-    font-family: "Inter";
-    font-style: normal;
-    font-weight: 100 900;
-    font-display: swap;
-    src: url(/assets/fonts/inter-roman.woff2) format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-    font-family: "EB Garamond";
-    font-style: normal;
-    font-weight: 400 800;
-    font-display: swap;
-    src: url(/assets/fonts/eb-garamond-roman.woff2) format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-    font-family: "EB Garamond";
-    font-style: italic;
-    font-weight: 400 800;
-    font-display: swap;
-    src: url(/assets/fonts/eb-garamond-italic.woff2) format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-    font-family: "JetBrains Mono";
-    font-style: normal;
-    font-weight: 100 800;
-    font-display: swap;
-    src: url(/assets/fonts/jetbrains-mono-roman.woff2) format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-    font-family: "JetBrains Mono";
-    font-style: italic;
-    font-weight: 100 800;
-    font-display: swap;
-    src: url(/assets/fonts/jetbrains-mono-italic.woff2) format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
+/* Fonts are preloaded and defined in default.hbs to avoid layout shift */
 
 /* 3. Resets
 /* ---------------------------------------------------------- */
@@ -238,7 +195,6 @@ a:hover {
     display: flex;
     align-items: center;
     position: relative;
-    overflow: hidden;
     max-width: 560px;
     width: 100%;
     height: 56px;
@@ -277,6 +233,7 @@ a:hover {
     letter-spacing: inherit;
     line-height: 1.1;
     border: 0;
+    border-radius: 40px;
     background-color: transparent;
     outline: none;
     transition: 0.3s ease-in-out;
@@ -365,11 +322,20 @@ button.gh-form-input {
     display: block;
 }
 
+.gh-form [data-members-error] {
+    position: absolute;
+    top: 100%;
+    margin-top: 10px;
+    width: 100%;
+    font-size: 1.4rem;
+    line-height: 1.4;
+}
+
 @media (max-width: 576px) {
     .gh-form {
         font-size: 1.6rem;
     }
-    
+
     .gh-form .gh-button {
         padding-inline: 12px;
     }
@@ -515,6 +481,11 @@ button.gh-form-input {
     gap: 24px;
     align-items: center;
     justify-content: flex-end;
+    background-color: var(--background-color);
+}
+
+.gh-navigation.has-accent-color .gh-navigation-actions {
+    background-color: var(--ghost-accent-color);
 }
 
 .gh-navigation-members {
@@ -717,9 +688,9 @@ Search                         LOGO                    Login Subscribe
     transform: translate3d(0, 6px, 0);
 }
 
-.is-middle-logo .gh-dropdown {
+.gh-dropdown.is-left {
     right: auto;
-    left: -24px;
+    left: -16px;
 }
 
 .is-dropdown-mega .gh-dropdown {
@@ -972,7 +943,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;
@@ -983,6 +953,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;
@@ -991,6 +962,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;
 }
@@ -1377,6 +1355,7 @@ Search                         LOGO                    Login Subscribe
     flex-direction: column;
     align-items: center;
     gap: 48px;
+    overflow: unset;
     margin: auto;
     max-width: 1020px;
     text-align: center;
@@ -1830,15 +1809,29 @@ Search                         LOGO                    Login Subscribe
 /* 13. Sidebar
 /* ---------------------------------------------------------- */
 
-.gh-about {
+.gh-sidebar-inner {
     position: sticky;
     top: calc(var(--grid-gap) / 2);
+}
+
+.gh-sidebar-title {
+    grid-column: 1 / -1;
+    margin-bottom: calc(var(--grid-gap) / 2);
+    padding-bottom: 12px;
+    font-size: 1.2rem;
+    font-weight: 550;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.gh-about {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 48px 24px;
-    min-height: 400px;
+    min-height: 380px;
     text-align: center;
     background-color: var(--color-lighter-gray);
 }
@@ -1866,6 +1859,95 @@ Search                         LOGO                    Login Subscribe
     margin-top: 32px;
 }
 
+.gh-recommendations {
+    margin-top: 48px;
+}
+
+.gh-recommendations .recommendations {
+    display: flex;
+    flex-direction: column;
+    gap: 26px;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.gh-recommendations .recommendation:first-child {
+    margin-top: 4px;
+}
+
+.gh-recommendations .recommendation a {
+    display: grid;
+    grid-template-columns: 24px auto;
+    gap: 4px 12px;
+}
+
+.gh-recommendations .recommendation a:hover {
+    opacity: 1;
+}
+
+.gh-recommendations .recommendation-favicon {
+    grid-row: span 2;
+    width: 100%;
+    border-radius: 4px;
+}
+
+.gh-recommendations .recommendation-title {
+    margin-top: -2px;
+    font-size: 1.5rem;
+    font-weight: 650;
+    letter-spacing: -0.009em;
+}
+
+.gh-recommendations .recommendation a:hover .recommendation-title {
+    opacity: 0.8;
+}
+
+.gh-recommendations .recommendation-url {
+    order: 1;
+    overflow: hidden;
+    font-size: 1.4rem;
+    line-height: 1.25;
+    color: var(--color-secondary-text);
+    text-overflow: ellipsis;
+}
+
+.gh-recommendations .recommendation-description {
+    display: -webkit-box;
+    display: none;
+    overflow-y: hidden;
+    grid-column: 2;
+    font-size: 1.4rem;
+    line-height: 1.4;
+    color: var(--color-secondary-text);
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.gh-recommendations button {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    margin-top: 24px;
+    padding: 0;
+    cursor: pointer;
+    font-size: 1.2rem;
+    font-weight: 550;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+    background-color: transparent;
+    border: 0;
+}
+
+.gh-recommendations button svg {
+    margin-top: -1px;
+    width: 12px;
+}
+
+.gh-recommendations button:hover {
+    opacity: 0.8;
+}
+
 /* 14. Post/page
 /* ---------------------------------------------------------- */
 
@@ -1943,6 +2025,8 @@ Search                         LOGO                    Login Subscribe
 .gh-article-author-image :is(img, svg) {
     position: absolute;
     inset: 0;
+    width: 100%;
+    height: 100%;
     object-fit: cover;
 }
 
@@ -2024,6 +2108,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));
@@ -2040,6 +2138,11 @@ unless a heading is the very first element in the post content */
 }
 
 /* Now the content typography styles */
+.gh-content h1 {
+    font-size: calc(2.2em * var(--factor, 1));
+    letter-spacing: -0.02em;
+}
+
 .gh-content h2 {
     font-size: calc(1.6em * var(--factor, 1));
     letter-spacing: -0.02em;
@@ -2095,51 +2198,63 @@ unless a heading is the very first element in the post content */
     border: 0;
 }
 
-.gh-content table:not(.gist table) {
-    display: inline-block;
-    width: auto;
-    max-width: 100%;
-    overflow-x: auto;
+.gh-content .gh-table {
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+}
+
+.gh-content .gh-table table {
+    width: 100%;
     font-family: var(--font-sans);
-    font-size: 1.6rem;
+    font-size: 1.5rem;
     white-space: nowrap;
     vertical-align: top;
     border-spacing: 0;
     border-collapse: collapse;
-    -webkit-overflow-scrolling: touch;
-    background: radial-gradient(ellipse at left, rgb(0 0 0 / 0.2) 0%, rgb(0 0 0 / 0) 75%) 0 center, radial-gradient(ellipse at right, rgb(0 0 0 / 0.2) 0%, rgb(0 0 0 / 0) 75%) 100% center;
-    background-repeat: no-repeat;
-    background-attachment: scroll, scroll;
-    background-size: 10px 100%, 10px 100%;
 }
 
-.gh-content table:not(.gist table) td:first-child {
-    background-image: linear-gradient(to right, rgb(255 255 255 / 1) 50%, rgb(255 255 255 / 0) 100%);
-    background-repeat: no-repeat;
-    background-size: 20px 100%;
-}
-
-.gh-content table:not(.gist table) td:last-child {
-    background-image: linear-gradient(to left, rgb(255 255 255 / 1) 50%, rgb(255 255 255 / 0) 100%);
-    background-repeat: no-repeat;
-    background-position: 100% 0;
-    background-size: 20px 100%;
-}
-
-.gh-content table:not(.gist table) th {
+.gh-content .gh-table table th {
     font-size: 1.2rem;
     font-weight: 700;
     color: var(--color-darkgrey);
     text-align: left;
     text-transform: uppercase;
     letter-spacing: 0.2px;
-    background-color: var(--color-white);
 }
 
-.gh-content table:not(.gist table) th,
-.gh-content table:not(.gist table) td {
+.gh-content .gh-table table :is(th, td),
+.gh-content .gh-table table td {
     padding: 6px 12px;
-    border: 1px solid var(--color-light-gray);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.gh-content .gh-table table :is(th, td):first-child {
+    padding-left: 0;
+}
+
+.gh-content .gh-table table :is(th, td):last-child {
+    padding-right: 0;
+}
+
+.gh-content pre {
+    overflow: auto;
+    padding: 16px;
+    font-size: 1.5rem;
+    line-height: 1.5em;
+    background: var(--color-lighter-gray);
+    border-radius: 6px;
+    font-family: var(--font-mono);
+}
+
+.gh-content :not(pre) > code {
+    vertical-align: baseline;
+    padding: 0.15em 0.4em;
+    font-weight: 400;
+    font-size: 0.95em;
+    line-height: 1em;
+    background: var(--color-lighter-gray);
+    border-radius: 0.25em;
+    font-family: var(--font-mono);
 }
 
 /* 16. Cards
@@ -2232,7 +2347,11 @@ blockquote.kg-blockquote-alt {
 /* Button */
 
 .kg-card.kg-button-card .kg-btn {
+    height: unset;
+    padding: .6em 1.2em;
+    text-align: center;
     font-size: 1em;
+    line-height: 1.2em;
 }
 
 /* Header */
@@ -2259,6 +2378,12 @@ blockquote.kg-blockquote-alt {
     opacity: 1;
 }
 
+.kg-bookmark-card a.kg-bookmark-container,
+.kg-bookmark-card a.kg-bookmark-container:hover {
+    background: var(--background-color) !important;
+    color: var(--color-darker-gray) !important;
+}
+
 .kg-bookmark-card .kg-bookmark-content {
     padding: 1.15em;
 }
@@ -2419,6 +2544,7 @@ figcaption a {
     width: 120px;
     height: 120px;
     border-radius: 50%;
+    object-fit: cover;
 }
 
 .author-template .gh-article-title {
@@ -2583,7 +2709,7 @@ figcaption a {
     letter-spacing: 0;
 }
 
-.has-serif-title :is(.gh-button, .gh-form) {
+.has-serif-title :is(.gh-button, .gh-form, .gh-form-input) {
     border-radius: 0;
 }
 

assets/js/dropdown.js

@@ -56,6 +56,13 @@ function dropdown() {
         toggle.appendChild(wrapper);
         nav.appendChild(toggle);
 
+        const toggleRect = toggle.getBoundingClientRect();
+        const documentCenter = window.innerWidth / 2;
+
+        if (toggleRect.left < documentCenter) {
+            wrapper.classList.add('is-left');
+        }
+
         head.classList.add('is-dropdown-loaded');
 
         window.addEventListener('click', function (e) {

assets/js/main.js

@@ -7,8 +7,10 @@
     burger.addEventListener('click', function () {
         if (!navigation.classList.contains('is-open')) {
             navigation.classList.add('is-open');
+            document.documentElement.style.overflowY = 'hidden';
         } else {
             navigation.classList.remove('is-open');
+            document.documentElement.style.overflowY = null;
         }
     });
 })();
@@ -40,7 +42,19 @@
 
 /* Infinite scroll pagination */
 (function () {
-    if (document.body.classList.contains('paged')) {
+    if (!document.body.classList.contains('home-template') && !document.body.classList.contains('post-template')) {
         pagination();
     }
+})();
+
+/* Responsive HTML table */
+(function () {
+    const tables = document.querySelectorAll('.gh-content > table:not(.gist table)');
+    
+    tables.forEach(function (table) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'gh-table';
+        table.parentNode.insertBefore(wrapper, table);
+        wrapper.appendChild(table);
+    });
 })();

default.hbs

@@ -10,6 +10,9 @@
     {{!-- Preload main styles and scripts for better performance --}}
     <link rel="preload" as="style" href="{{asset "built/screen.css"}}">
     <link rel="preload" as="script" href="{{asset "built/source.js"}}">
+    
+    {{!-- Fonts are preloaded and defined in the default template to avoid layout shift --}}
+    {{> "typography/fonts"}}
 
     {{!-- 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"}}">
@@ -26,6 +29,11 @@
         https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/ */
         var accentColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color');
         accentColor = accentColor.trim().slice(1);
+
+        if (accentColor.length === 3) {
+            accentColor = accentColor[0] + accentColor[0] + accentColor[1] + accentColor[1] + accentColor[2] + accentColor[2];
+        }
+
         var r = parseInt(accentColor.substr(0, 2), 16);
         var g = parseInt(accentColor.substr(2, 2), 16);
         var b = parseInt(accentColor.substr(4, 2), 16);

package.json

@@ -2,7 +2,7 @@
     "name": "source",
     "description": "A default theme for the Ghost publishing platform",
     "demo": "https://source.ghost.io",
-    "version": "1.0.0",
+    "version": "1.3.1",
     "engines": {
         "ghost": ">=5.0.0"
     },
@@ -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"
             }
         }
     },

partials/components/cta.hbs

@@ -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}}

partials/components/footer.hbs

@@ -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/header-content.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/navigation.hbs

@@ -10,7 +10,7 @@
                 {{/if}}
             </a>
             {{> "search-toggle"}}
-            <button class="gh-burger gh-icon-button">
+            <button class="gh-burger gh-icon-button" aria-label="Menu">
                 {{> "icons/burger"}}
                 {{> "icons/close"}}
             </button>

partials/components/post-list.hbs

@@ -81,32 +81,41 @@
 
         {{#if showSidebar}}
             <aside class="gh-sidebar">
-                <section class="gh-about">
-                    {{#if @site.icon}}
-                        <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}" loading="lazy">
+                <div class="gh-sidebar-inner">
+                    <section class="gh-about">
+                        {{#if @site.icon}}
+                            <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}" loading="lazy">
+                        {{/if}}
+                        <h3 class="gh-about-title is-title">{{@site.title}}</h3>
+                        {{#if @site.description}}
+                            <p class="gh-about-description is-body">{{@site.description}}</p>
+                        {{/if}}
+                        {{#if @site.members_enabled}}
+                            {{#unless @member}}
+                                <button class="gh-button" data-portal="signup">Subscribe</button>
+                            {{else}}
+                                {{#if @site.paid_members_enabled}}
+                                    {{#unless @member.paid}}
+                                        <button class="gh-button" data-portal="upgrade">Upgrade</button>
+                                    {{/unless}}
+                                {{/if}}
+                            {{/unless}}
+                        {{/if}}
+                    </section>
+                    {{#if @site.recommendations_enabled}}
+                        <section class="gh-recommendations">
+                            <h4 class="gh-sidebar-title">Recommendations</h4>
+                            {{recommendations}}
+                            <button data-portal="recommendations">See all {{> "icons/arrow"}}</button>
+                        </section>
                     {{/if}}
-                    <h3 class="gh-about-title is-title">{{@site.title}}</h3>
-                    {{#if @site.description}}
-                        <p class="gh-about-description is-body">{{@site.description}}</p>
-                    {{/if}}
-                    {{#if @site.members_enabled}}
-                        {{#unless @member}}
-                            <button class="gh-button" data-portal="signup">Subscribe</button>
-                        {{else}}
-                            {{#if @site.paid_members_enabled}}
-                                {{#unless @member.paid}}
-                                    <button class="gh-button" data-portal="upgrade">Upgrade</button>
-                                {{/unless}}
-                            {{/if}}
-                        {{/unless}}
-                    {{/if}}
-                </section>
+                </div>
             </aside>
         {{/if}}
 
         {{#match pagination.pages ">" 1}}
             <div class="gh-more is-title">
-                <a href="/page/2">See all {{> "icons/arrow"}}</a>
+                <a href="{{@site.url}}/page/2">See all {{> "icons/arrow"}}</a>
             </div>
         {{/match}}
 

partials/email-subscription.hbs

@@ -1,8 +1,9 @@
 <form class="gh-form" data-members-form>
-    <input class="gh-form-input" type="email" placeholder="jamie@example.com" required data-members-email>
-    <button class="gh-button" type="submit">
+    <input class="gh-form-input" id="{{email_field_id}}" name="email" type="email" placeholder="jamie@example.com" required data-members-email>
+    <button class="gh-button" type="submit" aria-label="Subscribe">
         <span><span>Subscribe</span> {{> "icons/arrow"}}</span>
         {{> "icons/loader"}}
         {{> "icons/checkmark"}}
     </button>
+    <p data-members-error></p>
 </form>

partials/feature-image.hbs

@@ -1,14 +1,13 @@
 {{#if feature_image}}
     <figure class="gh-article-image">
-        <img
-            srcset="{{img_url feature_image size="s"}} 320w,
-                    {{img_url feature_image size="m"}} 600w,
-                    {{img_url feature_image size="l"}} 960w,
-                    {{img_url feature_image size="xl"}} 1200w,
-                    {{img_url feature_image size="xxl"}} 2000w"
-            src="{{img_url feature_image size="xl"}}"
-            alt="{{title}}"
-        >
+        <picture>
+            <source srcset="{{img_url feature_image size="xxl"}}" media="(min-width: 2000px)">
+            <source srcset="{{img_url feature_image size="xl"}}" media="(min-width: 1200px)">
+            <source srcset="{{img_url feature_image size="l"}}" media="(min-width: 960px)">
+            <source srcset="{{img_url feature_image size="m"}}" media="(min-width: 600px)">
+            <source srcset="{{img_url feature_image size="s"}}" media="(min-width: 320px)">
+            <img src="{{img_url feature_image size="xl"}}" alt="{{title}}">
+        </picture>
         {{#if feature_image_caption}}
             <figcaption>{{feature_image_caption}}</figcaption>
         {{/if}}

partials/icons/lock.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/post-card.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/typography/fonts.hbs

@@ -0,0 +1,15 @@
+{{!-- Sans-serif font is always loaded, because it's the default font for some part of the theme regardless of the settings --}}
+{{> "typography/sans"}}
+
+{{#match @custom.title_font "Modern sans-serif"}}
+    {{#match @custom.body_font "Elegant serif"}}
+        {{> "typography/serif"}}
+    {{/match}}
+{{else match @custom.title_font "Elegant serif"}}
+    {{> "typography/serif"}}
+{{else}}
+    {{> "typography/mono"}}
+    {{#match @custom.body_font "Elegant serif"}}
+        {{> "typography/serif"}}
+    {{/match}}
+{{/match}}

partials/typography/mono.hbs

@@ -0,0 +1,21 @@
+<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/jetbrains-mono-roman.woff2"}}" crossorigin="anonymous">
+<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/jetbrains-mono-italic.woff2"}}" crossorigin="anonymous">
+<style>
+    @font-face {
+        font-family: "JetBrains Mono";
+        font-style: normal;
+        font-weight: 100 800;
+        font-display: optional;
+        src: url({{asset "fonts/jetbrains-mono-roman.woff2"}}) format("woff2");
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }
+
+    @font-face {
+        font-family: "JetBrains Mono";
+        font-style: italic;
+        font-weight: 100 800;
+        font-display: optional;
+        src: url({{asset "fonts/jetbrains-mono-italic.woff2"}}) format("woff2");
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }
+</style>

partials/typography/sans.hbs

@@ -0,0 +1,11 @@
+<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/inter-roman.woff2"}}" crossorigin="anonymous">
+<style>
+    @font-face {
+        font-family: "Inter";
+        font-style: normal;
+        font-weight: 100 900;
+        font-display: optional;
+        src: url({{asset "fonts/inter-roman.woff2"}}) format("woff2");
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }
+</style>

partials/typography/serif.hbs

@@ -0,0 +1,21 @@
+<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/eb-garamond-roman.woff2"}}" crossorigin="anonymous">
+<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/eb-garamond-italic.woff2"}}" crossorigin="anonymous">
+<style>
+    @font-face {
+        font-family: "EB Garamond";
+        font-style: normal;
+        font-weight: 400 800;
+        font-display: optional;
+        src: url({{asset "fonts/eb-garamond-roman.woff2"}}) format("woff2");
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }
+
+    @font-face {
+        font-family: "EB Garamond";
+        font-style: italic;
+        font-weight: 400 800;
+        font-display: optional;
+        src: url({{asset "fonts/eb-garamond-italic.woff2"}}) format("woff2");
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }
+</style>

post.hbs

@@ -17,12 +17,13 @@
                 <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">
+                <div class="gh-article-author-image instapaper_ignore">
                     {{#foreach authors}}
                         {{#if profile_image}}
                             <a href="{{url}}">
-                                <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}}">
                             </a>
                         {{else}}
                             <a href="{{url}}">{{> "icons/avatar"}}</a>
@@ -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}}