Create content list template

src/_includes/main/content-list.njk

@@ -0,0 +1,22 @@
+---
+layout: main/base
+metadata:
+    type: article
+---
+
+<header class="main__header">
+    <h1>{{ title }}</h1>
+    {% if intro %}
+        <p>{{ intro }}</p>
+    {% endif %}
+</header>
+
+<div class="content__wrapper">
+    {% if toc %}
+        {% include "toc.njk" %}
+    {% endif %}
+
+    <div class="content-list">
+        {{ content | safe }}
+    </div>
+</div>

src/assets/css/main.css

@@ -261,6 +261,7 @@ main {
 
 .main__header,
 .article,
+.content-list,
 .left-sidebar,
 .right-sidebar {
     padding: 1.5rem clamp(1rem, 5%, 3rem);
@@ -271,6 +272,7 @@ main {
 }
 
 .article,
+.content-list,
 .left-sidebar,
 .right-sidebar {
     background-color: var(--clr-content-bg);
@@ -302,7 +304,8 @@ main {
         grid-template-columns: minmax(0,15rem) minmax(0,2.5fr) minmax(0,15rem);
     }
 
-    .article {
+    .article,
+    .content-list {
         grid-area: article;
     }
 

src/pages/articles.njk

@@ -1,5 +1,5 @@
 ---
-layout: main/base
+layout: main/content-list
 title: Articles
 metadata:
     desc: List of articles published on my website.
@@ -7,12 +7,7 @@ metadata:
 date: 2023-01-04
 ---
 
-<div class="content-container">
-    <section class="content-section">
-        <h1>Articles</h1>
-    </section>
-
-    <section class="content-section">
+<section class="content-section">
     <h2>My Articles</h2>
     <p>Articles I have written.</p>
     <ul class="article-list">
@@ -23,17 +18,17 @@ date: 2023-01-04
             </li>
         {% endfor %}
     </ul>
-    </section>
+</section>
 
-    <section class="content-section">
+<section class="content-section">
     <h2>My Articles for Video Games with Their Own Pages</h2>
     <ul class="article-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>
-    </section>
+</section>
 
-    <section class="content-section">
+<section class="content-section">
     <h2>Featured Articles</h2>
     <p>Articles featuring other people's interview with me.</p>
     <ul class="article-list">
@@ -44,5 +39,4 @@ date: 2023-01-04
             </li>
         {% endfor %}
     </ul>
-    </section>
-</div>
+</section>