content style update; style refactoring

pages/articles/[slug].tsx

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

pages/collective.tsx

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

pages/document/[slug].tsx

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

pages/documents.tsx

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

pages/gallery.tsx

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

pages/index.tsx

@@ -6,8 +6,9 @@ import { HudozkaTitle } from 'src/components/HudozkaTitle'
 import menuModel from 'src/models/menu'
 import { meta } from 'src/lib/meta'
 import { buildMenu } from 'src/lib/menu'
-import { createApiUrl, requestGet } from 'src/next-lib'
+import { createApiUrl, requestGet, IResponseItems } from 'src/next-lib'
 import { NextPage } from 'next'
+import { IArticle } from 'src/types'
 
 interface IProps {
     pageUrl: string
@@ -22,14 +23,21 @@ const Page: NextPage<IProps> = props => (
     <App
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
-        layout={'wide'}
+        wide={true}
+        contentStyle={{
+            margin: 'var(--size-l) var(--size-xl)',
+        }}
     >
         <Head>
             <title>{props.title}</title>
             <Meta meta={props.meta} />
         </Head>
 
-        <HudozkaTitle />
+        <HudozkaTitle
+            style={{
+                marginBottom: 'var(--size-l)'
+            }}
+        />
 
         <ArticleCardList
             articles={props.articles}
@@ -43,8 +51,12 @@ export const unstable_getStaticProps = async () => {
     const pageUrl = '/'
     const page = 1
     const pageSize = process.env.APP_ARTICLES_PAGE_SIZE
-    const res = await requestGet(createApiUrl(`/api/articles?page=${page}&pageSize=${pageSize}`), {}) as any
-    const articles = res.items || []
+    const res = await requestGet<IResponseItems<IArticle>>(createApiUrl(`/api/articles?page=${page}&pageSize=${pageSize}`), null)
+    const articles = (res.items || [])
+        .map(x => ({
+            ...x,
+            featured: x.id === '2019-kotiki'
+        }))
     const nextPage = res.nextPage
     const prevPage = res.prevPage
     const title = 'Шлиссельбургская ДХШ'

pages/schedule.tsx

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

pages/teacher/[person].tsx

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

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%;