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

Archive page

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
assets/built/screen.css
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/built/screen.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/css/screen.css
+57 -56
View File
@@ -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);
}
home.hbs
+12
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}}
index.hbs
+41 -5
View File
@@ -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}}
<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">
<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/cta"}}
{{#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}}
{{> "components/post-list" postListStyle=@custom.post_list_style}}
</div>
</section>
</main>
partials/components/header.hbs
+20 -18
View File
@@ -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>
partials/components/post-list.hbs
+14
View File
@@ -5,9 +5,19 @@
<main class="gh-main">
<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"}}
{{> "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>
tag copy.hbs
-38
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>