Add site params content_max_width, metadata_max_width

README.md

@@ -212,6 +212,7 @@ paige:
     scripts_path: "my-assets/my-bootstrap.bundle.min.js" # Use local Bootstrap scripts
     styles_path: "my-assets/my-bootstrap.min.css" # Use local Bootstrap styles
   color: "#123456" # Theme color for Safari and Windows
+  content_max_width: 66ch # Page table of contents and content max width
   comments:
     cactus: # cactus.chat
       account_id: "123456"
@@ -234,6 +235,7 @@ paige:
   hide_theme_comment: true # Don't put a link to this project in a code comment
   hide_theme_link: true # Don't put a link to this project in the footer
   menu_style: "links" # Menu is link list for "links", tab list for "tabs", or pill list if unset
+  metadata_max_width: 100ch # Page metadata max width
   rss:
     managing_editor: "Michael Bluth"
     web_master: "Michael Bluth"

layouts/partials/paige/article.html

@@ -1,5 +1,7 @@
 <article>
+    <div class="align-items-center d-flex flex-column mb-0">
         {{ partial "paige/metadata" . }}
         {{ partial "paige/toc" . }}
         {{ partial "paige/content" . }}
+    </div>
 </article>

layouts/partials/paige/content.html

@@ -1,17 +1,9 @@
 {{ if .Content }}
-<section>
+<section class="paige-content">
-    <div class="container-fluid">
-        <div class="justify-content-center row">
-            <div class="col col-auto px-0">
-                <article>
     {{ if .Scratch.Get "paige_show_full_pages" }}
     {{ .Content }}
     {{ else }}
     {{ .Content | replaceRE `(<h[1-6] id="([^"]+)".+)(</h[1-6]+>)` `${1}<a class="paige-header-link" href="#${2}">#</a>${3}` | safeHTML }}
     {{ end }}
-                </article>
-            </div>
-        </div>
-    </div>
 </section>
 {{ end }}

layouts/partials/paige/metadata.html

@@ -1,4 +1,4 @@
-<section>
+<section class="paige-metadata">
     {{ partial "paige/title" . }}
     {{ partial "paige/description" . }}
     {{ partial "paige/other" . }}

layouts/partials/paige/script.html

@@ -1,11 +1,11 @@
 <script>
 function paigeResize() {
-    var e = document.querySelector("body > div.container > div.row > div.col");
+    var e = document.querySelector('body > div.container');
     var s = getComputedStyle(e);
     var px = parseFloat(s.paddingLeft) + parseFloat(s.paddingRight);
     var bx = parseFloat(s.borderLeftWidth) + parseFloat(s.borderRightWidth);
     var w = e.offsetWidth - px - bx;
-    var es = document.querySelectorAll("article > div");
+    var es = document.querySelectorAll('section[class="paige-content"] > div');
     for (var i = 0; i < es.length; i++) {
         var e = es[i];
         if (e.offsetWidth !== w) {

layouts/partials/paige/style.html

@@ -1,8 +1,4 @@
 <style>
-article > div {
-    margin-bottom: 1rem;
-}
-
 body, html {
     height: 100%;
 }
@@ -21,6 +17,22 @@ h1:hover .paige-header-link, h2:hover .paige-header-link, h3:hover .paige-header
     display: inline;
 }
 
+section[class="paige-content"] > div {
+    margin-bottom: 1rem;
+}
+
+{{ with .Site.Params.paige.content_max_width }}
+section[class="paige-content"], section[class="paige-toc"] {
+    max-width: {{ . }};
+}
+{{ end }}
+
+{{ with .Site.Params.paige.metadata_max_width }}
+section[class="paige-metadata"] {
+    max-width: {{ . }};
+}
+{{ end }}
+
 .paige-header-link {
     display: none;
     margin-left: 0.25ch;

layouts/partials/paige/toc.html

@@ -1,11 +1,7 @@
 {{ if and .Content .Params.paige.toc (ne .TableOfContents `<nav id="TableOfContents"></nav>`) }}
-<section>
+<section class="paige-toc">
-    <div class="container-fluid mb-3">
+    <div class="border mb-3 pe-3 ps-3 pt-3 rounded">
-        <div class="justify-content-center row">
-            <div class="border col col-auto pe-3 ps-3 pt-3 rounded">
         {{ .TableOfContents }}
     </div>
-        </div>
-    </div>
 </section>
 {{ end }}