use CSS var for doc margin

diff --git a/src/css/doc.css b/src/css/doc.css
index d30ba0d..3bd4502 100644 (file)
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -2,7 +2,7 @@
   color: var(--doc-font-color);
   font-size: var(--doc-font-size);
   line-height: var(--doc-line-height);
-  margin: 0 auto;
+  margin: var(--doc-margin);
   max-width: var(--doc-max-width);
   padding: 0 1rem 4rem;
 }
@@ -10,7 +10,7 @@
 @media screen and (min-width: 1024px) {
   .doc {
     font-size: var(--doc-font-size--desktop);
-    margin: 0 2rem;
+    margin: var(--doc-margin--desktop);
     max-width: var(--doc-max-width--desktop);
   }
 }

diff --git a/src/css/vars.css b/src/css/vars.css
index dded350..ea1c778 100644 (file)
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -73,6 +73,8 @@
   --doc-font-size: inherit;
   --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
   --doc-line-height: 1.6;
+  --doc-margin: 0 auto;
+  --doc-margin--desktop: 0 2rem;
   --heading-font-color: var(--color-jet-80);
   --heading-font-weight: normal;
   --alt-heading-font-weight: var(--body-font-weight-bold);