mirror of
https://github.com/Damillora/Yuika
synced 2024-12-25 21:53:45 +00:00
feat: new post design
This commit is contained in:
parent
d15da305d3
commit
c44d80e0f1
99
author.hbs
99
author.hbs
@ -1,51 +1,56 @@
|
|||||||
{{!< default}} {{#author}} {{> header-background background=cover_image}} <div class="page-header">
|
{{!< default}} <div class="page-header page-header--short">
|
||||||
<div class="page-header__background responsive-header-img">
|
<div class="page-header__background responsive-header-img">
|
||||||
<div class="page-header__overlay"></div>
|
<div class="page-header__overlay"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-header__contents">
|
<div class="page-header__contents">
|
||||||
<div class="post-header container mx-auto main">
|
</div>
|
||||||
<p class="page-header__text">
|
</div>
|
||||||
<span class="post-header__tag-name">Author</span>
|
{{#author}}
|
||||||
</p>
|
<div class="post-header container mx-auto main">
|
||||||
<div class="post-header__heading post-header__heading--tag">
|
<p class="post-header__text">
|
||||||
{{#if profile_image}}
|
<span class="post-header__tag-name">Author</span>
|
||||||
<style>
|
</p>
|
||||||
.author-image {
|
<div class="post-header__heading post-header__heading--tag">
|
||||||
background-image: url('{{profile_image}}');
|
{{#if profile_image}}
|
||||||
background-size: cover;
|
<style>
|
||||||
background-position: center;
|
.author-image {
|
||||||
}
|
background-image: url('{{profile_image}}');
|
||||||
</style>
|
background-size: cover;
|
||||||
<span class="post-header__heading--tag-color author-image"></span>
|
background-position: center;
|
||||||
{{else}}
|
}
|
||||||
<span class="post-header__heading--tag-color"></span>
|
</style>
|
||||||
{{/if}}
|
<span class="post-header__heading--tag-color author-image"></span>
|
||||||
<h1 class="post-header__heading--tag-text">
|
{{else}}
|
||||||
{{name}}
|
<span class="post-header__heading--tag-color"></span>
|
||||||
</h1>
|
{{/if}}
|
||||||
</div>
|
<h1 class="post-header__heading">
|
||||||
<p class="page-header__text">
|
{{name}}
|
||||||
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
|
</h1>
|
||||||
</p>
|
|
||||||
<p class="page-header__text">
|
|
||||||
{{#if website}}
|
|
||||||
<span class=""><a class="post-header__social" href="{{website}}" target="_blank"
|
|
||||||
rel="noopener">Website</a></span>
|
|
||||||
{{/if}}
|
|
||||||
{{#if twitter}}
|
|
||||||
<span class=""><a class="post-header__social" href="{{twitter_url}}" target="_blank"
|
|
||||||
rel="noopener">Twitter</a></span>
|
|
||||||
{{/if}}
|
|
||||||
{{#if facebook}}
|
|
||||||
<span class=""><a class="post-header__social" href="{{facebook_url}}" target="_blank"
|
|
||||||
rel="noopener">Facebook</a></span>
|
|
||||||
{{/if}}
|
|
||||||
</p>
|
|
||||||
{{#if bio}}
|
|
||||||
<p class="page-header__text">{{bio}}</p>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p class="post-header__text">
|
||||||
|
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
|
||||||
|
</p>
|
||||||
|
<p class="post-header__text">
|
||||||
|
{{#if website}}
|
||||||
|
<span class=""><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
|
||||||
|
{{/if}}
|
||||||
|
{{#if twitter}}
|
||||||
|
<span class=""><a href="{{twitter_url}}" target="_blank"
|
||||||
|
rel="noopener">Twitter</a></span>
|
||||||
|
{{/if}}
|
||||||
|
{{#if facebook}}
|
||||||
|
<span class=""><a href="{{facebook_url}}" target="_blank"
|
||||||
|
rel="noopener">Facebook</a></span>
|
||||||
|
{{/if}}
|
||||||
|
</p>
|
||||||
|
{{#if bio}}
|
||||||
|
<p class="page-header__text">{{bio}}</p>
|
||||||
|
{{/if}}
|
||||||
|
{{#if cover_image}}
|
||||||
|
<figure class="post-header__featured-image">
|
||||||
|
<img src="{{cover_image}}" alt="{{name}}" loading="lazy">
|
||||||
|
</figure>
|
||||||
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
{{/author}}
|
{{/author}}
|
||||||
<main class="post-list container mx-auto">
|
<main class="post-list container mx-auto">
|
||||||
|
|||||||
24
page.hbs
24
page.hbs
@ -1,22 +1,32 @@
|
|||||||
{{!< default}} {{#post}} <div class="relative group index-header">
|
{{!< default}} {{#post}} <div class="relative group index-header">
|
||||||
|
|
||||||
{{> header-background background=feature_image}}
|
<div class="page-header page-header--short">
|
||||||
<div class="page-header">
|
<div class="page-header__background">
|
||||||
<div class="page-header__background responsive-header-img">
|
|
||||||
<div class="page-header__overlay"></div>
|
<div class="page-header__overlay"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-header__contents">
|
<div class="page-header__contents">
|
||||||
<div class="post-header container mx-auto main">
|
|
||||||
<h1 class="page-header__heading">{{title}}</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="post-header container mx-auto main">
|
||||||
|
<h1 class="post-header__heading">{{title}}</h1>
|
||||||
|
{{#if feature_image}}
|
||||||
|
<figure class="post-header__featured-image">
|
||||||
|
<img src="{{feature_image}}" alt="{{feature_image_alt}}" loading="lazy">
|
||||||
|
{{#if feature_image_caption}}
|
||||||
|
|
||||||
|
<figcaption>{{feature_image_caption}}</figcaption>
|
||||||
|
{{/if}}
|
||||||
|
</figure>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<main id="post" class="container mx-auto main">
|
<main id="post" class="container mx-auto main">
|
||||||
{{content}}
|
{{content}}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{{/post}}
|
{{/post}}
|
||||||
|
|
||||||
{{#contentFor "scripts"}}
|
{{#contentFor "scripts"}}
|
||||||
<script>
|
<script>
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
94
post.hbs
94
post.hbs
@ -1,56 +1,60 @@
|
|||||||
{{!< default}} {{#post}} <div class="relative group index-header">
|
{{!< default}} {{#post}} <div class="relative group index-header">
|
||||||
|
|
||||||
{{> header-background background=feature_image}}
|
<div class="page-header page-header--short">
|
||||||
<div class="page-header">
|
<div class="page-header__background">
|
||||||
<div class="page-header__background responsive-header-img">
|
|
||||||
<div class="page-header__overlay"></div>
|
<div class="page-header__overlay"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-header__contents">
|
<div class="page-header__contents">
|
||||||
<div class="post-header container mx-auto main">
|
|
||||||
{{> primary-tag}}
|
|
||||||
<h1 class="page-header__heading">{{title}}</h1>
|
|
||||||
<p class="post-header__time">
|
|
||||||
<span>
|
|
||||||
<time datetime="{{date format=" YYYY-MM-DD"}}">
|
|
||||||
{{date format="D MMM YYYY"}}
|
|
||||||
</time>
|
|
||||||
<span class="bull">•</span>
|
|
||||||
{{reading_time}}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
{{#if authors}}
|
|
||||||
<div class="post-header__author-list">
|
|
||||||
<div class="post-header__author-images">
|
|
||||||
{{#foreach authors}}
|
|
||||||
{{#if profile_image}}
|
|
||||||
<a href="{{url}}">
|
|
||||||
<img class="post-header__author-image" src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
|
|
||||||
</a>
|
|
||||||
{{/if}}
|
|
||||||
{{/foreach}}
|
|
||||||
</div>
|
|
||||||
<div class="post-header__author-names">
|
|
||||||
{{#has author="count:>2"}}
|
|
||||||
Multiple authors
|
|
||||||
{{else}}
|
|
||||||
{{#foreach authors}}
|
|
||||||
<a href="{{url}}" title="{{name}}" class="post-header__author-name">{{name}}</a>
|
|
||||||
{{/foreach}}
|
|
||||||
{{/has}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
{{#if feature_image_caption}}
|
|
||||||
<p class="post-header__caption">
|
|
||||||
<span class="post-header__caption-text">
|
|
||||||
{{feature_image_caption}}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="post-header container mx-auto main">
|
||||||
|
{{> primary-tag}}
|
||||||
|
<h1 class="post-header__heading">{{title}}</h1>
|
||||||
|
<p class="post-header__time">
|
||||||
|
<span>
|
||||||
|
<time datetime="{{date format=" YYYY-MM-DD"}}">
|
||||||
|
{{date format="D MMM YYYY"}}
|
||||||
|
</time>
|
||||||
|
<span class="bull">•</span>
|
||||||
|
{{reading_time}}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
{{#if authors}}
|
||||||
|
<div class="post-header__author-list">
|
||||||
|
<div class="post-header__author-images">
|
||||||
|
{{#foreach authors}}
|
||||||
|
{{#if profile_image}}
|
||||||
|
<a href="{{url}}">
|
||||||
|
<img class="post-header__author-image" src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
|
||||||
|
</a>
|
||||||
|
{{/if}}
|
||||||
|
{{/foreach}}
|
||||||
|
</div>
|
||||||
|
<div class="post-header__author-names">
|
||||||
|
{{#has author="count:>2"}}
|
||||||
|
Multiple authors
|
||||||
|
{{else}}
|
||||||
|
{{#foreach authors}}
|
||||||
|
<a href="{{url}}" title="{{name}}" class="post-header__author-name">{{name}}</a>
|
||||||
|
{{/foreach}}
|
||||||
|
{{/has}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
{{#if feature_image}}
|
||||||
|
<figure class="post-header__featured-image">
|
||||||
|
<img src="{{feature_image}}" alt="{{feature_image_alt}}" loading="lazy">
|
||||||
|
{{#if feature_image_caption}}
|
||||||
|
|
||||||
|
<figcaption>{{feature_image_caption}}</figcaption>
|
||||||
|
{{/if}}
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<main id="post" class="container mx-auto main">
|
<main id="post" class="container mx-auto main">
|
||||||
{{content}}
|
{{content}}
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
46
tag.hbs
46
tag.hbs
@ -1,27 +1,35 @@
|
|||||||
{{!< default}} {{#tag}} {{> header-background background=feature_image}}
|
{{!< default}}
|
||||||
<div class="page-header">
|
<div class="page-header page-header--short">
|
||||||
<div class="page-header__background responsive-header-img">
|
<div class="page-header__background">
|
||||||
<div class="page-header__overlay"></div>
|
<div class="page-header__overlay"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-header__contents">
|
<div class="page-header__contents">
|
||||||
<div class="post-header container mx-auto main">
|
|
||||||
<p>
|
|
||||||
<span class="post-header__tag-name">Tag</span>
|
|
||||||
</p>
|
|
||||||
<div class="post-header__heading post-header__heading--tag">
|
|
||||||
<h1 class="post-header__heading--tag-text">
|
|
||||||
{{name}}
|
|
||||||
</h1>
|
|
||||||
{{#if accent_color}}
|
|
||||||
<span class="post-header__heading--tag-color" style="background-color: {{accent_color}};"></span>
|
|
||||||
{{else}}
|
|
||||||
<span class="post-header__heading--tag-color"></span>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
<p class="page-header__text">{{description}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{{#tag}}
|
||||||
|
<div class="post-header container mx-auto main">
|
||||||
|
<p>
|
||||||
|
<span class="post-header__tag-name">Tag</span>
|
||||||
|
</p>
|
||||||
|
<div class="post-header__heading post-header__heading--tag">
|
||||||
|
<h1 class="post-header__heading">
|
||||||
|
{{name}}
|
||||||
|
</h1>
|
||||||
|
{{#if accent_color}}
|
||||||
|
<span class="post-header__heading--tag-color" style="background-color: {{accent_color}};"></span>
|
||||||
|
{{else}}
|
||||||
|
<span class="post-header__heading--tag-color"></span>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
{{#if description}}
|
||||||
|
<p>{{description}}</p>
|
||||||
|
{{/if}}
|
||||||
|
{{#if feature_image}}
|
||||||
|
<figure class="post-header__featured-image">
|
||||||
|
<img src="{{feature_image}}" alt="{{name}}" loading="lazy">
|
||||||
|
</figure>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
{{/tag}}
|
{{/tag}}
|
||||||
|
|
||||||
<main class="post-list container mx-auto">
|
<main class="post-list container mx-auto">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user