made new css var for the article width

assets/css/common/main.css

@@ -6,6 +6,10 @@
     padding: var(--gap);
 }
 
+.main.page {
+    max-width: calc(var(--article-width) + var(--gap) * 2);
+}
+
 .page-header h1 {
     font-size: 40px;
 }

assets/css/core/theme-vars.css

@@ -3,6 +3,7 @@
     --content-gap: 20px;
     --nav-width: 1380px;
     --main-width: 720px;
+    --article-width: 650px;
     --toc-width: 300px;
     --header-height: 60px;
     --footer-height: 60px;

layouts/_default/baseof.html

@@ -14,7 +14,7 @@
 {{- end -}}
 " id="top">
     {{- partialCached "header.html" . .Page -}}
-    <main class="main">
+    <main class="main {{- if (eq .Kind `page`) -}}{{- print " page" -}}{{- end -}}">
         {{- block "main" . }}{{ end }}
     </main>
     {{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}

layouts/partials/toc.html

@@ -126,7 +126,7 @@
         })
     }, false);
 
-    const main = parseInt(getComputedStyle(document.body).getPropertyValue('--main-width'), 10);
+    const main = parseInt(getComputedStyle(document.body).getPropertyValue('--article-width'), 10);
     const toc = parseInt(getComputedStyle(document.body).getPropertyValue('--toc-width'), 10);
     const gap = parseInt(getComputedStyle(document.body).getPropertyValue('--gap'), 10);