diff --git a/pages/next.jsx b/pages/next.jsx
index c5ac892b..ff2ed9f2 100644
--- a/pages/next.jsx
+++ b/pages/next.jsx
@@ -1,5 +1,6 @@
import React from 'react'
import Head from 'next/head'
+
import { App } from '../src/components/App'
import { Page } from '../src/components/Page'
import menuModel from '../src/models/menu'
@@ -13,19 +14,18 @@ const Index = (props) => (
menu={buildMenu(props.pageUrl, menuModel)}
showAuthor={true}
menuPadding={true}
+ layout={'thin'}
>
{props.title}
-
+
+ {props.content}
+
)
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 9f5f8a2d..6993b4e9 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -1,7 +1,10 @@
import * as React from 'react'
import dynamic from 'next/dynamic'
+import cx from 'classnames'
+
import { Footer } from '../Footer'
import Comments from '../Comments'
+import { useReducedMotion } from '../../hooks/useReducedMotion'
const Header = dynamic(() => import('./Header'), {
ssr: false,
@@ -9,31 +12,46 @@ const Header = dynamic(() => import('./Header'), {
import '../../style/style.scss'
-export const App = ({ children, menu, showAuthor, menuPadding }) => (
-
-
-
-
-
+export interface IAppProps {
+ menu: any
+ showAuthor: boolean
+ menuPadding: boolean
+ layout?: 'full' | 'wide' | 'thin'
+}
+
+export const App: React.FC
= props => {
+ const layout = props.layout ? props.layout : 'full'
+ const motionDisabled = useReducedMotion()
+
+ return (
+
-
+
-
-
+
+
-
-
+
+
-
-
-)
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/style/content.scss b/src/style/content.scss
index eafb4ab8..6f7971ce 100644
--- a/src/style/content.scss
+++ b/src/style/content.scss
@@ -40,6 +40,10 @@
animation: smallSlideInFromTop 350ms ease-out;
}
+.content.reduced-motion {
+ animation: none;
+}
+
@media screen and (max-width: var(--mobile-width)) {
--content-mobile: 95%;