simon/ghost-theme-sd.ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Hide hightlight/magazine header until there are enough posts

Browse Source
This commit is contained in:
Sodbileg Gansukh 2023-08-08 23:42:11 +08:00
parent d64ced927f
commit 824cd6c02d
6 changed files with 109 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

3
assets/css/screen.css
View File

@ -1143,6 +1143,9 @@ Search LOGO Login Subscribe
align-items: center; align-items: center;
gap: 24px; gap: 24px;
padding-top: 100px; padding-top: 100px;
}
.gh-header + .gh-cta .gh-cta-inner {
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
} }

75
partials/components/header-content.hbs Normal file
View File

@ -0,0 +1,75 @@
<section class="gh-header is-{{#match headerStyle "Magazine"}}magazine{{else match headerStyle "Highlight"}}highlight{{else}}classic{{/match}}{{#if @custom.use_publication_cover_as_background}}{{#if @site.cover_image}} has-image{{/if}}{{/if}} gh-outer">
{{!-- Background image --}}
{{#if @custom.use_publication_cover_as_background}}
{{#match headerStyle "!=" "Magazine"}}
{{#match headerStyle "!=" "Highlight"}}
{{#if @site.cover_image}}
<img class="gh-header-image" src="{{@site.cover_image}}" alt="{{@site.title}}">
{{/if}}
{{/match}}
{{/match}}
{{/if}}
<div class="gh-header-inner gh-inner">
{{!-- Highlight layout --}}
{{#match headerStyle "Highlight"}}
<div class="gh-header-left">
{{#foreach posts limit="4"}}
{{> "post-card"}}
{{/foreach}}
</div>
<div class="gh-header-right">
{{#if @custom.show_featured}}
{{> "components/featured" showFeatured=@custom.show_featured limit=6}}
{{else}}
<div class="gh-featured-feed">
{{#foreach posts from="5" limit="6"}}
{{> "post-card"}}
{{/foreach}}
</div>
{{/if}}
</div>
{{/match}}
{{!-- Magazine layout --}}
{{#match headerStyle "Magazine"}}
{{#foreach posts limit="7"}}
{{#match @number 2}}
<div class="gh-header-left">
{{/match}}
{{#match @number 5}}
<div class="gh-header-right">
{{/match}}
{{> "post-card"}}
{{#match @number 4}}
</div>
{{/match}}
{{#match @number 7}}
</div>
{{/match}}
{{/foreach}}
{{/match}}
{{!-- Landing layout --}}
{{#match headerStyle "Landing"}}
<h1 class="gh-header-title is-title">{{@site.description}}</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 class="gh-header-title is-title">{{@site.description}}</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>
</section>

78
partials/components/header.hbs
View File

@ -1,77 +1,15 @@
{{#match headerStyle "!=" "Off"}} {{#match headerStyle "!=" "Off"}}
<section class="gh-header is-{{#match headerStyle "Magazine"}}magazine{{else match headerStyle "Highlight"}}highlight{{else}}classic{{/match}}{{#if @custom.use_publication_cover_as_background}}{{#if @site.cover_image}} has-image{{/if}}{{/if}} gh-outer">
{{!-- Background image --}}
{{#if @custom.use_publication_cover_as_background}}
{{#match headerStyle "!=" "Magazine"}}
{{#match headerStyle "!=" "Highlight"}}
{{#if @site.cover_image}}
<img class="gh-header-image" src="{{@site.cover_image}}" alt="{{@site.title}}">
{{/if}}
{{/match}}
{{/match}}
{{/if}}
<div class="gh-header-inner gh-inner">
{{!-- Highlight layout --}}
{{#match headerStyle "Highlight"}} {{#match headerStyle "Highlight"}}
<div class="gh-header-left"> {{#match posts.length ">=" 10}}
{{#foreach posts limit="4"}} {{> "components/header-content"}}
{{> "post-card"}} {{/match}}
{{/foreach}} {{else match headerStyle "Magazine"}}
</div> {{#match posts.length ">=" 7}}
<div class="gh-header-right"> {{> "components/header-content"}}
{{#if @custom.show_featured}} {{/match}}
{{> "components/featured" showFeatured=@custom.show_featured limit=6}}
{{else}} {{else}}
<div class="gh-featured-feed"> {{> "components/header-content"}}
{{#foreach posts from="5" limit="6"}}
{{> "post-card"}}
{{/foreach}}
</div>
{{/if}}
</div>
{{/match}} {{/match}}
{{!-- Magazine layout --}}
{{#match headerStyle "Magazine"}}
{{#foreach posts limit="7"}}
{{#match @number 2}}
<div class="gh-header-left">
{{/match}}
{{#match @number 5}}
<div class="gh-header-right">
{{/match}}
{{> "post-card"}}
{{#match @number 4}}
</div>
{{/match}}
{{#match @number 7}}
</div>
{{/match}}
{{/foreach}}
{{/match}}
{{!-- Landing layout --}}
{{#match headerStyle "Landing"}}
<h1 class="gh-header-title is-title">{{@site.description}}</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 class="gh-header-title is-title">{{@site.description}}</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>
</section>
{{/match}} {{/match}}

12
partials/components/post-list.hbs
View File

@ -6,10 +6,17 @@
<main class="gh-main"> <main class="gh-main">
<div class="gh-feed"> <div class="gh-feed">
{{#match @custom.header_style "Highlight"}} {{#match @custom.header_style "Highlight"}}
{{#match posts.length ">=" 10}}
{{#foreach posts from="11" limit="9"}} {{#foreach posts from="11" limit="9"}}
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
{{else}}
{{#foreach posts limit="9"}}
{{> "post-card"}}
{{/foreach}}
{{/match}}
{{else match @custom.header_style "Magazine"}} {{else match @custom.header_style "Magazine"}}
{{#match posts.length ">=" 7}}
{{#foreach posts from="8" limit="9"}} {{#foreach posts from="8" limit="9"}}
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
@ -18,6 +25,11 @@
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
{{/match}} {{/match}}
{{else}}
{{#foreach posts limit="9"}}
{{> "post-card"}}
{{/foreach}}
{{/match}}
</div> </div>
</main> </main>