66 lines
		
	
	
		
			2.1 KiB
		
	
	
	
		
			Handlebars
		
	
	
	
	
	
			
		
		
	
	
			66 lines
		
	
	
		
			2.1 KiB
		
	
	
	
		
			Handlebars
		
	
	
	
	
	
| {{!< default}}
 | |
| {{!-- The tag above means: insert everything in this file
 | |
| into the {body} of the default.hbs template --}}
 | |
| 
 | |
| {{!-- The big featured header, it uses blog cover image as a BG if available --}}
 | |
| <header class="site-header">
 | |
|     <div class="outer site-nav-main">
 | |
|         <div class="inner">
 | |
|             {{> "site-nav"}}
 | |
|         </div>
 | |
|     </div>
 | |
| </header>
 | |
| 
 | |
| {{!-- Everything inside the #post tags pulls data from the post --}}
 | |
| {{#post}}
 | |
| 
 | |
| <main id="site-main" class="site-main outer">
 | |
|     <div class="inner">
 | |
| 
 | |
|         <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
 | |
| 
 | |
|             <header class="post-full-header">
 | |
|                 <h1 class="post-full-title">{{title}}</h1>
 | |
|             </header>
 | |
| 
 | |
|             {{#if feature_image}}
 | |
|             <figure class="post-full-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="(max-width: 800px) 400px,
 | |
|                             (max-width: 1170px) 1170px,
 | |
|                             2000px"
 | |
|                     src="{{img_url feature_image size="xl"}}"
 | |
|                     alt="{{title}}"
 | |
|                 />
 | |
|             </figure>
 | |
|             {{/if}}
 | |
| 
 | |
|             <section class="post-full-content">
 | |
|                 <div class="post-content">
 | |
|                     {{content}}
 | |
|                 </div>
 | |
|             </section>
 | |
| 
 | |
|         </article>
 | |
| 
 | |
|     </div>
 | |
| </main>
 | |
| 
 | |
| {{/post}}
 | |
| 
 | |
| {{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
 | |
| {{#contentFor "scripts"}}
 | |
| <script>
 | |
|     $(function() {
 | |
|         var $postContent = $(".post-full-content");
 | |
|         $postContent.fitVids();
 | |
|     });
 | |
| </script>
 | |
| {{/contentFor}}
 |