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

Improve spacing

Browse source
This commit is contained in:
Neil Brommer 2023-07-10 16:31:04 -07:00
parent b1f5f39735
commit ba0c0081d5
4 changed files with 31 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -2,8 +2,8 @@
{% for post in postsList | filterDrafts | reverse %}
<section class="posts-list-post">
<h2><a href={{ post.url }}>{{ post.data.title }}</a></h2>
<div class="postMetadata">
<dl class="postDate">
<dl class="postMetadata">
<div>
<dt>
<svg class="icon">
<use href="/images/feather-sprite.svg#clock" />
@ -13,8 +13,9 @@
<dd>
{{ post.date.toLocaleDateString("en-US") }}
</dd>
</dl>
<dl class="tags">
</div>
<div>
<dt>
<svg class="icon">
<use href="/images/feather-sprite.svg#tag" />
@ -26,8 +27,8 @@
<dd><a href="{{ "/posts/tags/" + (tag | slugify) | url }}">{{ tag }}</a></dd>
{% endif %}
{% endfor %}
</dl>
</div>
</dl>
<p>{{ post.data.description }}</p>
</section>
{% endfor %}

2
src/css/Components/_base.scss
View file

@ -24,7 +24,7 @@ body {
@media (min-width: #{variables.$sidebar-breakpoint}) {
display: flex;
gap: 2rem;
gap: 1rem;
justify-content: center;
}
}

20
src/css/Components/_posts.scss
View file

@ -2,21 +2,25 @@
margin-bottom: 2rem;
}
h2 {
margin-bottom: 0.15em;
}
.postMetadata {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 2em;
align-items: center;
column-gap: 2rem;
font-size: 0.8rem;
}
dl.postDate, dl.tags {
div {
display: flex;
flex-direction: row;
align-items: center;
margin: 0;
flex-wrap: wrap;
column-gap: 1em;
}
dt {
display: inline-flex;
@ -33,4 +37,8 @@ dl.postDate, dl.tags {
content: ":";
}
}
dd {
margin: 0;
}
}