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,
|
||||
.kg-width-full.kg-content-wide {
|
||||
--main: min(var(--content-width, 680px), 100% - var(--container-gap) * 2);
|
||||
--wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 680px)) / 2));
|
||||
--main: min(var(--content-width, 720px), 100% - var(--container-gap) * 2);
|
||||
--wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
|
||||
--full: minmax(var(--container-gap), 1fr);
|
||||
|
||||
display: grid;
|
||||
@ -937,41 +937,6 @@ Search LOGO Login Subscribe
|
||||
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 {
|
||||
position: relative;
|
||||
display: grid;
|
||||
@ -980,8 +945,22 @@ Search LOGO Login Subscribe
|
||||
grid-column: span 12;
|
||||
}
|
||||
|
||||
.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:first-child {
|
||||
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 {
|
||||
@ -990,14 +969,27 @@ Search LOGO Login Subscribe
|
||||
letter-spacing: -0.022em;
|
||||
}
|
||||
|
||||
.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-excerpt {
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gh-header.is-highlight .gh-card:not(:first-child) .gh-card-excerpt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gh-header.is-highlight .gh-header-right {
|
||||
grid-column: 13 / -1;
|
||||
}
|
||||
@ -1012,7 +1004,7 @@ Search LOGO Login Subscribe
|
||||
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;
|
||||
top: 0;
|
||||
right: calc(var(--grid-gap) / -2);
|
||||
@ -1032,15 +1024,11 @@ Search LOGO Login Subscribe
|
||||
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-featured .gh-card::after {
|
||||
.gh-header.is-highlight .gh-header-left > .gh-card:nth-child(2)::before,
|
||||
.gh-header.is-highlight .gh-featured-feed .gh-card::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* .gh-header.is-highlight .gh-featured-feed .gh-card::before {
|
||||
dis
|
||||
} */
|
||||
|
||||
/* 8.3. Classic layout */
|
||||
|
||||
.gh-header.is-classic {
|
||||
@ -1290,6 +1278,23 @@ Search LOGO Login Subscribe
|
||||
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 */
|
||||
|
||||
.gh-container.has-sidebar .gh-main {
|
||||
@ -1488,9 +1493,9 @@ Search LOGO Login Subscribe
|
||||
.gh-article-excerpt {
|
||||
margin-top: 16px;
|
||||
max-width: 720px;
|
||||
font-size: 2rem;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.01em;
|
||||
letter-spacing: -0.018em;
|
||||
}
|
||||
|
||||
.gh-article-meta {
|
||||
@ -1567,11 +1572,7 @@ Search LOGO Login Subscribe
|
||||
/* 14.2. Page template */
|
||||
|
||||
.page-template .gh-article-header {
|
||||
margin-block: 72px 24px;
|
||||
}
|
||||
|
||||
.page-template .gh-article-excerpt {
|
||||
margin-bottom: 12px;
|
||||
margin-block: 72px 32px;
|
||||
}
|
||||
|
||||
/* 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. */
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
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}}
|
||||
{{!-- 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"}}
|
||||
{{> "components/featured" showFeatured=@custom.show_featured limit=4}}
|
||||
{{/match}}
|
||||
<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}}">
|
||||
<div class="gh-container-inner gh-inner">
|
||||
|
||||
{{> "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">
|
||||
|
||||
{{!-- 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"}}
|
||||
@ -33,24 +53,6 @@
|
||||
{{/foreach}}
|
||||
{{/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 --}}
|
||||
{{#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>
|
||||
|
||||
@ -5,9 +5,19 @@
|
||||
|
||||
<main class="gh-main">
|
||||
<div class="gh-feed">
|
||||
{{#foreach posts from="8" limit="9"}}
|
||||
{{> "post-card"}}
|
||||
{{/foreach}}
|
||||
{{#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"}}
|
||||
{{> "post-card"}}
|
||||
{{/foreach}}
|
||||
{{else}}
|
||||
{{#foreach posts limit="9"}}
|
||||
{{> "post-card"}}
|
||||
{{/foreach}}
|
||||
{{/match}}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -30,5 +40,9 @@
|
||||
</aside>
|
||||
{{/if}}
|
||||
|
||||
<div class="gh-more">
|
||||
<a href="/page/2">See all →</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</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