Compare commits

...

3 Commits

Author SHA1 Message Date
c63a07e8df v4.1.1 2021-09-22 15:28:46 +08:00
0e0898d7e9 Fix W3C warning about section lacks heading 2021-09-22 15:26:39 +08:00
2234b14bbd Fix nested main element issue 2021-09-22 15:24:17 +08:00
9 changed files with 104 additions and 100 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -68,7 +68,7 @@ production stylesheet in assets/built/screen.css
min-height: 100vh;
}
.viewport > main {
.site-content {
flex-grow: 1;
}

View File

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

View File

@ -2,7 +2,7 @@
"name": "casper",
"description": "A clean, minimal default theme for the Ghost publishing platform",
"demo": "https://demo.ghost.io",
"version": "4.1.0",
"version": "4.1.1",
"engines": {
"ghost": ">=4.0.0",
"ghost-api": "v4"

View File

@ -7,37 +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="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
/>
{{#if feature_image_caption}}
<figcaption>{{feature_image_caption}}</figcaption>
<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}}
</figure>
{{/if}}
</header>
</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}}

View File

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

132
post.hbs
View File

@ -7,78 +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 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>
<h1 class="article-title">{{title}}</h1>
{{!--
<section class="article-comments gh-canvas">
If you want to embed comments, this is a good place to paste your code!
</section>
--}}
{{#if custom_excerpt}}
<p class="article-excerpt">{{custom_excerpt}}</p>
{{/if}}
</article>
<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>
{{#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}}

View File

@ -2,7 +2,7 @@
{{!-- 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">
@ -54,4 +54,4 @@
</div>
</div>
</section>
</main>