Archive page
This commit is contained in:
Sodbileg Gansukh
parent
c5a6870fcf
commit
be114956d9
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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
12
home.hbs
Normal 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}}
|
||||||
48
index.hbs
48
index.hbs
@ -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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
{{> "components/post-list" postListStyle=@custom.post_list_style}}
|
{{#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>
|
||||||
@ -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>
|
||||||
|
|||||||
@ -5,9 +5,19 @@
|
|||||||
|
|
||||||
<main class="gh-main">
|
<main class="gh-main">
|
||||||
<div class="gh-feed">
|
<div class="gh-feed">
|
||||||
{{#foreach posts from="8" limit="9"}}
|
{{#match @custom.header_style "Highlight"}}
|
||||||
{{> "post-card"}}
|
{{#foreach posts from="11" limit="9"}}
|
||||||
{{/foreach}}
|
{{> "post-card"}}
|
||||||
|
{{/foreach}}
|
||||||
|
{{else match @custom.header_style "Magazine"}}
|
||||||
|
{{#foreach posts from="8" limit="9"}}
|
||||||
|
{{> "post-card"}}
|
||||||
|
{{/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>
|
||||||
38
tag copy.hbs
38
tag copy.hbs
@ -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>
|
|
||||||
Loading…
Reference in New Issue
Block a user