Added changing page width setting

6 files changed, 152 insertions, 2 deletions

diff --git a/src/_header.html b/src/_header.html
index 4b45a0c..4579e4b 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -37,9 +37,11 @@
 			<a href="/tutorials" class="link-tab">Tutorials</a>
 		</span>
 		<span id="settingsWrapper">
-			|| <img id="changeThemeBtn" class="link-tab unzoomable btn" src="/img/sun-tabler.svg" alt="Light">
+			|| <img id="changeThemeBtn" class="link-tab unzoomable btn setting-btn" src="/img/sun-tabler.svg" alt="Light">
+			<img id="changeWidthBtn" class="link-tab unzoomable btn setting-btn" src="/img/viewport-wide-tabler.svg">
 			<script type="text/javascript" src="/scripts/theme-changer.js" integrity="sha512-ZmN9dZP4m7fv3W3DHbA9pnK3Y44LnD4Be1Pn8Wdu4wFutZZSfZ1vNoIKNZ2J7QK9NHImYPjyNPxN2/l6y9P7pA==" crossorigin="anonymous"></script>
 		</span>
 	</nav>
 
 	<article>
+		<script type="text/javascript" src="/scripts/page-width.js" integrity="sha512-Ng+lgnAzbsDRvTXb7Hl7Mr71+XW4NEQVGDHZ5Qd+GIlUXdb5ils589aOxQ/rm6pTQsk7ZzEX8emNA50IfMFI1g==" crossorigin="anonymous"></script>
diff --git a/src/img/viewport-narrow-tabler.svg b/src/img/viewport-narrow-tabler.svg
new file mode 100644
index 0000000..1511836
--- /dev/null
+++ b/src/img/viewport-narrow-tabler.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="icon icon-tabler icon-tabler-viewport-narrow"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg12"
+   sodipodi:docname="viewport-narrow-tabler.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     id="namedview14"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="37.125"
+     inkscape:cx="12"
+     inkscape:cy="12.013468"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg12" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="m 3,12 h 7 L 7,9 m 0,6 3,-3"
+     id="path4"
+     style="stroke:#ffeede" />
+  <path
+     d="m 21,12 h -7 l 3,-3 m 0,6 -3,-3"
+     id="path6"
+     style="stroke:#ffeede" />
+  <path
+     d="M 9,6 V 3 h 6 v 3"
+     id="path8"
+     style="stroke:#ffeede" />
+  <path
+     d="m 9,18 v 3 h 6 v -3"
+     id="path10"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/img/viewport-wide-tabler.svg b/src/img/viewport-wide-tabler.svg
new file mode 100644
index 0000000..93694ea
--- /dev/null
+++ b/src/img/viewport-wide-tabler.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="icon icon-tabler icon-tabler-viewport-wide"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg12"
+   sodipodi:docname="viewport-wide-tabler.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     id="namedview14"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="37.125"
+     inkscape:cx="12"
+     inkscape:cy="12.013468"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg12" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M 10,12 H 3 L 6,9 m 0,6 -3,-3"
+     id="path4"
+     style="stroke:#ffeede" />
+  <path
+     d="m 14,12 h 7 L 18,9 m 0,6 3,-3"
+     id="path6"
+     style="stroke:#ffeede" />
+  <path
+     d="M 3,6 V 3 h 18 v 3"
+     id="path8"
+     style="stroke:#ffeede" />
+  <path
+     d="m 3,18 v 3 h 18 v -3"
+     id="path10"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/regarding-js.md b/src/regarding-js.md
index 13dee23..702038f 100644
--- a/src/regarding-js.md
+++ b/src/regarding-js.md
@@ -16,6 +16,7 @@ Any user data that might be saved isn't, and never will be, used for purposes no
 |[back-to-top.js](/scripts/back-to-top.js)|Automatically appearing button to scroll to top|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/back-to-top.js)|
 |[theme-changer-preload.js](/scripts/theme-changer-preload.js) &nbsp; [theme-changer.js](/scripts/theme-changer.js)|Change theme between light and dark (split in two files)|[Link 1](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/theme-changer-preload.js) &nbsp; [Link 2](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/theme-changer.js)|
 |[js-styling-preload.js](/scripts/js-styling-preload.js)|Un-disables hiding of elements, used by the scripts listed here|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/js-styling-preload.js)|
+|[page-width.js](/scripts/page-width.js)|Change whether text covers the whole width of the page or only the middle (applicable to wide screens)|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/page-width.js)|
 
 ## Data in browser storage
 [![🔗](/img/link-tabler.svg)](#data-in-browser-storage)
@@ -28,5 +29,6 @@ Any user data that might be saved isn't, and never will be, used for purposes no
 |Key|Values|Description|
 |---|---|---|
 |`theme`|`dark`\|`light`|Saves which theme should be loaded|
+|`width`|`norm`\|`wide`|Saves in which width pages should be shown|
 
 <p></p>
diff --git a/src/scripts/page-width.js b/src/scripts/page-width.js
new file mode 100644
index 0000000..577c590
--- /dev/null
+++ b/src/scripts/page-width.js
@@ -0,0 +1,20 @@
+const widthBtn = document.getElementById('changeWidthBtn');
+const articleElem = document.getElementsByTagName('article')[0];
+
+if (localStorage.getItem('width') === 'wide') {
+	widthBtn.src = '/img/viewport-narrow-tabler.svg';
+	articleElem.classList.add('noMaxWidth');
+}
+
+widthBtn.onclick = function() {
+	articleElem.classList.toggle('noMaxWidth');
+
+	if (localStorage.getItem('width') !== 'norm') {
+		widthBtn.src = '/img/viewport-wide-tabler.svg';
+		localStorage.setItem('width', 'norm');
+	}
+	else {
+		widthBtn.src = '/img/viewport-narrow-tabler.svg';
+		localStorage.setItem('width', 'wide');
+	}
+}
diff --git a/src/styles.css b/src/styles.css
index c3048da..1559964 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -148,6 +148,10 @@ article {
   overflow: auto;
 }
 
+.noMaxWidth {
+  max-width: initial;
+}
+
 ul, ol {
   padding-inline-start: 30px;
 }
@@ -488,7 +492,7 @@ blockquote > :last-child {
   padding: 0.3em;
 }
 
-#changeThemeBtn {
+.setting-btn {
   vertical-align: middle;
   margin-top: -0.2em;
   border: none !important;