v4.1.1

Fix W3C warning about section lacks heading
Fix nested main element issue
2025-07-12 16:56:06 +00:00 · 2021-09-22 15:28:46 +08:00 · 2021-09-22 15:26:39 +08:00 · 2021-09-22 15:24:17 +08:00 · 2021-07-07 12:16:03 +08:00 · 2021-07-05 10:59:21 +08:00
11 changed files with 125 additions and 106 deletions
--- a/assets/built/screen.css
+++ b/assets/built/screen.css
--- a/assets/built/screen.css.map
+++ b/assets/built/screen.css.map
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@ -68,6 +68,10 @@ production stylesheet in assets/built/screen.css
    min-height: 100vh;
 }

+.site-content {
+    flex-grow: 1;
+}
+
 /* Full width page blocks */
 .outer {
    position: relative;
@ -1038,7 +1042,7 @@ except for when immediately preceeded by a heading */


 /* Captions */
-.kg-card figcaption {
+figcaption {
    padding: 1.5rem 1.5rem 0;
    text-align: center;
    color: rgba(0,0,0,0.5);
@ -1046,9 +1050,12 @@ except for when immediately preceeded by a heading */
    font-size: 1.3rem;
    line-height: 1.4em;
 }
-.kg-card figcaption strong {
+figcaption strong {
    color: rgba(0,0,0,0.8);
 }
+figcaption a {
+    color: var(--ghost-accent-color);
+}


 /* Highly specific styles for traditional Instagram embeds */
--- a/author.hbs
+++ b/author.hbs
@ -31,13 +31,13 @@
                    <div class="author-profile-location">📍 {{location}}</div>
                    {{/if}}
                    {{#if website}}
-                    <span ></span><a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a></span>
+                    <span><a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a></span>
                    {{/if}}
                    {{#if twitter}}
-                    <span ></span><a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a></span>
+                    <span><a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a></span>
                    {{/if}}
                    {{#if facebook}}
-                    <span ></span><a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a></span>
+                    <span><a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a></span>
                    {{/if}}
                </div>

--- a/default.hbs
+++ b/default.hbs
@ -52,7 +52,7 @@
                </div>

                {{#unless @member}}
-                    <a class="gh-head-button" href="#/portal">Subscribe</a>
+                    <a class="gh-head-button" href="#/portal/signup">Subscribe</a>
                {{else}}
                    <a class="gh-head-button" href="#/portal/account">Account</a>
                {{/unless}}
@ -60,10 +60,10 @@
        </nav>
    </header>

-    <main>
+    <div class="site-content">
        {{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
        {{{body}}}
-    </main>
+    </div>

    {{!-- The global footer at the very bottom of the screen --}}
    <footer class="site-footer outer">
--- a/gulpfile.js
+++ b/gulpfile.js
@ -80,7 +80,9 @@ function zipper(done) {
            '**',
            '!node_modules', '!node_modules/**',
            '!dist', '!dist/**',
-            '!yarn-error.log'
+            '!yarn-error.log',
+            '!yarn.lock',
+            '!gulpfile.js'
        ]),
        zip(filename),
        dest('dist/')
--- a/package.json
+++ b/package.json
@ -2,7 +2,7 @@
    "name": "casper",
    "description": "A clean, minimal default theme for the Ghost publishing platform",
    "demo": "https://demo.ghost.io",
-    "version": "4.0.4",
+    "version": "4.1.1",
    "engines": {
        "ghost": ">=4.0.0",
        "ghost-api": "v4"
--- a/page.hbs
+++ b/page.hbs
@ -7,34 +7,39 @@ into the {body} tag of the default.hbs template --}}
 {{#post}}
 {{!-- Everything inside the #post block pulls data from the page --}}

-<article class="article {{post_class}}">
+<main id="site-main" class="site-main">
+    <article class="article {{post_class}}">

-    <header class="article-header gh-canvas">
-        {{#if feature_image}}
-        <figure class="article-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
-                srcset="{{img_url feature_image size="s"}} 300w,
-                        {{img_url feature_image size="m"}} 600w,
-                        {{img_url feature_image size="l"}} 1000w,
-                        {{img_url feature_image size="xl"}} 2000w"
-                sizes="(min-width: 1400px) 1400px, 92vw"
-                src="{{img_url feature_image size="xl"}}"
-                alt="{{title}}"
-            />
-        </figure>
-        {{/if}}
-    </header>
+        <header class="article-header gh-canvas">
+            {{#if feature_image}}
+            <figure class="article-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
+                    srcset="{{img_url feature_image size="s"}} 300w,
+                            {{img_url feature_image size="m"}} 600w,
+                            {{img_url feature_image size="l"}} 1000w,
+                            {{img_url feature_image size="xl"}} 2000w"
+                    sizes="(min-width: 1400px) 1400px, 92vw"
+                    src="{{img_url feature_image size="xl"}}"
+                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+                />
+                {{#if feature_image_caption}}
+                    <figcaption>{{feature_image_caption}}</figcaption>
+                {{/if}}
+            </figure>
+            {{/if}}
+        </header>

-    <section class="gh-content gh-canvas">
+        <section class="gh-content gh-canvas">

-        <h1 class="article-title">{{title}}</h1>
+            <h1 class="article-title">{{title}}</h1>

-        {{content}}
+            {{content}}

-    </section>
+        </section>

-</article>
+    </article>
+</main>

 {{/post}}
--- a/partials/post-card.hbs
+++ b/partials/post-card.hbs
@ -14,7 +14,7 @@ which templates loop over to generate a list of posts. --}}
                    {{img_url feature_image size="xl"}} 2000w"
            sizes="(max-width: 1000px) 400px, 800px"
            src="{{img_url feature_image size="m"}}"
-            alt="{{title}}"
+            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
            loading="lazy"
        />
    </a>
@ -31,9 +31,9 @@ which templates loop over to generate a list of posts. --}}
                {{/if}}
                <h2 class="post-card-title">{{title}}</h2>
            </header>
-            <section class="post-card-excerpt">
+            <div class="post-card-excerpt">
                <p>{{excerpt}}</p>
-            </section>
+            </div>
        </a>

        <footer class="post-card-meta">
--- a/post.hbs
+++ b/post.hbs
@ -7,75 +7,80 @@ into the {body} tag of the default.hbs template --}}
 {{#post}}
 {{!-- Everything inside the #post block pulls data from the post --}}

-<article class="article {{post_class}}">
+<main id="site-main" class="site-main">
+    <article class="article {{post_class}}">

-    <header class="article-header gh-canvas">
+        <header class="article-header gh-canvas">

-        {{#if primary_tag}}
-        <section class="article-tag">
-            <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
-        </section>
-        {{/if}}
-
-        <h1 class="article-title">{{title}}</h1>
-
-        {{#if custom_excerpt}}
-        <p class="article-excerpt">{{custom_excerpt}}</p>
-        {{/if}}
-
-        <div class="article-byline">
-            <section class="article-byline-content">
-                <ul class="author-list">
-                    {{#foreach authors}}
-                    <li class="author-list-item">
-                        {{#if profile_image}}
-                        <a href="{{url}}" class="author-avatar">
-                            <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
-                        </a>
-                        {{else}}
-                        <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
-                        {{/if}}
-                    </li>
-                    {{/foreach}}
-                </ul>
-                <div class="article-byline-meta">
-                    <h4 class="author-name">{{authors}}</h4>
-                    <div class="byline-meta-content">
-                        <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
-                        <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
-                    </div>
-                </div>
+            {{#if primary_tag}}
+            <section class="article-tag">
+                <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
            </section>
-        </div>
+            {{/if}}

-        {{#if feature_image}}
-        <figure class="article-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
-                srcset="{{img_url feature_image size="s"}} 300w,
-                        {{img_url feature_image size="m"}} 600w,
-                        {{img_url feature_image size="l"}} 1000w,
-                        {{img_url feature_image size="xl"}} 2000w"
-                sizes="(min-width: 1400px) 1400px, 92vw"
-                src="{{img_url feature_image size="xl"}}"
-                alt="{{title}}"
-            />
-        </figure>
-        {{/if}}
-    </header>
+            <h1 class="article-title">{{title}}</h1>

-    <section class="gh-content gh-canvas">
-        {{content}}
-    </section>
+            {{#if custom_excerpt}}
+            <p class="article-excerpt">{{custom_excerpt}}</p>
+            {{/if}}

-    {{!--
-    <section class="article-comments gh-canvas">
-        If you want to embed comments, this is a good place to paste your code!
-    </section>
-    --}}
+            <div class="article-byline">
+                <section class="article-byline-content">
+                    <ul class="author-list">
+                        {{#foreach authors}}
+                        <li class="author-list-item">
+                            {{#if profile_image}}
+                            <a href="{{url}}" class="author-avatar">
+                                <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
+                            </a>
+                            {{else}}
+                            <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
+                            {{/if}}
+                        </li>
+                        {{/foreach}}
+                    </ul>
+                    <div class="article-byline-meta">
+                        <h4 class="author-name">{{authors}}</h4>
+                        <div class="byline-meta-content">
+                            <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
+                            <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
+                        </div>
+                    </div>
+                </section>
+            </div>

-</article>
+            {{#if feature_image}}
+            <figure class="article-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
+                    srcset="{{img_url feature_image size="s"}} 300w,
+                            {{img_url feature_image size="m"}} 600w,
+                            {{img_url feature_image size="l"}} 1000w,
+                            {{img_url feature_image size="xl"}} 2000w"
+                    sizes="(min-width: 1400px) 1400px, 92vw"
+                    src="{{img_url feature_image size="xl"}}"
+                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+                />
+                {{#if feature_image_caption}}
+                    <figcaption>{{feature_image_caption}}</figcaption>
+                {{/if}}
+            </figure>
+            {{/if}}
+        </header>
+
+        <section class="gh-content gh-canvas">
+            {{content}}
+        </section>
+
+        {{!--
+        <section class="article-comments gh-canvas">
+            If you want to embed comments, this is a good place to paste your code!
+        </section>
+        --}}
+
+    </article>
+</main>

 {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
 {{#unless @member}}
--- a/tag.hbs
+++ b/tag.hbs
@ -2,12 +2,12 @@
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}


-<section class="outer">
+<main id="site-main" class="site-main outer">
    <div class="inner posts">
        <div class="post-feed">

            {{#tag}}
-            <header class="post-card post-card-large">
+            <section class="post-card post-card-large">
                {{#if feature_image}}
                <div class="post-card-image-link">
                    {{!-- This is a responsive image, it loads different sizes depending on device
@ -30,7 +30,7 @@
                            <div class="post-card-primary-tag">Tagged</div>
                            <h2 class="post-card-title">{{name}}</h2>
                        </header>
-                        <section class="post-card-excerpt">
+                        <div class="post-card-excerpt">
                            <p>
                                {{#if description}}
                                {{description}}
@ -38,11 +38,11 @@
                                A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
                                {{/if}}
                            </p>
-                        </section>
+                        </div>
                    </div>
                </div>{{!--/.post-card-content--}}

-            </header>
+            </section>
            {{/tag}}

            {{#foreach posts}}
@ -54,4 +54,4 @@

        </div>
    </div>
-</section>
+</main>
Author	SHA1	Message	Date
Sodbileg Gansukh	c63a07e8df	v4.1.1	2021-09-22 15:28:46 +08:00
Sodbileg Gansukh	0e0898d7e9	Fix W3C warning about section lacks heading	2021-09-22 15:26:39 +08:00
Sodbileg Gansukh	2234b14bbd	Fix nested main element issue	2021-09-22 15:24:17 +08:00
Sodbileg Gansukh	046d53e885	v4.1.0	2021-07-07 12:16:03 +08:00
Sodbileg Gansukh	e49664eca4	Add alt and caption support to feature images (#812 ) * Add alt and caption support to feature images * Add feature image alt support to post card * Remove three-curlies	2021-07-05 10:59:21 +08:00
Sodbileg Gansukh	21bdffbd8a	Fix header element inside header	2021-06-10 13:32:41 +08:00
Leedan	ea33b00c0a	Author page: remove span stray end tag (#808 )	2021-06-03 10:15:25 +08:00
Sodbileg Gansukh	17c9fe6c55	v4.0.5	2021-05-10 14:21:53 +08:00
Sodbileg Gansukh	5adeaa458b	Make the footer stick to bottom Currently, the footer doesn't stick to the bottom of the viewport when the page content is small. This fixes the issue by making the <main> element fill the remaining space	2021-05-10 14:20:40 +08:00
Sodbileg Gansukh	5013c91f1a	Revert "Pin beeper to v2" This reverts commit `f43f6c567f`.	2021-05-06 15:48:36 +08:00
Sodbileg Gansukh	f43f6c567f	Pin beeper to v2 Beeper started requiring ESM syntax from v3, and it caused an error when running development workflow Error [ERR_REQUIRE_ESM]: Must use import to load ES Module	2021-05-06 12:28:54 +08:00
Sodbileg Gansukh	69feef6c46	Exclude development files from zipped theme	2021-05-05 07:53:10 +08:00
Sodbileg Gansukh	4708987c39	Update signup button Portal link fixes #791	2021-04-02 14:45:33 +08:00