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

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

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

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

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

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

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