feat(header): Make wide/narrow setting modify the header when folded up

2 files changed, 8 insertions, 3 deletions

diff --git a/src/scripts/page-width.js b/src/scripts/page-width.js
index 353dc4d..4969c45 100644
--- a/src/scripts/page-width.js
+++ b/src/scripts/page-width.js
@@ -1,14 +1,17 @@
 const widthBtn = document.getElementById('changeWidthBtn');
 const widthLabel = widthBtn.childNodes[0];
 const articleElem = document.getElementsByTagName('article')[0];
+const sidebarHeaderElem = document.getElementById('header');
 
 if (localStorage.getItem('width') === 'wide') {
 	widthLabel.innerText = 'Narrow';
-	articleElem.classList.add('article-wide');
+	articleElem.classList.add('wide');
+	sidebarHeaderElem.classList.toggle('wide');
 }
 
 widthBtn.onclick = function() {
-	articleElem.classList.toggle('article-wide');
+	articleElem.classList.toggle('wide');
+	sidebarHeaderElem.classList.toggle('wide');
 
 	if (localStorage.getItem('width') !== 'norm') {
 		widthLabel.innerText = 'Wide';
diff --git a/src/styles.css b/src/styles.css
index 7ae8d01..29a878c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -130,6 +130,8 @@ li > div:only-child > img {
   border: 3px solid var(--accent-line-color);
   box-sizing: border-box;
   padding: 1rem 1rem;
+  max-width: 63rem;
+  margin: 0 auto;
 }
 .sidebar-section ~ .sidebar-section { margin-top: 8px; }
 
@@ -192,7 +194,7 @@ article > #article-container {
 article > #article-container > h1:first-child {
   margin-top: 0;
 }
-.article-wide {
+.wide {
   max-width: initial;
   margin-left: initial;
   margin-right: initial;