-
Notifications
You must be signed in to change notification settings - Fork 3
/
page.hbs
42 lines (35 loc) · 1.57 KB
/
page.hbs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}
<main id="main" class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<article class="{{post_class}} py-12">
<header class="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
<h1 class="text-3xl mt-2 leading-9 font-bold text-gray-900 tracking-tight sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">
{{title}}
</h1>
</header>
{{#if feature_image}}
<figure class="max-w-5xl mx-auto mt-14 mb-10 rounded">
{{!-- 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="markdown max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">
{{content}}
</section>
</article>
</main>
{{/post}}