Set stlyes of content page with divided sections

src/_includes/main/content.njk

@@ -14,7 +14,7 @@ layout: main/base
         {% include "toc.njk" %}
     {% endif %}
 
-    <div class="content">
+    <div class="content{% if contentIsDivided %} content--divided{% endif %}">
         {{ content | safe }}
     </div>
 </div>

src/assets/css/main.css

@@ -244,24 +244,34 @@ dd {
 }
 
 /* MAIN CONTENT */
+main,
+.content__wrapper,
+.content--divided {
+    display: grid;
+}
+
 main,
 .content__wrapper {
     font-size: 1.2rem;
-    display: grid;
 }
 
 main {
     width: 100%;
 }
 
+.content__wrapper,
+.content--divided {
+    gap: 0.8rem;
+}
+
 .content__wrapper {
     justify-self: center;
-    gap: 0.8rem;
 }
 
 .main__header,
 .article,
-.content,
+.content:not(.content--divided),
+.content__section,
 .left-sidebar,
 .right-sidebar {
     padding: 1.5rem clamp(1rem, 5%, 3rem);
@@ -273,7 +283,8 @@ main {
 }
 
 .article,
-.content,
+.content:not(.content--divided),
+.content__section,
 .left-sidebar,
 .right-sidebar {
     background-color: var(--clr-content-bg);

src/pages/about.njk

@@ -1,18 +1,15 @@
 ---
-layout: main/base
+layout: main/content
 title: About
 metadata:
     desc: About this website and its owner.
+    type: article
 date: 2023-01-02
+intro: Learn more about this website and its owner.
+contentIsDivided: true
 ---
 
-<article class="divided-article">
+<section class="content__section">
-    <section class="content-section">
-        <h1>About</h1>
-        <p>Learn more about this website and its owner.</p>
-    </section>
-
-    <section class="content-section">
     <h2>The Site</h2>
 
     <p>This website serves as a personal hub for my interests and self-expression, as well as my own corner on the internet outside social media platforms.</p>
@@ -29,9 +26,9 @@ date: 2023-01-02
 
     <p>If you also have a Neocities account, you can follow this site through its <a href="https://neocities.org/site/leilukin" target="_blank">Neocities profile</a>.</p>
     <a href="https://neocities.org/site/leilukin" target="_blank"><img src="/assets/banners/hosted-by-neocities.png" alt="a website button with Penelope the cat, the mascot of Neocities, and the text 'hosted by neocities'" title="Hosted by Neocities"></a>
-    </section>
+</section>
 
-    <sectioin class="content-section">
+<sectioin class="content__section">
     <h2>The Site Owner</h2>
 
     <img src="/assets/leilukin/leilukin-bee.png" style="border-radius: 50%; width: 15rem; display: flex; margin: 0.5em auto;">
@@ -62,5 +59,4 @@ date: 2023-01-02
     <p>You can contact me via email: <a href="mailto:leilukin@outlook.com">leilukin@outlook.com</a>.</p>
 
     {% include "main/support-me.njk" %}
-    </sectioin>
+</sectioin>
-</article>

src/pages/home.njk

@@ -1,30 +1,31 @@
 ---
-layout: main/base
+layout: main/content
 title: Home
+pageTitle: Welcome!
+intro: Home page of Leilukin's Hub.
 metadata:
     desc: Home page of Leilukin's Hub.
 date: 2023-01-01
+contentIsDivided: true
 ---
 
-<div class="content-container">
+<section class="content__section">
-    <section class="content-section">
-        <h1>Welcome!</h1>
     <p>Hello! You can call me Leilukin. Welcome to my website! This site is my own personal hub and corner on the internet.</p>
     <p>Feel free to drop a message and say hi on <a href="https://leilukin.123guestbook.com/" target="_blank">my guestbook</a>!</p>
     <p>You may use the <a href="/sitemap">site map</a> to quickly navigate this website.</p>
     <p>Enjoy your stay!</p>
-    </section>
+</section>
 
-    <section class="content-section">
+<section class="content__section">
     <h2>Link to My Website</h2>
 
     <p>You can link to my website with this button:</p>
     {% include "main/site-btn.njk" %}
 
     <p>Credit to <a href="https://github.com/hekate2" target="_blank">hekate2</a> for their <a href="https://hekate2.github.io/buttonmaker/" target="_blank">88x31 Web Button Maker</a>!</p>
-    </section>
+</section>
 
-    <section class="content-section">
+<section class="content__section">
     <h2>Updates</h2>
     <div class="text-box">
         <p class="date-style">5 April 2024:</p>
@@ -39,9 +40,9 @@ date: 2023-01-01
             <img src="/assets/buttons/rss-button.gif" alt="RSS feed button">
         </a>
     </div>
-    </section>
+</section>
 
-    <section class="content-section">
+<section class="content__section">
     <h2>Always Proud</h2>
     <div class="web-btn-wrapper">
         <img src="/assets/buttons/progress.png" alt="A website button of the 2018 Progress Flag" loading="lazy" title="2018 Progress Flag by Daniel Quasar (2018)">
@@ -53,15 +54,14 @@ date: 2023-01-01
         <img src="/assets/buttons/bigender.png" alt="A website button of the bigender pride flag" loading="lazy" title="I am bigender">
     </div>
     <p>Credit to <a href="https://rainy.gay/pride/pridebuttons" target="_blank">Dime</a> for these pride buttons!</p>
-    </section>
+</section>
 
-    <section class="content-section">
+<section class="content__section">
     <h2>Webrings</h2>
     <div style="border: none; padding: 5px; display: inline-flex"><a href="https://isaacfish.neocities.org/webring/25.html" target="_blank"><img src="/assets/webrings/queercoded-left.png" alt="left arrow"></a>&nbsp;<a href="https://isaacfish.neocities.org/webring/" target="_blank"><img src="/assets/webrings/queercoded.png" alt="queer coded webring" title="The Queer Coded Webring"></a>&nbsp;<a href="https://isaacfish.neocities.org/webring/27.html" target="_blank"><img src="/assets/webrings/queercoded-right.png" alt="right arrow"></a></div>
-    </section>
+</section>
 
-    <section class="content-section">
+<section class="content__section">
     <h2>Support Me</h2>
     {% include "main/support-me.njk" %}
-    </section>
+</section>
-</div>