Improve responsive design sizing for website

website/static/js/text-justification.js

@@ -0,0 +1,28 @@
+window.addEventListener("DOMContentLoaded", () => {
+	document.querySelectorAll("section p").forEach((paragraph) => {
+		// Recursively traverse the DOM tree and modify the text nodes
+		const recursivelyAddWbr = (node) => {
+			if (node.nodeType === Node.TEXT_NODE) {
+				const newNodes = node.textContent.split("/");
+				for (let i = 0; i < newNodes.length - 1; i++) {
+					newNodes[i] += "/";
+				}
+
+				const tempSpan = document.createElement("span");
+				tempSpan.innerHTML = newNodes.join("<wbr>");
+				const replacementNodes = tempSpan.childNodes;
+
+				mutationQueue.push([node, replacementNodes]);
+			} else {
+				node.childNodes.forEach(recursivelyAddWbr);
+			}
+		};
+		
+		// Perform the recursive traversal and replace the text nodes
+		const mutationQueue = [];
+		recursivelyAddWbr(paragraph);
+		mutationQueue.forEach(([node, newNodes]) => {
+			node.replaceWith(...newNodes);
+		});
+	});
+});