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

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

@ -2,18 +2,31 @@
layout: layouts/layout.njk
---
<dl class="tags">
<dt>
<svg class="icon">
<use href="/images/feather-sprite.svg#tag" />
</svg>
Tags
</dt>
{% for tag in tags %}
{% if tag != "posts" %}
<dd><a href="{{ "/posts/tags/" + (tag | slugify) | url }}">{{ tag }}</a></dd>
{% endif %}
{% endfor %}
</dl>
<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>
<svg class="icon">
<use href="/images/feather-sprite.svg#tag" />
</svg>
Tags
</dt>
{% for tag in tags %}
{% if tag != "posts" %}
<dd><a href="{{ "/posts/tags/" + (tag | slugify) | url }}">{{ tag }}</a></dd>
{% endif %}
{% endfor %}
</dl>
</div>
{{ content | safe }}

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

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

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

@ -16,25 +16,3 @@ dl {
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/_lists';
@use 'Components/_code';
@use 'Components/_posts';