diff --git a/assets/css/common/main.css b/assets/css/common/main.css
index 50022ac..f6c5145 100644
--- a/assets/css/common/main.css
+++ b/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;
 }
diff --git a/assets/css/core/theme-vars.css b/assets/css/core/theme-vars.css
index 75d52a7..bb1bd99 100644
--- a/assets/css/core/theme-vars.css
+++ b/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;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 6dfe741..38d6319 100644
--- a/layouts/_default/baseof.html
+++ b/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") -}}
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
index 0d2ed25..17e8af2 100644
--- a/layouts/partials/toc.html
+++ b/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);