Archive page

This commit is contained in:
Sodbileg Gansukh 2023-07-31 17:26:56 +08:00
parent c5a6870fcf
commit be114956d9
8 changed files with 150 additions and 123 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -249,8 +249,8 @@ a:hover {
.gh-canvas, .gh-canvas,
.kg-width-full.kg-content-wide { .kg-width-full.kg-content-wide {
--main: min(var(--content-width, 680px), 100% - var(--container-gap) * 2); --main: min(var(--content-width, 720px), 100% - var(--container-gap) * 2);
--wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 680px)) / 2)); --wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
--full: minmax(var(--container-gap), 1fr); --full: minmax(var(--container-gap), 1fr);
display: grid; display: grid;
@ -937,41 +937,6 @@ Search LOGO Login Subscribe
gap: var(--grid-gap); gap: var(--grid-gap);
} }
.gh-header.is-highlight .gh-card:first-child {
grid-column: span 8;
grid-row: span 3;
}
.gh-header.is-highlight .gh-card:first-child .gh-card-link {
gap: 28px;
}
.gh-header.is-highlight .gh-card:first-child .gh-card-tag {
display: block;
margin-bottom: 12px;
}
.gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-title {
max-width: 840px;
font-size: clamp(3.2rem, 3.18vw + 1.93rem, 6rem);
font-weight: 750;
line-height: 0.95;
letter-spacing: -0.03em;
}
.gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-excerpt {
margin-top: 20px;
font-size: 1.8rem;
}
.gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-meta:not(:empty) {
margin-top: 14px;
}
.gh-header.is-highlight .gh-card:not(:first-child) .gh-card-excerpt {
display: none;
}
.gh-header.is-highlight .gh-header-left { .gh-header.is-highlight .gh-header-left {
position: relative; position: relative;
display: grid; display: grid;
@ -980,8 +945,22 @@ Search LOGO Login Subscribe
grid-column: span 12; grid-column: span 12;
} }
.gh-header.is-highlight .gh-header-left .gh-card:not(:first-child) { .gh-header.is-highlight .gh-header-left > .gh-card:first-child {
grid-column: 9 / -1; grid-column: span 8;
grid-row: span 3;
}
.gh-header.is-highlight .gh-header-left > .gh-card:first-child .gh-card-link {
gap: 28px;
}
.gh-header.is-highlight .gh-header-left .gh-card:first-child .gh-card-image {
aspect-ratio: 16 / 10;
}
.gh-header.is-highlight .gh-header-left > .gh-card:first-child .gh-card-tag {
display: block;
margin-bottom: 12px;
} }
.gh-header.is-highlight .gh-header-left .gh-card:first-child .gh-card-title { .gh-header.is-highlight .gh-header-left .gh-card:first-child .gh-card-title {
@ -990,14 +969,27 @@ Search LOGO Login Subscribe
letter-spacing: -0.022em; letter-spacing: -0.022em;
} }
.gh-header.is-highlight .gh-header-left .gh-card:first-child .gh-card-image { .gh-header.is-highlight .gh-header-left > .gh-card:first-child .gh-card-excerpt {
aspect-ratio: 16 / 10; margin-top: 20px;
font-size: 1.8rem;
}
.gh-header.is-highlight .gh-header-left > .gh-card:first-child .gh-card-meta:not(:empty) {
margin-top: 14px;
}
.gh-header.is-highlight .gh-header-left .gh-card:not(:first-child) {
grid-column: 9 / -1;
} }
.gh-header.is-highlight .gh-header-left .gh-card:nth-child(4) .gh-card-image { .gh-header.is-highlight .gh-header-left .gh-card:nth-child(4) .gh-card-image {
display: none; display: none;
} }
.gh-header.is-highlight .gh-card:not(:first-child) .gh-card-excerpt {
display: none;
}
.gh-header.is-highlight .gh-header-right { .gh-header.is-highlight .gh-header-right {
grid-column: 13 / -1; grid-column: 13 / -1;
} }
@ -1012,7 +1004,7 @@ Search LOGO Login Subscribe
flex-direction: column; flex-direction: column;
} }
.gh-header.is-highlight :is(.gh-card:first-child, .gh-header-left)::after { .gh-header.is-highlight .gh-header-left::after {
position: absolute; position: absolute;
top: 0; top: 0;
right: calc(var(--grid-gap) / -2); right: calc(var(--grid-gap) / -2);
@ -1032,15 +1024,11 @@ Search LOGO Login Subscribe
background-color: var(--color-border); background-color: var(--color-border);
} }
.gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:nth-child(2)::before, .gh-header.is-highlight .gh-header-left > .gh-card:nth-child(2)::before,
.gh-header.is-highlight .gh-featured .gh-card::after { .gh-header.is-highlight .gh-featured-feed .gh-card::after {
display: none; display: none;
} }
/* .gh-header.is-highlight .gh-featured-feed .gh-card::before {
dis
} */
/* 8.3. Classic layout */ /* 8.3. Classic layout */
.gh-header.is-classic { .gh-header.is-classic {
@ -1290,6 +1278,23 @@ Search LOGO Login Subscribe
margin-top: 100px; margin-top: 100px;
} }
.gh-more {
display: none;
grid-column: 1 / -1;
margin-top: 48px;
font-size: 1.7rem;
font-weight: 700;
text-transform: uppercase;
}
.gh-container.has-sidebar .gh-more {
grid-column: span 12;
}
.home-template .gh-more {
display: block;
}
/* 11.1. With sidebar */ /* 11.1. With sidebar */
.gh-container.has-sidebar .gh-main { .gh-container.has-sidebar .gh-main {
@ -1488,9 +1493,9 @@ Search LOGO Login Subscribe
.gh-article-excerpt { .gh-article-excerpt {
margin-top: 16px; margin-top: 16px;
max-width: 720px; max-width: 720px;
font-size: 2rem; font-size: 2.2rem;
line-height: 1.35; line-height: 1.35;
letter-spacing: -0.01em; letter-spacing: -0.018em;
} }
.gh-article-meta { .gh-article-meta {
@ -1567,11 +1572,7 @@ Search LOGO Login Subscribe
/* 14.2. Page template */ /* 14.2. Page template */
.page-template .gh-article-header { .page-template .gh-article-header {
margin-block: 72px 24px; margin-block: 72px 32px;
}
.page-template .gh-article-excerpt {
margin-bottom: 12px;
} }
/* 14.3. Page without header */ /* 14.3. Page without header */
@ -1596,7 +1597,7 @@ created within the Ghost editor. The main content handles
headings, text, images and lists. We deal with cards lower down. */ headings, text, images and lists. We deal with cards lower down. */
.gh-content { .gh-content {
font-size: calc(var(--content-font-size, 1.7rem) * var(--font-multiplier, 1)); font-size: calc(var(--content-font-size, 1.8rem) * var(--font-multiplier, 1));
letter-spacing: var(--content-letter-spacing, 0); letter-spacing: var(--content-letter-spacing, 0);
} }

12
home.hbs Normal file
View File

@ -0,0 +1,12 @@
{{!< default}}
{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
{{> "components/header" headerStyle=@custom.header_style}}
{{#match @custom.header_style "!=" "Highlight"}}
{{> "components/featured" showFeatured=@custom.show_featured limit=4}}
{{/match}}
{{> "components/cta"}}
{{> "components/post-list" postListStyle=@custom.post_list_style}}

View File

@ -1,12 +1,48 @@
{{!< default}} {{!< default}}
{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}} {{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
{{> "components/header" headerStyle=@custom.header_style}} <main class="gh-main gh-outer">
{{#match @custom.header_style "!=" "Highlight"}} <section class="gh-container is-{{#match @custom.post_list_style "List"}}list{{else}}grid{{/match}}{{#if @custom.show_sidebar}} has-sidebar{{/if}}{{#if @custom.hide_images}} no-image{{/if}}">
{{> "components/featured" showFeatured=@custom.show_featured limit=4}} <div class="gh-container-inner gh-inner">
{{/match}}
{{> "components/cta"}} <h2 class="gh-container-title">Latest</h2>
{{> "components/post-list" postListStyle=@custom.post_list_style}} <main class="gh-main">
<div class="gh-feed">
{{#match pagination.page 2}}
{{#get "posts" include="authors" limit=@config.posts_per_page as |recent|}}
{{#foreach recent}}
{{> "post-card"}}
{{/foreach}}
{{/get}}
{{/match}}
{{#foreach posts}}
{{> "post-card"}}
{{/foreach}}
</div>
</main>
{{#if @custom.show_sidebar}}
<aside class="gh-sidebar">
<section class="gh-about">
{{#if @site.icon}}
<img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}">
{{/if}}
<h3 class="gh-about-title is-title">{{@site.title}}</h3>
{{#if @site.description}}
<p class="gh-about-description is-body">{{@site.description}}</p>
{{/if}}
{{#if @site.members_enabled}}
{{#unless @member}}
<button class="gh-button">Subscribe</button>
{{/unless}}
{{/if}}
</section>
</aside>
{{/if}}
</div>
</section>
</main>

View File

@ -14,6 +14,26 @@
<div class="gh-header-inner gh-inner"> <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 --}} {{!-- Magazine layout --}}
{{#match headerStyle "Magazine"}} {{#match headerStyle "Magazine"}}
{{#foreach posts limit="7"}} {{#foreach posts limit="7"}}
@ -33,24 +53,6 @@
{{/foreach}} {{/foreach}}
{{/match}} {{/match}}
{{!-- Highlight layout --}}
{{#match headerStyle "Highlight"}}
{{#if @custom.show_featured}}
<div class="gh-header-left">
{{#foreach posts limit="4"}}
{{> "post-card"}}
{{/foreach}}
</div>
<div class="gh-header-right">
{{> "components/featured" showFeatured=@custom.show_featured limit=6}}
</div>
{{else}}
{{#foreach posts limit="4"}}
{{> "post-card"}}
{{/foreach}}
{{/if}}
{{/match}}
{{!-- Landing layout --}} {{!-- Landing layout --}}
{{#match headerStyle "Landing"}} {{#match headerStyle "Landing"}}
<h1 class="gh-header-title is-title">Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1> <h1 class="gh-header-title is-title">Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>

View File

@ -5,9 +5,19 @@
<main class="gh-main"> <main class="gh-main">
<div class="gh-feed"> <div class="gh-feed">
{{#match @custom.header_style "Highlight"}}
{{#foreach posts from="11" limit="9"}}
{{> "post-card"}}
{{/foreach}}
{{else match @custom.header_style "Magazine"}}
{{#foreach posts from="8" limit="9"}} {{#foreach posts from="8" limit="9"}}
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
{{else}}
{{#foreach posts limit="9"}}
{{> "post-card"}}
{{/foreach}}
{{/match}}
</div> </div>
</main> </main>
@ -30,5 +40,9 @@
</aside> </aside>
{{/if}} {{/if}}
<div class="gh-more">
<a href="/page/2">See all →</a>
</div>
</div> </div>
</section> </section>

View File

@ -1,38 +0,0 @@
{{!< default}}
{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
<main class="gh-main gh-outer">
<div class="gh-archive gh-inner">
{{#tag}}
<section class="gh-archive-content">
<div class="gh-archive-inner">
{{#if feature_image}}
<img class="gh-archive-image" src="{{img_url feature_image size="s"}}" alt="{{name}}">
{{/if}}
<h1 class="gh-archive-title is-title">{{name}}</h1>
<p class="gh-archive-description">
{{#if description}}
{{description}}
{{else}}
{{plural ../pagination.total empty="0 posts" singular="% post" plural="% posts"}}
{{/if}}
</p>
</div>
</section>
{{/tag}}
<section class="gh-container is-{{#match @custom.post_list_style "List"}}list{{else}}grid{{/match}}{{#if @custom.hide_images}} no-image{{/if}}">
<div class="gh-container-inner">
<main class="gh-main">
<div class="gh-feed">
{{#foreach posts}}
{{> "post-card"}}
{{/foreach}}
</div>
</main>
</div>
</section>
</div>
</main>