fixed some issues with the new book styling

node/blog.js

@@ -59,7 +59,7 @@ fs.readFile(`${folder}index.html`, function (_, html) {
                     <div class="list-display rounded">
                         <div class="blog-isolated">
                             <h1>${post.name}</h1>
-                            ${post.archived ? /*html*/ `<p class="meta-info"><i>This post has been archived.</i></p>` : ""}
+                            ${post.archived ? /*html*/ `<p><i>This post has been archived.</i></p>` : ""}
                             ${content}
                             <span class="text-muted project-status blog-isolated-status">${post.date}</span>
                             ${post.discuss ? /*html*/ `<a href="${post.discuss}" class="blog-discuss" id="blog-discuss-${post.id}">Discuss this post</a>` : ""}

node/util.js

@@ -5,27 +5,43 @@ const showdown = require("showdown");
 require("./lib/showdown-prettify");
 require("./lib/showdown-footnotes");
 
-module.exports = {
-    extractBookData: function (file, post) {
-        let html = new JSDOM(file);
-        let page = html.window.document.getElementById("page");
-        let header = page.getElementsByTagName("header");
-        while (header.length > 0)
-            header[0].parentNode.removeChild(header[0]);
-        return /*html*/ `
-            ${post.prompt ? /*html*/ `<p class="meta-info"><i>This story was inspired by a Reedsy Prompt and submitted to their competition. As such, it has also been published on <a href="${post.prompt}">their website</a>.</i></p>` : ""}
-            ${page.outerHTML}
-        `;
-    },
-    replaceRelativeLinks: function (element, tag) {
-        if (element[tag] && element[tag].startsWith("./"))
-            element[tag] = `../${element[tag].substring(2)}`;
-    },
-    showdown: function (headerLevel) {
-        return new showdown.Converter({
-            parseImgDimensions: true,
-            headerLevelStart: headerLevel,
-            extensions: ["prettify", "footnotes"]
-        });
+exports.showdown = function (headerLevel) {
+    return new showdown.Converter({
+        parseImgDimensions: true,
+        headerLevelStart: headerLevel,
+        extensions: ["prettify", "footnotes"]
+    });
+};
+
+exports.extractBookData = function (file, post) {
+    let html = new JSDOM(file);
+    let page = html.window.document.getElementById("page");
+    // remove header section
+    let header = page.getElementsByTagName("header");
+    while (header.length > 0)
+        header[0].parentNode.removeChild(header[0]);
+    // reduce all headings by 1
+    for (let h = 5; h >= 1; h--) {
+        let heading = page.getElementsByTagName(`h${h}`);
+        while (heading.length > 0)
+            this.changeTag(heading[0], `h${h+1}`);
     }
+
+    return /*html*/ `
+        ${post.prompt ? /*html*/ `<p><i>This story was inspired by a Reedsy Prompt and submitted to their competition. As such, it has also been published on <a href="${post.prompt}">their website</a>.</i></p>` : ""}
+        ${page.outerHTML}
+    `;
+};
+
+exports.replaceRelativeLinks = function (element, tag) {
+    if (element[tag] && element[tag].startsWith("./"))
+        element[tag] = `../${element[tag].substring(2)}`;
+};
+
+exports.changeTag = function (element, newTag) {
+    const newElement = element.ownerDocument.createElement(newTag);
+    newElement.innerHTML = element.innerHTML;
+    for (let a of element.attributes)
+        newElement.setAttribute(a.nodeName, a.nodeValue);
+    element.parentNode.replaceChild(newElement, element);
 };

style/book.css

@@ -2,42 +2,33 @@
     max-width: 40.5em;
 }
 
-.chapter {
-    padding-bottom: 2em;
-}
-
 #page {
     font-family: "Georgia", serif;
     text-align: justify;
 }
 
-span.chapter-header {
-    font-size: 2rem;
+#page .chapter {
+    padding-bottom: 2em;
 }
 
-p {
+#page p {
     text-indent: 1.25em;
     margin: 0;
     hyphens: auto;
 }
 
-p.meta-info {
-    text-indent: 0;
-    hyphens: none;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+.list-display h1,
+.list-display h2,
+.list-display h3,
+.list-display h4,
+.list-display h5,
+.list-display h6 {
     text-align: left;
     font-family: sans-serif;
     font-variant: small-caps;
 }
 
-.rule {
+#page .rule {
     text-align: center !important;
     margin-top: 1em;
     margin-bottom: 1em;