davejansen/Ghost-Theme-Source
1
0
Fork 0
Code Issues Pull Requests Activity

Header component design details

Browse Source
This commit is contained in:
Sodbileg Gansukh
2023-07-11 17:55:58 +08:00
parent e29085e389
commit eefe34bc1c
8 changed files with 216 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
partials/components/header.hbs
View File

@@ -42,17 +42,20 @@
{{!-- Landing layout --}}
{{#match headerStyle "Landing"}}
<h1 data-title>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
<form>
<input type="email" placeholder="jamie@example.com">
<h1 class="gh-header-title" data-title>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
<form class="gh-header-form">
<input class="gh-header-input" type="email" placeholder="jamie@example.com">
<button class="gh-button" type="submit">Subscribe</button>
</form>
{{/match}}
{{!-- Search layout --}}
{{#match headerStyle "Search"}}
<h1 data-title>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
<button data-ghost-search>{{> "icons/search"}}Search</button>
<h1 class="gh-header-title" data-title>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
<form class="gh-header-form">
{{> "icons/search"}}
<button class="gh-header-input" data-ghost-search>Search posts, tags and authors</button>
</form>
{{/match}}
</div>

11
partials/loop.hbs
View File

@@ -15,16 +15,19 @@
</figure>
{{/if}}
<div class="gh-card-wrapper">
{{#if primary_tag}}
<p class="gh-card-tag">{{primary_tag.name}}</p>
{{/if}}
<h3 class="gh-card-title" data-title>{{title}}</h3>
<p class="gh-card-excerpt" data-body>{{excerpt}}</p>
<footer class="gh-card-meta" data-body>
{{#if @custom.show_author}}
<footer class="gh-card-meta" data-body><!--
-->{{#if @custom.show_author}}
<span class="gh-card-author">By {{#foreach authors}}{{#if @first}}{{name}}{{else}}, {{name}}{{/if}}{{/foreach}}</span>
{{/if}}
{{#if @custom.show_post_date}}
<time class="gh-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
{{/if}}
</footer>
{{/if}}<!--
--></footer>
</div>
</a>
</article>