content style update: rm thin; rm menu padding

pages/[...slug].tsx

@@ -18,8 +18,7 @@ const Index = props => (
     <App
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
-        menuPadding={true}
-        layout={'thin'}
+        layout={'wide'}
     >
         <Head>
             <title>{props.title}</title>

pages/album/[slug].tsx

@@ -23,8 +23,7 @@ const Page: NextPage<Props> = props => {
         <App
             menu={buildMenu(props.pageUrl, menuModel)}
             showAuthor={true}
-            menuPadding={true}
-            layout={'thin'}
+            layout={'wide'}
         >
             <Head>
                 <title>{props.data.title}</title>

pages/article/[slug].tsx

@@ -27,8 +27,7 @@ const Page: NextPage<Props> = props => {
         <App
             menu={buildMenu(props.pageUrl, menuModel)}
             showAuthor={true}
-            menuPadding={true}
-            layout={'thin'}
+            layout={'wide'}
         >
             <Head>
                 <title>{props.data.title}</title>

pages/articles/[slug].tsx

@@ -30,7 +30,6 @@ const Page: NextPage<Props> = props => {
         <App
             menu={buildMenu(props.pageUrl, menuModel)}
             showAuthor={true}
-            menuPadding={true}
             layout={'wide'}
         >
             <Head>

pages/collective.tsx

@@ -36,7 +36,6 @@ const Page: NextPage<Props> = props => {
         <App
             menu={buildMenu(props.pageUrl, menuModel)}
             showAuthor={true}
-            menuPadding={true}
             layout={'wide'}
         >
             <Head>

pages/document/[slug].tsx

@@ -28,7 +28,6 @@ const Page: NextPage<Props> = props => {
         <App
             menu={buildMenu(props.pageUrl, menuModel)}
             showAuthor={true}
-            menuPadding={true}
             layout={'wide'}
         >
             <Head>

pages/documents.tsx

@@ -103,8 +103,7 @@ const Page: NextPage<IProps> = props => (
     <App
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
-        menuPadding={true}
-        layout={'thin'}
+        layout={'wide'}
     >
         <Head>
             <title>{props.title}</title>

pages/gallery.tsx

@@ -73,7 +73,6 @@ const Page: NextPage<IProps> = props => (
     <App
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
-        menuPadding={true}
         layout={'wide'}
     >
         <Head>

pages/index.tsx

@@ -22,7 +22,6 @@ const Page: NextPage<IProps> = props => (
     <App
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
-        menuPadding={true}
         layout={'wide'}
     >
         <Head>

pages/schedule.tsx

@@ -17,7 +17,6 @@ const Page: NextPage<Props> = props => (
     <App
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
-        menuPadding={true}
         layout={'wide'}
     >
         <Head>

pages/teacher/[person].tsx

@@ -28,8 +28,7 @@ const Index: NextPage<IProps> = props => {
         <App
             menu={buildMenu(props.pageUrl, menuModel)}
             showAuthor={true}
-            menuPadding={true}
-            layout={'thin'}
+            layout={'wide'}
         >
             <Head>
                 <title>{props.title}</title>

src/components/App/index.tsx

@@ -15,8 +15,7 @@ const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigat
 export interface IAppProps {
     menu: any
     showAuthor: boolean
-    menuPadding: boolean
-    layout: 'full' | 'wide' | 'thin'
+    layout: 'full' | 'wide'
 }
 
 export const App: React.FC<IAppProps> = props => {
@@ -38,10 +37,14 @@ export const App: React.FC<IAppProps> = props => {
                     />
                 )}
             >
-                <div className={cx('content', `content_${props.layout}`, {
-                    'content--padding-top--menu': props.menuPadding,
-                    'reduced-motion': motionDisabled,
-                })}>
+                <div
+                    className={cx('content', `content_${props.layout}`, {
+                        'reduced-motion': motionDisabled,
+                    })}
+                    style={{
+                        paddingTop: 'var(--menu-thickness)'
+                    }}
+                >
                     {props.children}
                 </div>
 

src/style.css

@@ -24,11 +24,8 @@
     --tablet-max-width: 64em;
 
     /* CONTENT */
-    --content-full: 100%;
-    --content-wide: 90%;
-    --content-semi-wide: 70%;
-    --content-thin: 60%;
-    --content-width: var(--content-full);
+    --content-wide: 60%;
+    --content-width: 100%;
 
     --embed-video-ratio: 56.25%;
 
@@ -198,7 +195,6 @@ a.invisible {
         --font-size-h2: 1.5rem;
         --font-size-h3: 1.25rem;
 
-        --content-thin: 90%;
         --content-wide: 90%;
 
         --kazimir-image-increase: 0px;

src/style/content.scss

@@ -1,29 +1,11 @@
 .content {
-    // margin: 0 auto 1em;
-
     width: var(--content-width);
 }
 
-.content_full {
-    --content-width: var(--content-full);
-}
-
 .content_wide {
     --content-width: var(--content-wide);
 }
 
-.content_semi-wide {
-    --content-width: var(--content-semi-wide);
-}
-
-.content_thin {
-    --content-width: var(--content-thin);
-}
-
-.content--padding-top--menu {
-    padding-top: var(--menu-thickness);
-}
-
 // Animation on load
 
 @keyframes smallSlideInFromTop {
@@ -44,49 +26,3 @@
 .content.reduced-motion {
     animation: none;
 }
-
-@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
-    $thin-value: 70%;
-    $wide-value: 95%;
-    $semi-wide-value: 80%;
-
-    .content {
-        overflow-x: scroll;
-
-        &.content_wide {
-            width: $wide-value;
-        }
-
-        &.content_semi-wide {
-            width: $semi-wide-value;
-        }
-
-        &.content_thin {
-            width: $thin-value;
-        }
-
-        &.content--padding-top--menu {
-            padding-top: var(--double-margin);
-        }
-    }
-
-    @media screen and (orientation: portrait) {
-        $wide-value: 100%;
-        $thin-value: 80%;
-        $semi-wide-value: 95%;
-
-        .content {
-            &.content_wide {
-                width: $wide-value;
-            }
-
-            &.content_semi-wide {
-                width: $semi-wide-value;
-            }
-
-            &.content_thin {
-                width: $thin-value;
-            }
-        }
-    }
-}