From 5c03a5be368434252fc9a8e2b8fdfec0960526df Mon Sep 17 00:00:00 2001 From: Devin Haska Date: Sun, 14 Sep 2025 13:49:09 -0700 Subject: [PATCH] feat(posts): Update various post related layouts --- src/includes/css/blocks/posts.css | 19 +++++++++++++++++-- src/includes/css/global/variables.css | 3 +++ src/includes/css/utilities/fonts.css | 4 ++++ src/includes/layouts/post.html | 4 +++- src/includes/macros/date.njk | 2 +- src/includes/macros/posts.njk | 20 +++++++++++++------- src/includes/macros/utils.njk | 2 +- src/index.html | 4 ++-- src/pages/posts.html | 9 ++------- src/pages/tag.html | 9 ++------- 10 files changed, 48 insertions(+), 28 deletions(-) diff --git a/src/includes/css/blocks/posts.css b/src/includes/css/blocks/posts.css index cb91bc4..c19c1e2 100644 --- a/src/includes/css/blocks/posts.css +++ b/src/includes/css/blocks/posts.css @@ -1,4 +1,19 @@ -.posts-list-item { +.posts-grid { display: grid; - grid-template-columns: auto auto; + gap: var(--spacing-4); +} + +.post { + &:not(:last-of-type) { + border-bottom: 1px solid var(--color-border); + padding-block-end: var(--spacing-4); + } + + time { + font-size: var(--font-size-sm); + } + + .post--title { + display: inline-block; + } } diff --git a/src/includes/css/global/variables.css b/src/includes/css/global/variables.css index 15cbe02..d46064b 100644 --- a/src/includes/css/global/variables.css +++ b/src/includes/css/global/variables.css @@ -10,5 +10,8 @@ --font-weight-bold: 700; --font-weight-black: 900; + --font-size-xs: 0.8rem; + --font-size-sm: 1rem; + --triangles: url('data:image/svg+xml;utf8,'); } diff --git a/src/includes/css/utilities/fonts.css b/src/includes/css/utilities/fonts.css index c5c5d4f..87c0415 100644 --- a/src/includes/css/utilities/fonts.css +++ b/src/includes/css/utilities/fonts.css @@ -13,3 +13,7 @@ .line-height-l { line-height: 1.5rem; } + +.font-semibold { + font-weight: 500; +} diff --git a/src/includes/layouts/post.html b/src/includes/layouts/post.html index 25c2483..922469a 100644 --- a/src/includes/layouts/post.html +++ b/src/includes/layouts/post.html @@ -7,8 +7,10 @@ layout: "layouts/base" {% from "macros/utils.njk" import pageHeader %}
{{ pageHeader(title, excerpt, page.date) }} +
+ {{ tagList(tags | filter("post") , "/posts") }} +
{{ content | safe }}
- {{ tagList(tags | filter("post") , "/posts") }}
diff --git a/src/includes/macros/date.njk b/src/includes/macros/date.njk index c2ea240..7dccbb6 100644 --- a/src/includes/macros/date.njk +++ b/src/includes/macros/date.njk @@ -1,6 +1,6 @@ {% macro format(dateString) %} {% endmacro %} diff --git a/src/includes/macros/posts.njk b/src/includes/macros/posts.njk index 2d37b7b..352b186 100644 --- a/src/includes/macros/posts.njk +++ b/src/includes/macros/posts.njk @@ -1,15 +1,21 @@ +{% from "macros/tags.njk" import tagList %} +{% from "macros/date.njk" import format %} + {% macro one(post, fmt = "MM/DD") %} -
- {{ post.data.title }} - -

{{ post.data.excerpt }}

+ {% set tags = post.data.tags | filter("post") %} + {% endmacro %} + {% macro list(posts, format = "MM/DD") %} -
    - {% for post in posts %}
  1. {{ one(post, format) }}
    2. {% endfor %} -
+
+ {% for post in posts %}{{ one(post, format) }}{% endfor %} +
{% endmacro %} + {% macro yearList(posts, year, format = "MM/DD") %}
diff --git a/src/includes/macros/utils.njk b/src/includes/macros/utils.njk index f3a535c..7421f27 100644 --- a/src/includes/macros/utils.njk +++ b/src/includes/macros/utils.njk @@ -25,9 +25,9 @@ {% macro pageHeader(title, subtitle, date) %}
+ {% if date %}{{ format(date) }}{% endif %}

{{ title }}

{% if subtitle %}

{{ subtitle }}

{% endif %}
- {% if date %}{{ format(date) }}{% endif %}
{% endmacro %} diff --git a/src/index.html b/src/index.html index 4b29ea1..11998d2 100644 --- a/src/index.html +++ b/src/index.html @@ -12,7 +12,7 @@ permalink: /

I like to write about games, books, and movies to name a few things. There's a lot to explore, and I hope you have fun!

-
+

Favourite posts

Hand-picked, curated selection of my favourite posts!

@@ -20,7 +20,7 @@ permalink: / {% set favouritePosts = collections.post | filterFavourites | reverse %} {{ list(favouritePosts, "MM/DD/YYYY") }}
-
+

Recent posts

diff --git a/src/pages/posts.html b/src/pages/posts.html index 02d0ab0..632b531 100644 --- a/src/pages/posts.html +++ b/src/pages/posts.html @@ -3,15 +3,10 @@ title: All posts description: Read all of my posts. --- -{% from "macros/posts.njk" import yearList %} +{% from "macros/posts.njk" import list %}

Browse all of my posts, or narrow things down via tags.

-{% set itemsByYear = collections.post | reverse | organizeByYear %} -{% set years = itemsByYear | keys | sort("desc") %}
- {% for year in years %} - {% set itemsInYear = itemsByYear[year] %} - {{ yearList(itemsInYear, year) }} - {% endfor %} + {{ list(collections.post | reverse) }}
diff --git a/src/pages/tag.html b/src/pages/tag.html index 693f93c..53cab4c 100644 --- a/src/pages/tag.html +++ b/src/pages/tag.html @@ -11,15 +11,10 @@ eleventyComputed: description: Browse all posts tagged with "{{ tag }}". --- -{% from "macros/posts.njk" import yearList %} +{% from "macros/posts.njk" import list %}

All posts tagged with "{{ tag }}", or go back to all tags.

-{% set itemsByYear = collections.postsByTag[tag] | reverse | organizeByYear %} -{% set years = itemsByYear | keys | sort("desc") %}
- {% for year in years %} - {% set itemsInYear = itemsByYear[year] %} - {{ yearList(itemsInYear, year) }} - {% endfor %} + {{ list(collections.postsByTag[tag] | reverse) }}