index.hbs

   1 {{!< default}}
   2 {{!-- The tag above means: insert everything in this file
   3 into the {body} of the default.hbs template --}}
   4
   5 <div class="site-header-content">
   6     {{#if @site.cover_image}}
   7         {{!-- This is a responsive image, it loads different sizes depending on device
   8         https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
   9         <img class="site-header-cover"
  10             srcset="{{img_url @site.cover_image size="s"}} 300w,
  11                     {{img_url @site.cover_image size="m"}} 600w,
  12                     {{img_url @site.cover_image size="l"}} 1000w,
  13                     {{img_url @site.cover_image size="xl"}} 2000w"
  14             sizes="100vw"
  15             src="{{img_url @site.cover_image size="xl"}}"
  16             alt=""
  17         />
  18     {{/if}}
  19     <h1 class="site-title">
  20         {{#if @site.logo}}
  21             <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
  22         {{else}}
  23             {{@site.title}}
  24         {{/if}}
  25     </h1>
  26     <p>{{@site.description}}</p>
  27 </div>
  28
  29 {{!-- The main content area --}}
  30 <main id="site-main" class="site-main outer">
  31     <div class="inner posts">
  32
  33         <div class="post-feed">
  34             {{#foreach posts}}
  35
  36                 {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
  37                 {{> "post-card"}}
  38
  39             {{/foreach}}
  40         </div>
  41
  42     </div>
  43 </main>