mentos1386/mnts.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Featured post indicator

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/built/screen.css
View file

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View file

File diff suppressed because one or more lines are too long

22
assets/css/screen.css
View file

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

After

Width:  |  Height:  |  Size: 538 B

7
partials/post-card.hbs
View file

@ -24,9 +24,14 @@ which templates loop over to generate a list of posts. --}}
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
<div class="post-card-tags">
{{#primary_tag}}
<div class="post-card-primary-tag">{{name}}</div>
<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>
</header>
{{#if excerpt}}

13
post.hbs
View file

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