ghostcms/solo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show all tags for a post rather than the "primary" tag only

Browse Source 
These changes slightly restyle the post metadata to make better use of Flexbox's gap feature, simplifying metadata spacing at different viewport widths.
This commit is contained in:
Steve Richert 2023-12-12 19:13:57 +00:00 committed by GitHub
parent 13d807d02f
commit 24d2d40b61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/css/screen.css
View File

@ -595,12 +595,15 @@ hr {
top: 48px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 16px;
padding-right: 16px;
}
.gh-article-meta .gh-author-image {
width: 72px;
height: 72px;
margin-bottom: 16px;
margin-bottom: 0;
}
.gh-article-meta .gh-author-name {
@ -620,10 +623,15 @@ hr {
color: var(--color-secondary-text);
}
.gh-article-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gh-article-tag {
width: fit-content;
padding: 2px 12px;
margin-top: 20px;
font-size: 1.5rem;
font-weight: 700;
color: var(--tag-color, var(--color-darker-gray)) !important;
@ -745,21 +753,21 @@ hr {
.gh-article-meta-inner {
flex-direction: row;
align-items: center;
gap: 12px;
padding-right: 0;
}
.gh-article-meta .gh-author-image {
width: 64px;
height: 64px;
margin-right: 12px;
margin-bottom: 0;
}
.gh-article-meta-wrapper {
flex-grow: 1;
}
.gh-article-tag {
margin-top: 0;
.gh-article-tags {
gap: 6px;
}
}

8
post.hbs
View File

@ -38,8 +38,12 @@
</h4>
{{/primary_author}}
<time class="gh-article-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time></div>
{{#if primary_tag}}
<a class="gh-article-tag" href="{{primary_tag.url}}" style="--tag-color: {{primary_tag.accent_color}}">{{primary_tag.name}}</a>
{{#if tags}}
<div class="gh-article-tags">
{{#foreach}}
<a class="gh-article-tag tag--{{slug}}" href="{{url}}" style="--tag-color: {{accent_color}}">{{name}}</a>
{{/foreach}}
</div>
{{/if}}
</div>
</aside>