content style update; style refactoring

src/components/App/index.tsx

@@ -15,10 +15,11 @@ const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigat
 export interface IAppProps {
     menu: any
     showAuthor: boolean
-    layout: 'full' | 'wide'
+    wide?: boolean
+    contentStyle?: React.CSSProperties
 }
 
-export const App: React.FC<IAppProps> = props => {
+export const App: React.FC<IAppProps> = ({ wide = false, ...props }) => {
     const motionDisabled = useReducedMotion()
 
     return (
@@ -38,12 +39,11 @@ export const App: React.FC<IAppProps> = props => {
                 )}
             >
                 <div
-                    className={cx('content', `content_${props.layout}`, {
+                    className={cx('content', {
                         'reduced-motion': motionDisabled,
+                        'content_wide': wide,
                     })}
-                    style={{
-                        paddingTop: 'var(--menu-thickness)'
-                    }}
+                    style={props.contentStyle}
                 >
                     {props.children}
                 </div>

src/components/HudozkaTitle/index.tsx

@@ -1,12 +1,13 @@
-import * as React from 'react'
+import { memo } from 'react'
 
-export const HudozkaTitle: React.FC = React.memo(() => (
-    <div>
+export type HudozkaTitleProps = {
+    style?: React.CSSProperties
+}
+
+export const HudozkaTitle: React.FC<HudozkaTitleProps> = memo(props => (
+    <div style={props.style}>
         <style jsx>{`
             div {
-                --padding: var(--double-margin) 0;
-
-                padding: var(--padding);
                 text-align: center;
             }
 

src/style.css

@@ -12,9 +12,7 @@
     --biggest-font-size: 2.25rem;
 
     /* MENU */
-    --menu-thickness: 2.5em;
     --menu-colored-mark-thickness: 4px;
-    --menu-inactive-item-color: hsl(0, 0%, 50%);
 
     /* SIZE */
     --mobile-width: 31.25em;
@@ -24,8 +22,8 @@
     --tablet-max-width: 64em;
 
     /* CONTENT */
-    --content-wide: 60%;
-    --content-width: 100%;
+    --content-wide: 100%;
+    --content-width: 60%;
 
     --embed-video-ratio: 56.25%;