Because I need this page to quality control my posts, I’ve done a version as a template.
You can see the result here
Here is the code (custom-postslist.hbr file):
{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}
<style>
.content-list{
position: relative;
}
.gh-list {
margin: 0;
padding: 0;
list-style: none;
display: table;
width: 100%;
}
.gh-title {
color: hsla(0,0%,100%,.85);
margin: 0 0 3px;
font-size: 1.5rem;
font-weight: 600;
}
.gh-list-row {
position: relative;
display: table-row;
}
.gh-date {
font-size: 1rem;
}
.gh-edit {
font-size: 1rem;
}
.gh-tags {
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
display: inline-block;
border-radius: 3px;
padding: 0 3px;
}
.gh-list-header {
border-top-left-radius: 5px;
padding-left: 16px;
padding: 0!important;
border-bottom: 1px solid #e5eff5;
font-size: 1.2rem;
font-weight: 500;
letter-spacing: .1px;
text-transform: uppercase;
padding: 10px 20px;
white-space: nowrap;
display: table-cell;
vertical-align: middle;
box-sizing: border-box;
}
.gh-posts-title-header {
padding-left: 10px;
}
.gh-posts-tags {
display: table-cell;
vertical-align: middle;
border-top: 1px ;
transition: none!important;
box-sizing: border-box;
}
</style>
{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
<div class="inner posts">
<section class="content-list">
<ol class="gh-list">
<li class="gh-list-row header">
<div class="gh-list-header gh-posts-title-header">Title</div>
<div class="gh-list-header">Tags</div>
</li>
{{#get "posts" limit="all" include="tags"}}
{{#foreach posts visibility="all"}}
<li class='gh-list-row'>
<span class='gh-date'>{{date}}
{{#has visibility="members"}}
🔒
{{/has}}
</span>
<a href="{{url}}"><span class='gh-title'>{{title}}</span></a>
<a href="{{url}}/edit"><span class='gh-edit'>📄</span></a>
<span class='gh-tags gh-posts-tags'>{{tags separator=", "}}</span>
</li>
{{/foreach}}
{{/get}}
</ul>
</div>
</div>
</main>
{{> site-header}}
I’m not an expert in JS/CSS, so I’m sure that it could be improved a lot…