content layout updated to improve mobile

pages/article/[slug].tsx

@@ -27,9 +27,6 @@ const Page: NextPage<Props> = props => {
         <App
             menu={buildMenu(props.pageUrl, menuModel)}
             showAuthor={true}
-            contentStyle={{
-                marginTop: 'var(--size-l)'
-            }}
         >
             <Head>
                 <title>{props.data.title}</title>

pages/articles/[slug].tsx

@@ -31,9 +31,6 @@ const Page: NextPage<Props> = props => {
             menu={buildMenu(props.pageUrl, menuModel)}
             showAuthor={true}
             wide={true}
-            contentStyle={{
-                margin: 'var(--size-l) var(--size-xl)'
-            }}
         >
             <Head>
                 <title>{props.title}</title>

pages/collective.tsx

@@ -38,9 +38,6 @@ const Page: NextPage<Props> = props => {
             menu={buildMenu(props.pageUrl, menuModel)}
             showAuthor={true}
             wide={true}
-            contentStyle={{
-                margin: 'var(--size-l) var(--size-xl)'
-            }}
         >
             <Head>
                 <title>{props.title}</title>

pages/document/[slug].tsx

@@ -28,9 +28,6 @@ const Page: NextPage<Props> = props => {
         <App
             menu={buildMenu(props.pageUrl, menuModel)}
             showAuthor={true}
-            contentStyle={{
-                marginTop: 'var(--size-l)'
-            }}
         >
             <Head>
                 <title>{props.data.title}</title>

pages/documents.tsx

@@ -103,9 +103,6 @@ const Page: NextPage<IProps> = props => (
     <App
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
-        contentStyle={{
-            marginTop: 'var(--size-l)'
-        }}
     >
         <Head>
             <title>{props.title}</title>

pages/gallery.tsx

@@ -74,9 +74,6 @@ const Page: NextPage<IProps> = props => (
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         wide={true}
-        contentStyle={{
-            margin: 'var(--size-l) var(--size-xl)'
-        }}
     >
         <Head>
             <title>{props.title}</title>

pages/index.tsx

@@ -24,9 +24,6 @@ const Page: NextPage<IProps> = props => (
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         wide={true}
-        contentStyle={{
-            margin: 'var(--size-l) var(--size-xl)',
-        }}
     >
         <Head>
             <title>{props.title}</title>

pages/schedule.tsx

@@ -18,9 +18,6 @@ const Page: NextPage<Props> = props => (
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
         wide={true}
-        contentStyle={{
-            marginTop: 'var(--size-l)'
-        }}
     >
         <Head>
             <title>{props.title}</title>

src/style.css

@@ -22,8 +22,10 @@
     --tablet-max-width: 64em;
 
     /* CONTENT */
-    --content-wide: 100%;
     --content-width: 60%;
+    --content-margin: 0;
+    --content-wide-width: 100%;
+    --content-wide-margin: var(--size-l) var(--size-xl);
 
     --embed-video-ratio: 56.25%;
 
@@ -193,7 +195,9 @@ a.invisible {
         --font-size-h2: 1.5rem;
         --font-size-h3: 1.25rem;
 
-        --content-wide: 90%;
+        --content-width: 100%;
+        --content-margin: var(--size-l);
+        --content-wide-margin: var(--size-l) var(--size-l);
 
         --kazimir-image-increase: 0px;
     }

src/style/content.css

@@ -1,9 +1,11 @@
 .content {
     width: var(--content-width);
+    margin: var(--content-margin);
 }
 
 .content_wide {
-    --content-width: var(--content-wide);
+    --content-width: var(--content-wide-width);
+    --content-margin: var(--content-wide-margin);
 }
 
 /* Animation on load */