Fix nested main element issue
This commit is contained in:
Sodbileg Gansukh
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
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
52
page.hbs
52
page.hbs
|
|
@ -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
132
post.hbs
|
|
@ -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">•</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">•</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}}
|
||||||
|
|
|
||||||
4
tag.hbs
4
tag.hbs
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue