Enlarge title of list items of my articles

src/_includes/main/archive.njk

@@ -14,17 +14,3 @@
         </li>
     {% endfor %}
 </ul>
-
-{%- css %}
-    .item-list {
-        display: grid;
-        gap: 1em;
-        padding-left: 1em;
-    }
-
-    .item-list__title {
-        font-size: clamp(1.55rem, 1rem + 3vw, 1.2rem);
-        line-height: 1.3;
-        margin-bottom: 0.2em;
-    }
-{% endcss %}

src/assets/css/utility.css

@@ -29,6 +29,20 @@ a > .inline-icon { padding-inline-end: .25em; }
     gap: 0.7em 1.5em;
 }
 
+.item-list {
+    display: grid;
+    gap: 1em;
+    padding-left: 1em;
+}
+
+.item-list__title {
+    font-size: var(--fs-h4);
+    line-height: 1.3;
+    margin-bottom: 0.2em;
+}
+
+.item-list__indent { margin: 0.3em 0 0 1.25em; }
+
 .hidden { display: none; }
 
 .visually-hidden {

src/shrines/cassettebeasts/articles.md

@@ -16,7 +16,9 @@ eleventyNavigation:
 <ul>
 {%- for article in collections["cassette beasts articles"] -%}
     <li>
-        <p><a href="{{ article.url }}">{{ article.data.articleTitle }}</a></p>
+        <p class="item-list__title">
+            <a href="{{ article.url }}">{{ article.data.articleTitle }}</a>
+        </p>
         <time datetime="{{ article.date }}">{{ article.date | formatDate }}</time>
     </li>
 {%- endfor -%}
@@ -24,6 +26,14 @@ eleventyNavigation:
 
 ## {% cite "Cassette Beasts" %} Articles I Recommend
 
-* [Cassette Beasts Level-Up Dialogue Summaries (Meredith)](https://www.pillowfort.social/posts/3642949) by ArgentDandelion on Pillowfort — An analysis of Meredith's character.
-* [Cassette Beasts Level-Up Dialogue Summaries (Viola)](https://www.pillowfort.social/posts/3792935) by ArgentDandelion on Pillowfort — An analysis of Viola's character.
-* [A Case Of Autism: Meredith (Cassette Beasts)](https://www.youtube.com/watch?v=jFJ6tMeGsLg) by Optical Drop — A video analysis of Meredith's autistic coding.
+* [Cassette Beasts Level-Up Dialogue Summaries (Meredith)](https://www.pillowfort.social/posts/3642949) by ArgentDandelion on Pillowfort
+
+    An analysis of Meredith's character.{.item-list__indent}
+
+* [Cassette Beasts Level-Up Dialogue Summaries (Viola)](https://www.pillowfort.social/posts/3792935) by ArgentDandelion on Pillowfort
+
+    An analysis of Viola's character.{.item-list__indent}
+
+* [A Case Of Autism: Meredith (Cassette Beasts)](https://www.youtube.com/watch?v=jFJ6tMeGsLg) by Optical Drop
+
+    A video analysis of Meredith's autistic coding.{.item-list__indent}

src/shrines/starwarskotor/articles.md

@@ -16,7 +16,9 @@ eleventyNavigation:
 <ul>
 {%- for article in collections["kotor both articles"] -%}
     <li>
-        <p><a href="{{ article.url }}">{{ article.data.articleTitle }}</a></p>
+        <p class="item-list__title">
+            <a href="{{ article.url }}">{{ article.data.articleTitle }}</a>
+        </p>
         <time datetime="{{ article.date }}">{{ article.date | formatDate }}</time>
     </li>
 {%- endfor -%}
@@ -26,7 +28,9 @@ eleventyNavigation:
 <ul>
 {%- for article in collections["kotor 1 articles"] -%}
     <li>
-        <p><a href="{{ article.url }}">{{ article.data.articleTitle }}</a></p>
+        <p class="item-list__title">
+            <a href="{{ article.url }}">{{ article.data.articleTitle }}</a>
+        </p>
         <time datetime="{{ article.date }}">{{ article.date | formatDate }}</time>
     </li>
 {%- endfor -%}
@@ -36,12 +40,20 @@ eleventyNavigation:
 <ul>
 {%- for article in collections["kotor 2 articles"] -%}
     <li>
-        <p><a href="{{ article.url }}">{{ article.data.articleTitle }}</a></p>
+        <p class="item-list__title">
+            <a href="{{ article.url }}">{{ article.data.articleTitle }}</a>
+        </p>
         <time datetime="{{ article.date }}">{{ article.date | formatDate }}</time>
     </li>
 {%- endfor -%}
 </ul>
 
 ## KotOR Articles I Recommend
-* [This essay about Juhani](https://somblog.tumblr.com/post/175466502069/this-isnt-a-star-wars-fandom-blog-but-ive-been) by Tumblr user somblog is an excellent analysis of Juhani's character.
-* [In Defense of Peragus: it’s not just well-designed, it’s a uniquely good level too](https://www.reddit.com/r/kotor/comments/129co74/in_defense_of_peragus_its_not_just_welldesigned/) by Snigaroo on the KotOR Subreddit — An excellent essay that goes into detail in explaining why some of us actually find Peragus a good level. I am among the minority that genuinely enjoy Peragus, to the extent that I never even considered using any mod to skip the level, and I replay all the hologram recordings throughout Peragus and the Harbinger every time I replay {% cite "KotOR 2" %}.
+
+* [This essay about Juhani](https://somblog.tumblr.com/post/175466502069/this-isnt-a-star-wars-fandom-blog-but-ive-been) by Tumblr user somblog
+
+    An excellent analysis of Juhani's character.{.item-list__indent}
+
+* [In Defense of Peragus: it’s not just well-designed, it’s a uniquely good level too](https://www.reddit.com/r/kotor/comments/129co74/in_defense_of_peragus_its_not_just_welldesigned/) by Snigaroo on the KotOR Subreddit
+
+    An excellent essay that goes into detail in explaining why some of us actually find Peragus a good level. I am among the minority that genuinely enjoy Peragus, to the extent that I never even considered using any mod to skip the level, and I replay all the hologram recordings throughout Peragus and the Harbinger every time I replay {% cite "KotOR 2" %}.{.item-list__indent}

src/shrines/starwarskotor/guides.md

@@ -16,7 +16,9 @@ eleventyNavigation:
 <ul>
 {%- for article in collections["kotor guides"] -%}
     <li>
-        <p><a href="{{ article.url }}">{{ article.data.articleTitle }}</a></p>
+        <p class="item-list__title">
+            <a href="{{ article.url }}">{{ article.data.articleTitle }}</a>
+        </p>
         <time datetime="{{ article.date }}">{{ article.date | formatDate }}</time>
     </li>
 {%- endfor -%}
@@ -26,7 +28,10 @@ eleventyNavigation:
 * [{% cite "Star Wars: Knights of the Old Republic" %} section](https://strategywiki.org/wiki/Star_Wars:_Knights_of_the_Old_Republic) on StrategyWiki
 
 ## KotOR 2: TSL Guides by Others
-* [Influence Walkthrough](https://web.archive.org/web/20190104130924/www.starwarsknights.com/influence.php) by by Achilles — This guide was written for the vanilla game. The Unofficial Dialog Patch on the page is not compatible with The Sith Lords Restored Content Mod (TSLRCM).
+* [Influence Walkthrough](https://web.archive.org/web/20190104130924/www.starwarsknights.com/influence.php) by by Achilles
+
+    This guide was written for the vanilla game. The Unofficial Dialog Patch on the page is not compatible with The Sith Lords Restored Content Mod (TSLRCM).{.item-list__indent}
+
 * [TSLRCM Influence Guide](https://www.reddit.com/r/kotor/comments/ruofg1/kotor_2_tslrcm_influence_guide/) by u/XDarkStrikerX
 * [TSLRCM Influence Guide Collaboration](https://www.reddit.com/r/kotor/comments/vmhn73/kotor_2_tslrcm_influence_guide_collaboration/), organised by u/Egg-MacGuffin. [Here is the direct link to the spreadsheet](https://docs.google.com/spreadsheets/d/1SppuhOhl3AU-EAKjSji1EIJm41OTjeRGfVHbnmRwqio/edit?usp=sharing).
 

src/slashes/navbarlinks/articles.md

@@ -11,7 +11,9 @@ Articles I have written.
 <ul>
 {%- for article in collections["my articles"] -%}
     <li>
-        <p><a href="{{ article.url }}">{{ article.data.articleTitle }}</a></p>
+        <p class="item-list__title">
+            <a href="{{ article.url }}">{{ article.data.articleTitle }}</a>
+        </p>
         <time datetime="{{ article.date }}">{{ article.date | formatDate }}</time>
     </li>
 {%- endfor -%}
@@ -26,8 +28,10 @@ Articles featuring other people's interview with me.
 <ul>
 {%- for article in collections["featured articles"] -%}
     <li>
-        <p><a href="{{ article.url }}">{{ article.data.articleTitle }}</a></p>
-        <p>{{ article.date | formatDate }}</p>
+        <p class="item-list__title">
+            <a href="{{ article.url }}">{{ article.data.articleTitle }}</a>
+        </p>
+        <time datetime="{{ article.date }}">{{ article.date | formatDate }}</time>
     </li>
 {%- endfor -%}
 </ul>