diff --git a/src/_includes/layouts/post-layout.njk b/src/_includes/layouts/post-layout.njk index 3e382e1..f035e2d 100644 --- a/src/_includes/layouts/post-layout.njk +++ b/src/_includes/layouts/post-layout.njk @@ -2,18 +2,31 @@ layout: layouts/layout.njk --- -
-
- - - - Tags -
- {% for tag in tags %} - {% if tag != "posts" %} -
{{ tag }}
- {% endif %} - {% endfor %} -
+
+
+
+ + + + Posted +
+
+ {{ page.date.toLocaleDateString("en-US") }} +
+
+
+
+ + + + Tags +
+ {% for tag in tags %} + {% if tag != "posts" %} +
{{ tag }}
+ {% endif %} + {% endfor %} +
+
{{ content | safe }} diff --git a/src/_includes/posts-list.njk b/src/_includes/posts-list.njk index ad8d9ad..6af5f1c 100644 --- a/src/_includes/posts-list.njk +++ b/src/_includes/posts-list.njk @@ -1,12 +1,19 @@ {% if postsList | filterDrafts | IsNotPage(page.url) | length %} {% for post in postsList | filterDrafts | reverse %} -
+

{{ post.data.title }}

-
- - - - {{ post.date.toLocaleDateString("en-US") }} +
+
+
+ + + + Posted +
+
+ {{ post.date.toLocaleDateString("en-US") }} +
+

{{ post.data.description }}

diff --git a/src/css/Components/_lists.scss b/src/css/Components/_lists.scss index 53c798a..b68a0fb 100644 --- a/src/css/Components/_lists.scss +++ b/src/css/Components/_lists.scss @@ -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: ":"; - } - } -} diff --git a/src/css/Components/_posts.scss b/src/css/Components/_posts.scss new file mode 100644 index 0000000..7297936 --- /dev/null +++ b/src/css/Components/_posts.scss @@ -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: ":"; + } + } +} diff --git a/src/css/site.scss b/src/css/site.scss index f5cc95b..fdfd2bb 100644 --- a/src/css/site.scss +++ b/src/css/site.scss @@ -11,3 +11,4 @@ @use 'Components/_mobile-header'; @use 'Components/_lists'; @use 'Components/_code'; +@use 'Components/_posts';