From 643fc1740c30d2ff189bc3832d400070db01b0b9 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 5 Dec 2024 22:24:31 +0800
Subject: [PATCH] Enlarge title of list items of my articles

---
 src/_includes/main/archive.njk         | 16 +---------------
 src/assets/css/utility.css             | 14 ++++++++++++++
 src/shrines/cassettebeasts/articles.md | 18 ++++++++++++++----
 src/shrines/starwarskotor/articles.md  | 22 +++++++++++++++++-----
 src/shrines/starwarskotor/guides.md    |  9 +++++++--
 src/slashes/navbarlinks/articles.md    | 10 +++++++---
 6 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/src/_includes/main/archive.njk b/src/_includes/main/archive.njk
index 8ec5102c..7f03b979 100644
--- a/src/_includes/main/archive.njk
+++ b/src/_includes/main/archive.njk
@@ -13,18 +13,4 @@
             <time datetime="{{ content.date }}">{{ content.date | formatDate }}</time>
         </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 %}
\ No newline at end of file
+</ul>
\ No newline at end of file
diff --git a/src/assets/css/utility.css b/src/assets/css/utility.css
index 87f5b7b5..08e405b3 100644
--- a/src/assets/css/utility.css
+++ b/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 {
diff --git a/src/shrines/cassettebeasts/articles.md b/src/shrines/cassettebeasts/articles.md
index d2ee717d..7fac5b20 100644
--- a/src/shrines/cassettebeasts/articles.md
+++ b/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.
\ No newline at end of file
+* [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}
\ No newline at end of file
diff --git a/src/shrines/starwarskotor/articles.md b/src/shrines/starwarskotor/articles.md
index 5df8a3b8..6e102aac 100644
--- a/src/shrines/starwarskotor/articles.md
+++ b/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" %}.
\ No newline at end of file
+
+* [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}
\ No newline at end of file
diff --git a/src/shrines/starwarskotor/guides.md b/src/shrines/starwarskotor/guides.md
index daacac44..36c9d247 100644
--- a/src/shrines/starwarskotor/guides.md
+++ b/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).
 
diff --git a/src/slashes/navbarlinks/articles.md b/src/slashes/navbarlinks/articles.md
index fb5b16fd..0973d6de 100644
--- a/src/slashes/navbarlinks/articles.md
+++ b/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>