mirror of
https://github.com/ZetaKebab/kesper.git
synced 2025-01-14 22:18:43 +00:00
Redesign templates
This commit is contained in:
parent
1bbe1f84a6
commit
1cfebce298
@ -17,6 +17,11 @@
|
||||
this will take care of caching and cache-busting automatically --}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
|
||||
|
||||
{{!-- Prism scripts and CSS
|
||||
<link rel="preload" as="script" href="{{asset "assets/js/prism/prism.min.js"}}" />
|
||||
<link rel="preload" as="script" href="{{asset "assets/js/prism/prism-autoloader.min.js"}}" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "assets/css/prism-okaidia.min.css"}}" /> --}}
|
||||
|
||||
{{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
|
||||
it should always be the last tag before the closing head tag --}}
|
||||
{{ghost_head}}
|
||||
@ -80,7 +85,7 @@
|
||||
{{!-- The global footer at the very bottom of the screen --}}
|
||||
<footer class="site-footer outer">
|
||||
<div class="inner">
|
||||
<section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> © {{date format="YYYY"}}</section>
|
||||
<section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a></section>
|
||||
<nav class="site-footer-nav">
|
||||
{{navigation type="secondary"}}
|
||||
</nav>
|
||||
|
||||
@ -33,16 +33,34 @@ which templates loop over to generate a list of posts. --}}
|
||||
{{/unless}}
|
||||
|
||||
</a>
|
||||
{{else}}
|
||||
<a class="post-card-image-link" href="{{url}}">
|
||||
{{#primary_tag}}
|
||||
{{#if feature_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 class="post-card-image"
|
||||
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: 1000px) 400px, 800px"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{#if primary_tag}}{{primary_tag}}{{else}}{{title}}{{/if}}"
|
||||
loading="lazy"
|
||||
/>
|
||||
{{/if}}
|
||||
{{/primary_tag}}
|
||||
</a>
|
||||
{{/if}}
|
||||
|
||||
|
||||
|
||||
<div class="post-card-content">
|
||||
|
||||
<a class="post-card-content-link" href="{{url}}">
|
||||
<header class="post-card-header">
|
||||
<div class="post-card-tags">
|
||||
{{#primary_tag}}
|
||||
<span class="post-card-primary-tag">{{name}}</span>
|
||||
{{/primary_tag}}
|
||||
{{#if featured}}
|
||||
<span class="post-card-featured">{{> "icons/fire"}} Featured</span>
|
||||
{{/if}}
|
||||
@ -58,16 +76,13 @@ which templates loop over to generate a list of posts. --}}
|
||||
{{title}}
|
||||
</h2>
|
||||
</header>
|
||||
</a>
|
||||
{{#if excerpt}}
|
||||
<div class="post-card-excerpt">{{excerpt}}</div>
|
||||
{{/if}}
|
||||
</a>
|
||||
|
||||
<footer class="post-card-meta">
|
||||
<time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
|
||||
{{#if reading_time}}
|
||||
<span class="post-card-meta-length">{{reading_time}}</span>
|
||||
{{/if}}
|
||||
<time class="post-card-meta-date" datetime="{{date format="D MMMM YYYY"}}">{{date format="D MMMM YYYY"}}</time>
|
||||
{{#if @site.comments_enabled}}
|
||||
{{comment_count}}
|
||||
{{/if}}
|
||||
|
||||
100
post.hbs
100
post.hbs
@ -12,53 +12,6 @@ into the {body} tag of the default.hbs template --}}
|
||||
|
||||
<header class="article-header gh-canvas">
|
||||
|
||||
<div class="article-tag post-card-tags">
|
||||
{{#primary_tag}}
|
||||
<span class="post-card-primary-tag">
|
||||
<a href="{{url}}">{{name}}</a>
|
||||
</span>
|
||||
{{/primary_tag}}
|
||||
{{#if featured}}
|
||||
<span class="post-card-featured">{{> "icons/fire"}} Featured</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<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 instapaper_ignore">
|
||||
{{#foreach authors}}
|
||||
<li class="author-list-item">
|
||||
{{#if profile_image}}
|
||||
<a href="{{url}}" class="author-avatar" aria-label="Read more of {{name}}">
|
||||
<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" aria-label="Read more of {{name}}">{{> "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>
|
||||
{{#if reading_time}}
|
||||
<span class="byline-reading-time"><span class="bull">•</span> {{reading_time}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{{#match @custom.post_image_style "!=" "Hidden"}}
|
||||
{{#if feature_image}}
|
||||
<figure class="article-image">
|
||||
@ -77,13 +30,66 @@ into the {body} tag of the default.hbs template --}}
|
||||
<figcaption>{{feature_image_caption}}</figcaption>
|
||||
{{/if}}
|
||||
</figure>
|
||||
{{else}}
|
||||
{{#primary_tag}}
|
||||
{{#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}}
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
{{/match}}
|
||||
|
||||
<div class="article-tag post-card-tags">
|
||||
{{#if featured}}
|
||||
<span class="post-card-featured">{{> "icons/fire"}} Featured</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<h1 class="article-title">{{title}}</h1>
|
||||
|
||||
{{!-- {{#if custom_excerpt}}
|
||||
<p class="article-excerpt">{{custom_excerpt}}</p>
|
||||
{{/if}} --}}
|
||||
</header>
|
||||
|
||||
<section class="gh-content gh-canvas">
|
||||
{{content}}
|
||||
|
||||
<div class="article-byline">
|
||||
<section class="article-byline-content">
|
||||
|
||||
<div class="article-byline-meta">
|
||||
<div class="byline-meta-content">
|
||||
<span>Posted </span>
|
||||
<time class="byline-meta-date" datetime="{{date format="D MMMM YYYY"}}">{{date format="D MMMM YYYY"}}</time>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="article-byline-meta">
|
||||
<div class="byline-meta-content">
|
||||
<span>Tags: </span>
|
||||
<span>{{tags separator=", "}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#if comments}}
|
||||
|
||||
16
tag.hbs
16
tag.hbs
@ -8,22 +8,6 @@
|
||||
{{#tag}}
|
||||
<section class="post-card post-card-large">
|
||||
|
||||
{{#if feature_image}}
|
||||
<div class="post-card-image-link">
|
||||
{{!-- 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 class="post-card-image"
|
||||
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: 1000px) 400px, 800px"
|
||||
src="{{img_url feature_image size="m"}}"
|
||||
alt="{{title}}"
|
||||
/>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="post-card-content">
|
||||
<div class="post-card-content-link">
|
||||
<header class="post-card-header">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user