Fix nested main element issue

This commit is contained in:
Sodbileg Gansukh 2021-09-22 15:24:17 +08:00
parent 046d53e885
commit 2234b14bbd
7 changed files with 101 additions and 97 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; min-height: 100vh;
} }
.viewport > main { .site-content {
flex-grow: 1; flex-grow: 1;
} }

View file

@ -60,10 +60,10 @@
</nav> </nav>
</header> </header>
<main> <div class="site-content">
{{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}} {{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
{{{body}}} {{{body}}}
</main> </div>
{{!-- The global footer at the very bottom of the screen --}} {{!-- The global footer at the very bottom of the screen --}}
<footer class="site-footer outer"> <footer class="site-footer outer">

View file

@ -7,37 +7,39 @@ into the {body} tag of the default.hbs template --}}
{{#post}} {{#post}}
{{!-- Everything inside the #post block pulls data from the page --}} {{!-- 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"> <header class="article-header gh-canvas">
{{#if feature_image}} {{#if feature_image}}
<figure class="article-image"> <figure class="article-image">
{{!-- This is a responsive image, it loads different sizes depending on device {{!-- 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 --}} https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img <img
srcset="{{img_url feature_image size="s"}} 300w, srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w, {{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w, {{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w" {{img_url feature_image size="xl"}} 2000w"
sizes="(min-width: 1400px) 1400px, 92vw" sizes="(min-width: 1400px) 1400px, 92vw"
src="{{img_url feature_image size="xl"}}" src="{{img_url feature_image size="xl"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
/> />
{{#if feature_image_caption}} {{#if feature_image_caption}}
<figcaption>{{feature_image_caption}}</figcaption> <figcaption>{{feature_image_caption}}</figcaption>
{{/if}}
</figure>
{{/if}} {{/if}}
</figure> </header>
{{/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}} {{/post}}

132
post.hbs
View file

@ -7,78 +7,80 @@ into the {body} tag of the default.hbs template --}}
{{#post}} {{#post}}
{{!-- Everything inside the #post block pulls data from the 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}} {{#if primary_tag}}
<section class="article-tag"> <section class="article-tag">
<a href="{{primary_tag.url}}">{{primary_tag.name}}</a> <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>
</section> </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}} {{/if}}
</figure>
{{/if}}
</header>
<section class="gh-content gh-canvas"> <h1 class="article-title">{{title}}</h1>
{{content}}
</section>
{{!-- {{#if custom_excerpt}}
<section class="article-comments gh-canvas"> <p class="article-excerpt">{{custom_excerpt}}</p>
If you want to embed comments, this is a good place to paste your code! {{/if}}
</section>
--}}
</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 --}} {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
{{#unless @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 --}} {{!-- 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="inner posts">
<div class="post-feed"> <div class="post-feed">
@ -54,4 +54,4 @@
</div> </div>
</div> </div>
</section> </main>