From f0971e2971a2d0a893431112fb59db84d42ebbd4 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Mon, 15 Apr 2024 00:13:57 +0800
Subject: [PATCH] Adjust main container and article grid layout

---
 src/_includes/main/article.njk | 19 ++++-----
 src/assets/css/main.css        | 72 +++++++++++++++-------------------
 2 files changed, 39 insertions(+), 52 deletions(-)

diff --git a/src/_includes/main/article.njk b/src/_includes/main/article.njk
index ebe5ce5d..1340b91e 100644
--- a/src/_includes/main/article.njk
+++ b/src/_includes/main/article.njk
@@ -17,15 +17,12 @@ eleventyComputed:
     </div>
 </header>
 
-{% if toc %}
-    {% include "toc.njk" %}
-{% endif %}
+<div class="article__wrapper">
+    {% if toc %}
+        {% include "toc.njk" %}
+    {% endif %}
 
-<article>
-    {{ content | safe }}
-</article>
-
-<aside class="right-sidebar">
-<h3>Title</h3>
-<p>Right sidebar content</p>
-</aside>
\ No newline at end of file
+    <article>
+        {{ content | safe }}
+    </article>
+</div>
\ No newline at end of file
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index cd4b23af..435995f8 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -247,11 +247,8 @@ dd {
 }
 
 /* MAIN CONTENT */
-main {
-    width: 100%;
-}
-
-main {
+main,
+.article__wrapper {
     font-size: 1.2rem;
     display: grid;
     gap: 0.8rem;
@@ -282,39 +279,44 @@ article,
 .left-sidebar,
 .right-sidebar {
     font-size: 0.9rem;
-    background-color: var(--clr-content-bg);
-}
-
-.left-sidebar:empty,
-.right-sidebar:empty {
-    display: none;
-}
-
-/* Tablet main content layout */
-@media only screen and (min-width: 43.75rem) {
-    /* main {
-        width: 43.75rem;
-    } */
 }
 
 /* Desktop main content layout */
 @media only screen and (min-width: 60rem) {
-    /* main {
-        width: 60rem;
-        grid-template-areas:
-            'mheadr mheadr mheadr mheadr'
-            'leftsb articl articl rightb';
-    } */
+    .article__wrapper {
+        grid-template-areas: 'a b c';
+        grid-template-columns: minmax(0,15rem) minmax(0,2.5fr) minmax(0,15rem);
+    }
+
+    article {
+        grid-area: b;
+    }
+
+    .left-sidebar {
+        grid-area: a;
+    }
+
+    .right-sidebar {
+        grid-area: c;
+    }
 }
 
 @media only screen and (min-width: 80rem) {
-    /* main {
-        width: 75rem;
+    main {
+        max-width: 80rem;
     }
+}
 
-    aside {
-        width: 15rem;
-    } */
+/* FOOTER COMPONENT */
+.main-footer {
+    background: var(--clr-main-footer-bg);
+    width: 100%;
+    padding: 0.8rem;
+    text-align: center;
+}
+
+.main-footer p {
+    padding: 0;
 }
 
 /* HEADING WRAPPER AND ANCHOR */
@@ -668,15 +670,3 @@ article,
 		#5bcefa 0 100%
 	);
 }
-
-/* FOOTER COMPONENT */
-.main-footer {
-    background: var(--clr-main-footer-bg);
-    width: 100%;
-    padding: 0.5rem;
-    text-align: center;
-}
-
-.main-footer p {
-    padding: 0;
-}