Add image variant
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
This commit is contained in:
@@ -38,4 +38,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
7
partials/icons/maximize.hbs
Normal file
7
partials/icons/maximize.hbs
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="15 3 21 3 21 9"></polyline>
|
||||
<polyline points="9 21 3 21 3 15"></polyline>
|
||||
<line x1="21" y1="3" x2="14" y2="10"></line>
|
||||
<line x1="3" y1="21" x2="10" y2="14"></line>
|
||||
</svg>
|
After Width: | Height: | Size: 391 B |
6
partials/image/feed.hbs
Normal file
6
partials/image/feed.hbs
Normal file
@@ -0,0 +1,6 @@
|
||||
<div class="post-feed gh-feed">
|
||||
<div class="grid-item grid-sizer"></div>
|
||||
{{#foreach posts}}
|
||||
{{> image/loop}}
|
||||
{{/foreach}}
|
||||
</div>
|
3
partials/image/lib/footer/jquery.hbs
Normal file
3
partials/image/lib/footer/jquery.hbs
Normal file
@@ -0,0 +1,3 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
|
||||
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
3
partials/image/lib/footer/masonry.hbs
Normal file
3
partials/image/lib/footer/masonry.hbs
Normal file
@@ -0,0 +1,3 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
|
||||
integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
36
partials/image/loop.hbs
Normal file
36
partials/image/loop.hbs
Normal file
@@ -0,0 +1,36 @@
|
||||
{{#if feature_image}}
|
||||
<div class="grid-item">
|
||||
<figure class="{{post_class}}">
|
||||
|
||||
<a class="post-link" aria-label="Navigate to {{title}} page" href="{{url}}">
|
||||
<img class="post-image" srcset="{{img_url feature_image size="s"}} 300w, {{img_url feature_image size="m" }}
|
||||
720w, {{img_url feature_image size="l" }} 960w, {{img_url feature_image size="xl" }} 1200w, {{img_url
|
||||
feature_image size="xxl" }} 2000w"
|
||||
sizes="(min-width: 1020px) 300px, (min-width: 641px) calc((100vw - 50px) / 3), calc((100vw - 40px) / 2)"
|
||||
src="{{img_url feature_image size="s"}}" alt="{{title}}">
|
||||
</a>
|
||||
|
||||
<a class="post-lightbox" aria-label="Expand image" href="{{img_url feature_image}}">
|
||||
{{> icons/maximize}}
|
||||
</a>
|
||||
|
||||
<figcaption class="post-caption">
|
||||
<h2 class="post-caption-title">{{title}}</h2>
|
||||
<div class="post-caption-meta">
|
||||
{{#primary_tag}}
|
||||
<span class="post-caption-meta-item post-caption-meta-tag">
|
||||
<a href="{{url}}">{{name}}</a>
|
||||
</span>
|
||||
{{/primary_tag}}
|
||||
<span class="post-caption-meta-item post-caption-meta-date">
|
||||
<time datetime="{{date format="YYYY-MM-DD"}}">{{date published_at}}</time>
|
||||
</span>
|
||||
<span class="post-caption-meta-item post-caption-meta-link">
|
||||
<a href="{{url}}">View post</a>
|
||||
</span>
|
||||
</div>
|
||||
</figcaption>
|
||||
|
||||
</figure>
|
||||
</div>
|
||||
{{/if}}
|
12
partials/image/more.hbs
Normal file
12
partials/image/more.hbs
Normal file
@@ -0,0 +1,12 @@
|
||||
{{#get "posts" limit="all" filter="tags:[{{tags[*].slug}}]+id:-{{id}}" as |related|}}
|
||||
{{#if related}}
|
||||
<section class="related-posts">
|
||||
<div class="post-feed gh-feed">
|
||||
<div class="grid-item grid-sizer"></div>
|
||||
{{#foreach related}}
|
||||
{{> image/loop}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
{{/get}}
|
@@ -1,21 +1,5 @@
|
||||
<div class="post-feed gh-feed">
|
||||
{{#foreach posts}}
|
||||
<article class="gh-card {{post_class}}">
|
||||
<a class="gh-card-link" href="{{url}}">
|
||||
<header class="gh-card-header">
|
||||
<h2 class="gh-card-title">{{title}}</h2>
|
||||
</header>
|
||||
|
||||
<div class="gh-card-excerpt">{{excerpt}}</div>
|
||||
|
||||
<footer class="gh-card-meta">
|
||||
<time class="gh-card-date" datetime="{{date format=" YYYY-MM-DD"}}">{{date}}</time>
|
||||
<span class="gh-card-duration">{{reading_time}}</span>
|
||||
{{^has visibility="public"}}
|
||||
{{> icons/star}}
|
||||
{{/has}}
|
||||
</footer>
|
||||
</a>
|
||||
</article>
|
||||
{{> text/loop}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
17
partials/text/loop.hbs
Normal file
17
partials/text/loop.hbs
Normal file
@@ -0,0 +1,17 @@
|
||||
<article class="gh-card {{post_class}}">
|
||||
<a class="gh-card-link" href="{{url}}">
|
||||
<header class="gh-card-header">
|
||||
<h2 class="gh-card-title">{{title}}</h2>
|
||||
</header>
|
||||
|
||||
<div class="gh-card-excerpt">{{excerpt}}</div>
|
||||
|
||||
<footer class="gh-card-meta">
|
||||
<time class="gh-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
|
||||
<span class="gh-card-duration">{{reading_time}}</span>
|
||||
{{^has visibility="public"}}
|
||||
{{> icons/star}}
|
||||
{{/has}}
|
||||
</footer>
|
||||
</a>
|
||||
</article>
|
@@ -2,7 +2,7 @@
|
||||
<div class="gh-navigation-previous">
|
||||
{{#prev_post}}
|
||||
<a class="gh-navigation-link" href="{{url}}">
|
||||
<span class="gh-navigation-label">{{> icons/arrow-left}} Previous issue</span>
|
||||
<span class="gh-navigation-label">{{> icons/arrow-left}} Previous post</span>
|
||||
<h4 class="gh-navigation-title">{{title}}</h4>
|
||||
</a>
|
||||
{{/prev_post}}
|
||||
@@ -13,7 +13,7 @@
|
||||
<div class="gh-navigation-next">
|
||||
{{#next_post}}
|
||||
<a class="gh-navigation-link" href="{{url}}">
|
||||
<span class="gh-navigation-label">Next issue {{> icons/arrow-right}}</span>
|
||||
<span class="gh-navigation-label">Next post {{> icons/arrow-right}}</span>
|
||||
<h4 class="gh-navigation-title">{{title}}</h4>
|
||||
</a>
|
||||
{{/next_post}}
|
||||
|
Reference in New Issue
Block a user