NeilBrommer/Personal-Site
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Improve post metadata styling

Browse source
This commit is contained in:
Neil Brommer 2023-07-10 15:01:56 -07:00
parent dea39db556
commit 9910d6dfb9
5 changed files with 76 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/_includes/layouts/post-layout.njk
View file

@ -2,7 +2,19 @@
layout: layouts/layout.njk layout: layouts/layout.njk
--- ---
<dl class="tags"> <div class="postMetadata">
<dl class="postDate">
<dt>
<svg class="icon">
<use href="/images/feather-sprite.svg#clock" />
</svg>
Posted
</dt>
<dd>
{{ page.date.toLocaleDateString("en-US") }}
</dd>
</dl>
<dl class="tags">
<dt> <dt>
<svg class="icon"> <svg class="icon">
<use href="/images/feather-sprite.svg#tag" /> <use href="/images/feather-sprite.svg#tag" />
@ -14,6 +26,7 @@ layout: layouts/layout.njk
<dd><a href="{{ "/posts/tags/" + (tag | slugify) | url }}">{{ tag }}</a></dd> <dd><a href="{{ "/posts/tags/" + (tag | slugify) | url }}">{{ tag }}</a></dd>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</dl> </dl>
</div>
{{ content | safe }} {{ content | safe }}

11
src/_includes/posts-list.njk
View file

@ -1,12 +1,19 @@
{% if postsList | filterDrafts | IsNotPage(page.url) | length %} {% if postsList | filterDrafts | IsNotPage(page.url) | length %}
{% for post in postsList | filterDrafts | reverse %} {% for post in postsList | filterDrafts | reverse %}
<section> <section class="posts-list-post">
<h2><a href={{ post.url }}>{{ post.data.title }}</a></h2> <h2><a href={{ post.url }}>{{ post.data.title }}</a></h2>
<div> <div class="postMetadata">
<dl class="postDate">
<dt>
<svg class="icon"> <svg class="icon">
<use href="/images/feather-sprite.svg#clock" /> <use href="/images/feather-sprite.svg#clock" />
</svg> </svg>
Posted
</dt>
<dd>
{{ post.date.toLocaleDateString("en-US") }} {{ post.date.toLocaleDateString("en-US") }}
</dd>
</dl>
</div> </div>
<p>{{ post.data.description }}</p> <p>{{ post.data.description }}</p>
</section> </section>

22
src/css/Components/_lists.scss
View file

@ -16,25 +16,3 @@ dl {
margin-inline-start: 1em; margin-inline-start: 1em;
} }
} }
dl.tags {
display: flex;
flex-direction: row;
align-items: center;
dt {
display: inline-flex;
flex-direction: row;
align-items: center;
padding: 0.25em 0;
.icon {
font-size: 1.5em;
padding-right: 0.3em;
}
&::after {
content: ":";
}
}
}

36
src/css/Components/_posts.scss Normal file
View file

@ -0,0 +1,36 @@
.posts-list-post {
margin-bottom: 2rem;
}
.postMetadata {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 2em;
font-size: 0.8rem;
}
dl.postDate, dl.tags {
display: flex;
flex-direction: row;
align-items: center;
margin: 0;
dt {
display: inline-flex;
flex-direction: row;
align-items: center;
padding: 0.25em 0;
.icon {
font-size: 1.5em;
padding-right: 0.3em;
}
&::after {
content: ":";
}
}
}

1
src/css/site.scss
View file

@ -11,3 +11,4 @@
@use 'Components/_mobile-header'; @use 'Components/_mobile-header';
@use 'Components/_lists'; @use 'Components/_lists';
@use 'Components/_code'; @use 'Components/_code';
@use 'Components/_posts';