Featured post indicator

This commit is contained in:
Sodbileg Gansukh 2022-05-26 13:31:16 +08:00
parent 9efff7d6fa
commit 4461d5e2f8
6 changed files with 41 additions and 14 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

@ -654,7 +654,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
margin-top: 0; margin-top: 0;
} }
.post-card-primary-tag { .post-card-tags {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 10px; margin: 0 0 10px;
color: var(--color-secondary-text); color: var(--color-secondary-text);
font-size: 1.4rem; font-size: 1.4rem;
@ -663,6 +666,13 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
line-height: 1; line-height: 1;
} }
.post-card-featured {
display: flex;
align-items: center;
gap: 3px;
color: var(--ghost-accent-color);
}
.post-card-title { .post-card-title {
margin: 0; margin: 0;
font-size: 2.6rem; font-size: 2.6rem;
@ -788,7 +798,7 @@ make sure this only happens on large viewports / desktop-ish devices.
height: 100%; height: 100%;
} }
.post-card-large .post-card-primary-tag { .post-card-large .post-card-tags {
margin-bottom: 12px; margin-bottom: 12px;
} }
@ -810,7 +820,7 @@ make sure this only happens on large viewports / desktop-ish devices.
margin-bottom: 40px; margin-bottom: 40px;
} }
.post-card-full .post-card-primary-tag { .post-card-full .post-card-tags {
margin-bottom: 14px; margin-bottom: 14px;
} }
@ -1714,10 +1724,14 @@ html.dark-mode .post-card-image {
background: var(--color-darkmode); background: var(--color-darkmode);
} }
html.dark-mode :is(.post-card-primary-tag, .post-card-meta, .article-tag a, .byline-meta-content) { html.dark-mode :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content) {
color: color-mod(var(--color-secondary-text) l(-22%)); color: color-mod(var(--color-secondary-text) l(-22%));
} }
html.dark-mode .post-card-featured {
color: #fff;
}
html.dark-mode .post-card-title { html.dark-mode .post-card-title {
color: #fff; color: #fff;
} }

3
partials/icons/fire.hbs Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.49365 4.58752C3.53115 6.03752 2.74365 7.70002 2.74365 9.25002C2.74365 10.6424 3.29678 11.9778 4.28134 12.9623C5.26591 13.9469 6.60127 14.5 7.99365 14.5C9.38604 14.5 10.7214 13.9469 11.706 12.9623C12.6905 11.9778 13.2437 10.6424 13.2437 9.25002C13.2437 6.00002 10.9937 3.50002 9.16865 1.68127L6.99365 6.25002L4.49365 4.58752Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

After

Width:  |  Height:  |  Size: 538 B

View File

@ -24,9 +24,14 @@ which templates loop over to generate a list of posts. --}}
<a class="post-card-content-link" href="{{url}}"> <a class="post-card-content-link" href="{{url}}">
<header class="post-card-header"> <header class="post-card-header">
{{#primary_tag}} <div class="post-card-tags">
<div class="post-card-primary-tag">{{name}}</div> {{#primary_tag}}
{{/primary_tag}} <span class="post-card-primary-tag">{{name}}</span>
{{/primary_tag}}
{{#if featured}}
<span class="post-card-featured">{{> "icons/fire"}} Featured</span>
{{/if}}
</div>
<h2 class="post-card-title">{{title}}</h2> <h2 class="post-card-title">{{title}}</h2>
</header> </header>
{{#if excerpt}} {{#if excerpt}}

View File

@ -12,11 +12,16 @@ into the {body} tag of the default.hbs template --}}
<header class="article-header gh-canvas"> <header class="article-header gh-canvas">
{{#if primary_tag}} <div class="article-tag post-card-tags">
<section class="article-tag post-card-primary-tag"> {{#primary_tag}}
<a href="{{primary_tag.url}}">{{primary_tag.name}}</a> <span class="post-card-primary-tag">
</section> <a href="{{url}}">{{name}}</a>
{{/if}} </span>
{{/primary_tag}}
{{#if featured}}
<span class="post-card-featured">{{> "icons/fire"}} Featured</span>
{{/if}}
</div>
<h1 class="article-title">{{title}}</h1> <h1 class="article-title">{{title}}</h1>