1
0
mirror of https://github.com/Damillora/Yuika synced 2024-12-25 13:43:46 +00:00

feat: new post design

This commit is contained in:
Damillora 2021-07-11 04:23:59 +07:00
parent d15da305d3
commit c44d80e0f1
4 changed files with 145 additions and 118 deletions

View File

@ -1,10 +1,13 @@
{{!< 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__overlay"></div>
</div>
<div class="page-header__contents">
</div>
</div>
{{#author}}
<div class="post-header container mx-auto main">
<p class="page-header__text">
<p class="post-header__text">
<span class="post-header__tag-name">Author</span>
</p>
<div class="post-header__heading post-header__heading--tag">
@ -20,32 +23,34 @@
{{else}}
<span class="post-header__heading--tag-color"></span>
{{/if}}
<h1 class="post-header__heading--tag-text">
<h1 class="post-header__heading">
{{name}}
</h1>
</div>
<p class="page-header__text">
<p class="post-header__text">
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
</p>
<p class="page-header__text">
<p class="post-header__text">
{{#if website}}
<span class=""><a class="post-header__social" href="{{website}}" target="_blank"
rel="noopener">Website</a></span>
<span class=""><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
{{/if}}
{{#if twitter}}
<span class=""><a class="post-header__social" href="{{twitter_url}}" target="_blank"
<span class=""><a 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"
<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}}
</div>
</div>
{{#if cover_image}}
<figure class="post-header__featured-image">
<img src="{{cover_image}}" alt="{{name}}" loading="lazy">
</figure>
{{/if}}
</div>
{{/author}}
<main class="post-list container mx-auto">

View File

@ -1,22 +1,32 @@
{{!< default}} {{#post}} <div class="relative group index-header">
{{> header-background background=feature_image}}
<div class="page-header">
<div class="page-header__background responsive-header-img">
<div class="page-header page-header--short">
<div class="page-header__background">
<div class="page-header__overlay"></div>
</div>
<div class="page-header__contents">
</div>
</div>
<div class="post-header container mx-auto main">
<h1 class="page-header__heading">{{title}}</h1>
</div>
</div>
<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">
{{content}}
</main>
{{/post}}
{{#contentFor "scripts"}}
<script>
</script>

View File

@ -1,14 +1,16 @@
{{!< default}} {{#post}} <div class="relative group index-header">
{{> header-background background=feature_image}}
<div class="page-header">
<div class="page-header__background responsive-header-img">
<div class="page-header page-header--short">
<div class="page-header__background">
<div class="page-header__overlay"></div>
</div>
<div class="page-header__contents">
</div>
</div>
<div class="post-header container mx-auto main">
{{> primary-tag}}
<h1 class="page-header__heading">{{title}}</h1>
<h1 class="post-header__heading">{{title}}</h1>
<p class="post-header__time">
<span>
<time datetime="{{date format=" YYYY-MM-DD"}}">
@ -40,16 +42,18 @@
</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}}
<p class="post-header__caption">
<span class="post-header__caption-text">
{{feature_image_caption}}
</span>
</p>
<figcaption>{{feature_image_caption}}</figcaption>
{{/if}}
</figure>
{{/if}}
</div>
</div>
</div>
<main id="post" class="container mx-auto main">
{{content}}

22
tag.hbs
View File

@ -1,15 +1,18 @@
{{!< default}} {{#tag}} {{> header-background background=feature_image}}
<div class="page-header">
<div class="page-header__background responsive-header-img">
{{!< default}}
<div class="page-header page-header--short">
<div class="page-header__background">
<div class="page-header__overlay"></div>
</div>
<div class="page-header__contents">
</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--tag-text">
<h1 class="post-header__heading">
{{name}}
</h1>
{{#if accent_color}}
@ -18,9 +21,14 @@
<span class="post-header__heading--tag-color"></span>
{{/if}}
</div>
<p class="page-header__text">{{description}}</p>
</div>
</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}}