Adjust content list

src/assets/css/main.css

@@ -137,6 +137,7 @@ h1 {
 
 h2, h3, h4, h5, h6 {
     color: var(--clr-sub-heading);
+    line-height: 1.5;
 }
 
 h2 {
@@ -211,34 +212,6 @@ dd {
     grid-column-start: 2;
 }
 
-/* UTILITY CLASSES */
-.bold-text {
-    font-weight: 700;
-}
-
-.center-el {
-    display: grid;
-    place-content: center;
-}
-
-.center-text {
-    text-align: center;
-}
-
-.date-style {
-    font-weight: 700;
-    color: var(--clr-dates);
-}
-
-.hidden {
-    display: none;
-}
-
-.article-list {
-    display: grid;
-    gap: 0.5em;
-}
-
 /* MAIN CONTENT */
 main,
 .content__wrapper,
@@ -537,6 +510,40 @@ main {
     font-size: 1rem;
 }
 
+/* UTILITY CLASSES */
+.bold-text {
+    font-weight: 700;
+}
+
+.center-el {
+    display: grid;
+    place-content: center;
+}
+
+.center-text {
+    text-align: center;
+}
+
+.date-style {
+    font-weight: 700;
+    color: var(--clr-dates);
+}
+
+.hidden {
+    display: none;
+}
+
+.content-list {
+    display: grid;
+    gap: 0.7em;
+}
+
+.content-list a {
+    display: block;
+    font-size: 1.3rem;
+    margin-bottom: 0.1em;
+}
+
 /* Pride flag backgrounds */
 .flag-ace {
 	background: repeating-linear-gradient(

src/pages/articles.njk

@@ -11,10 +11,10 @@ contentIsDivided: true
 <section class="content__section">
     <h2>My Articles</h2>
     <p>Articles I have written.</p>
-    <ul class="article-list">
+    <ul class="content-list">
         {% for article in collections["my articles"] %}
             <li>
-                <h3><a href="{{ article.url }}">{{ article.data.articleTitle }}</a></h3>
+                <a href="{{ article.url }}">{{ article.data.articleTitle }}</a>
                 <time>{{ article.date | niceDate }}</time>
             </li>
         {% endfor %}
@@ -23,7 +23,7 @@ contentIsDivided: true
 
 <section class="content__section">
     <h2>My Articles for Video Games with Their Own Pages</h2>
-    <ul class="article-list">
+    <ul class="content-list">
         <li>My <cite>Cassette Beasts</cite> shrine <a href="/shrines/cassettebeasts/articles/">Articles</a> page</li>
         <li>My <cite>Star Wars: Knights of the Old Republic</cite> shrine <a href="/shrines/starwarskotor/articles/">Articles</a> page</li>
     </ul>
@@ -32,10 +32,10 @@ contentIsDivided: true
 <section class="content__section">
     <h2>Featured Articles</h2>
     <p>Articles featuring other people's interview with me.</p>
-    <ul class="article-list">
+    <ul class="content-list">
         {% for article in collections["featured articles"] %}
             <li>
-                <h3><a href="{{ article.url }}">{{ article.data.articleTitle }}</a></h3>
+                <a href="{{ article.url }}">{{ article.data.articleTitle }}</a>
                 <time>{{ article.date | niceDate }}</time>
             </li>
         {% endfor %}