From 13c7d473b1632fd98482dc1e27f879e086d6ab4a Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 00:08:31 +0300 Subject: [PATCH 1/9] add Card component --- src/components/Card/index.tsx | 36 +++++++++++++ src/components/Card/styles.css | 85 ++++++++++++++++++++++++++++++ src/components/CardGrid/styles.css | 2 +- 3 files changed, 122 insertions(+), 1 deletion(-) create mode 100644 src/components/Card/index.tsx create mode 100644 src/components/Card/styles.css diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx new file mode 100644 index 00000000..2f0510f8 --- /dev/null +++ b/src/components/Card/index.tsx @@ -0,0 +1,36 @@ +import './styles.css' +import cx from 'classnames' +import Link from 'next/link' + +export type CardLayout = 'simple' | 'featured' +export type CardProps = { + style?: React.CSSProperties + href: string + img: { + alt: string + src: string + srcSet: string + } + layout: CardLayout +} + +export const Card: React.FC = props => ( +
+ + +
+ {props.img.alt} +
+ +
+ {props.children} +
+ + +
+) diff --git a/src/components/Card/styles.css b/src/components/Card/styles.css new file mode 100644 index 00000000..211cb0ab --- /dev/null +++ b/src/components/Card/styles.css @@ -0,0 +1,85 @@ +.card { + border-radius: var(--radius); + box-shadow: var(--shadow); + overflow: hidden; + transition: box-shadow 150ms; +} + +.card:hover { + box-shadow: var(--shadow-active); +} + +.card:hover img { + width: 104%; + height: 104%; + + top: -2%; + left: -2%; +} + +.card > a { + display: block; + height: 100%; + position: relative; +} + +.card-image { + position: relative; + width: 100%; + height: 100%; +} + +.card-image img { + width: 100%; + height: 100%; + object-fit: cover; + + transition: all 150ms ease-out; + + position: absolute; + top: 0; + left: 0; +} + +.card-body { + background-color: var(--color-back-main); + padding: var(--size-m); +} + +/* SIMPLE */ + +.card.simple .card-body { + position: relative; + padding-top: 0; +} + +.card.simple .card-body:before { + position: absolute; + content: ''; + background-color: var(--color-back-main); + + border-radius: var(--radius) var(--radius) 0 0; + width: 100%; + height: var(--radius); + top: calc(var(--radius) * -1); + left: 0; +} + +.card.simple > a { + display: flex; + flex-direction: column; +} + +/* FEATURED */ + +.card.featured .card-body { + position: absolute; + + --offset: var(--size-m); + --r: var(--size-s); + left: var(--offset); + right: var(--offset); + bottom: var(--offset); + + border-radius: var(--radius) var(--radius) var(--r) var(--r); +} diff --git a/src/components/CardGrid/styles.css b/src/components/CardGrid/styles.css index 4fccc77c..9a93eaca 100644 --- a/src/components/CardGrid/styles.css +++ b/src/components/CardGrid/styles.css @@ -3,7 +3,7 @@ display: grid; /* grid-template-columns: 1fr 1fr 1fr; */ grid-template-columns: repeat(auto-fill, minmax(var(--min-cell-size), 1fr)); - grid-auto-rows: 1fr; + grid-auto-rows: 20em; grid-gap: var(--size-xl) var(--size-l); } From 5730505fcad20c29886599b6270213116aa9855f Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 00:42:55 +0300 Subject: [PATCH 2/9] article, person cards removed; use common component --- pages/articles/[slug].tsx | 4 +- pages/collective.tsx | 26 ++++-- pages/index.tsx | 8 +- src/components/ArticleCard/index.tsx | 43 --------- src/components/ArticleCard/styles.css | 91 ------------------- src/components/ArticleCardList.tsx | 46 ---------- .../{ArticleCard => ArticleGrid}/Date.tsx | 0 src/components/ArticleGrid/index.tsx | 62 +++++++++++++ src/components/CardGrid/styles.css | 2 +- src/components/PersonCard/index.tsx | 29 ------ src/components/PersonCard/styles.css | 72 --------------- src/style.css | 4 +- 12 files changed, 92 insertions(+), 295 deletions(-) delete mode 100644 src/components/ArticleCard/index.tsx delete mode 100644 src/components/ArticleCard/styles.css delete mode 100644 src/components/ArticleCardList.tsx rename src/components/{ArticleCard => ArticleGrid}/Date.tsx (100%) create mode 100644 src/components/ArticleGrid/index.tsx delete mode 100644 src/components/PersonCard/index.tsx delete mode 100644 src/components/PersonCard/styles.css diff --git a/pages/articles/[slug].tsx b/pages/articles/[slug].tsx index 729510d9..94ae14a3 100644 --- a/pages/articles/[slug].tsx +++ b/pages/articles/[slug].tsx @@ -1,7 +1,7 @@ import Head from 'next/head' import { range } from 'lodash' import { App } from 'src/components/App' -import { ArticleCardList } from 'src/components/ArticleCardList' +import { ArticleGrid } from 'src/components/ArticleGrid' import menuModel from 'src/models/menu' import { buildMenu } from 'src/lib/menu' import { meta } from 'src/lib/meta' @@ -39,7 +39,7 @@ const Page: NextPage = props => { {props.title} - = props => { marginBottom: 'var(--size-xl)', }}> {props.data.map((item, index) => ( - + layout={'featured'} + img={{ + src: item.picture.src, + alt: item.name, + srcSet: '',//item.name.sr, + }} + href={item.url} + > +

+ {item.name[0]} {item.name[1]} {item.name[2]} +

+ {item.position} + ))} diff --git a/pages/index.tsx b/pages/index.tsx index f3203ce9..18b14e54 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,7 @@ import Head from 'next/head' import { App } from 'src/components/App' import { Meta } from 'src/components/Meta' -import { ArticleCardList } from 'src/components/ArticleCardList' +import { ArticleGrid } from 'src/components/ArticleGrid' import { HudozkaTitle } from 'src/components/HudozkaTitle' import menuModel from 'src/models/menu' import { meta } from 'src/lib/meta' @@ -39,7 +39,7 @@ const Page: NextPage = props => ( }} /> - { const pageSize = process.env.APP_ARTICLES_PAGE_SIZE const res = await requestGet>(createApiUrl(`/api/articles?page=${page}&pageSize=${pageSize}`), null) const articles = (res.items || []) + .map(x => ({ + ...x, + featured: ['2019-kotiki', 'veloparking'].includes(x.id) + })) const nextPage = res.nextPage const prevPage = res.prevPage const title = 'Шлиссельбургская ДХШ' diff --git a/src/components/ArticleCard/index.tsx b/src/components/ArticleCard/index.tsx deleted file mode 100644 index ba0e77da..00000000 --- a/src/components/ArticleCard/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import './styles.css' - -import cx from 'classnames' -import { Date } from './Date' -import { IImage } from 'src/types' -import Link from 'next/link' - -export interface IArticleCardProps { - style?: React.CSSProperties - article: any - preview?: IImage -} - -export const ArticleCard: React.FC = ({ article, ...props }) => ( - -) diff --git a/src/components/ArticleCard/styles.css b/src/components/ArticleCard/styles.css deleted file mode 100644 index db9fb096..00000000 --- a/src/components/ArticleCard/styles.css +++ /dev/null @@ -1,91 +0,0 @@ -.ArticleCard { - --article-card-image-height: 15em; - - display: flex; - flex-direction: column; - - border-radius: var(--radius); - box-shadow: var(--shadow); - /* box-shadow: 0 0 0 1px var(--color-shadow); */ - - overflow: hidden; - - transition: box-shadow 150ms; -} - -.ArticleCard:hover { - box-shadow: var(--shadow-active); -} - -.ArticleCard > a { - display: block; - position: relative; -} - -.ArticleCard-image { - overflow: hidden; - position: relative; - width: 100%; - height: var(--article-card-image-height); -} - -.ArticleCard-image img { - width: 100%; - height: 100%; - object-fit: cover; - - transition: all 150ms ease-out; - - position: absolute; - top: 0; - left: 0; -} - -.ArticleCard-body { - position: relative; - - z-index: 1000; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: flex-start; - - height: 5em; - - background-color: white; - - padding: 0 var(--size-m) var(--size-m); -} - -.ArticleCard-body:before { - position: absolute; - content: ''; - background-color: white; - - border-radius: var(--radius) var(--radius) 0 0 ; - width: 100%; - height: var(--radius); - top: calc(var(--radius) * -1); - left: 0; -} - -.ArticleCard:hover img { - width: 104%; - height: 104%; - - top: -2%; - left: -2%; -} - -/* Tablet */ -@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) { - .ArticleCard { - --article-card-image-height: 12em; - } -} - -/* Mobile */ -@media (max-width: 31.25em) { - .ArticleCard { - } -} diff --git a/src/components/ArticleCardList.tsx b/src/components/ArticleCardList.tsx deleted file mode 100644 index 0b5655bd..00000000 --- a/src/components/ArticleCardList.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { ArticleCard } from './ArticleCard' -import { Pager } from './Pager' -import { CardGrid } from './CardGrid' -import { IArticle } from 'src/types' - -export interface IArticleCardListProps { - articles: IArticle[] - nextPage: number | null - prevPage: number | null -} - -export const ArticleCardList: React.FC = ({ articles, nextPage, prevPage, ...props }) => ( - <> - - {articles.map((article, i) => { - const preview = { - alt: article.title, - src: article.preview.src, - srcSet: article.preview.set, - } - - const gridColumn = article.featured ? 'span 2' : 'auto' - - return ( - - ) - })} - - - - -) diff --git a/src/components/ArticleCard/Date.tsx b/src/components/ArticleGrid/Date.tsx similarity index 100% rename from src/components/ArticleCard/Date.tsx rename to src/components/ArticleGrid/Date.tsx diff --git a/src/components/ArticleGrid/index.tsx b/src/components/ArticleGrid/index.tsx new file mode 100644 index 00000000..2d232085 --- /dev/null +++ b/src/components/ArticleGrid/index.tsx @@ -0,0 +1,62 @@ +import { Pager } from '../Pager' +import { CardGrid } from '../CardGrid' +import { IArticle } from 'src/types' +import { Card, CardLayout } from '../Card' +import { Date } from './Date' + +export interface IArticleGridProps { + articles: IArticle[] + nextPage: number | null + prevPage: number | null +} + +export const ArticleGrid: React.FC = ({ articles, nextPage, prevPage, ...props }) => ( + <> + + {articles.map((article, i) => { + const gridColumn = article.featured ? 'span 2' : 'auto' + const layout: CardLayout = article.featured ? 'featured' : 'simple' + const srcSet = article.preview.set.map(({ url, density }) => `${url} ${density}x`).join(' ') + + return ( + +
+

+ {article.title} +

+ + {/* {article.date} */} +
+ + ) + })} + + + + +) diff --git a/src/components/CardGrid/styles.css b/src/components/CardGrid/styles.css index 9a93eaca..eb51fc59 100644 --- a/src/components/CardGrid/styles.css +++ b/src/components/CardGrid/styles.css @@ -3,7 +3,7 @@ display: grid; /* grid-template-columns: 1fr 1fr 1fr; */ grid-template-columns: repeat(auto-fill, minmax(var(--min-cell-size), 1fr)); - grid-auto-rows: 20em; + grid-auto-rows: 25em; grid-gap: var(--size-xl) var(--size-l); } diff --git a/src/components/PersonCard/index.tsx b/src/components/PersonCard/index.tsx deleted file mode 100644 index 2b6aa494..00000000 --- a/src/components/PersonCard/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import './styles.css' - -import cx from 'classnames' -import { Image } from '../Image' - -export const PersonCard = ({ picture, name, url, profile }) => ( - -) diff --git a/src/components/PersonCard/styles.css b/src/components/PersonCard/styles.css deleted file mode 100644 index b0052cfe..00000000 --- a/src/components/PersonCard/styles.css +++ /dev/null @@ -1,72 +0,0 @@ -.personCard { - --person-card-height: 24em; - - display: flex; - flex-direction: column; - - min-width: 10em; - max-width: 30em; -} - -.personCard > a { - display: block; - position: relative; -} - -.personCard-Picture { - position: relative; - border-radius: var(--radius); - - width: 100%; - height: var(--person-card-height); - - overflow: hidden; -} - -.personCard-Picture img { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - - object-fit: cover; - transition: all 150ms ease-out; -} - -.personCard-Title, -.personCard-Body { - position: absolute; - width: 100%; - padding: var(--single-margin); - box-sizing: border-box; - color: white; - text-align: center; - text-shadow: 0 0 3px #000; -} - -.personCard-Title { - top: 0; -} - -.personCard-Body { - bottom: 0; -} - -.personCard:hover img { - width: 105%; - height: 105%; - top: -2.5%; - left: -2.5%; -} - -/* Tablet */ - -@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) { - .personCard { - --person-card-height: 20em; - } - - @media screen and (orientation: portrait) { - } -} diff --git a/src/style.css b/src/style.css index 825ddf57..7c72ed5b 100644 --- a/src/style.css +++ b/src/style.css @@ -65,14 +65,14 @@ --color-back-opposite: var(--darker-color); /* SIZE */ - --size-sx: 0.2em; + --size-xs: 0.25em; --size-s: 0.5em; --size-m: 1em; --size-l: 2em; --size-xl: 3em; /* EFFECTS */ - --radius: 15px; + --radius: 16px; --shadow: 0 0 8px var(--color-shadow); --shadow-active: 0 4px 16px var(--color-shadow); From 89203b2b12f8577147a92e108908378a2f70e9e0 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 01:35:43 +0300 Subject: [PATCH 3/9] article grid updated --- src/components/ArticleGrid/Date.tsx | 17 ++++++----- src/components/ArticleGrid/index.tsx | 42 +++++++++++++++++----------- 2 files changed, 36 insertions(+), 23 deletions(-) diff --git a/src/components/ArticleGrid/Date.tsx b/src/components/ArticleGrid/Date.tsx index 754e4714..2ad47fe4 100644 --- a/src/components/ArticleGrid/Date.tsx +++ b/src/components/ArticleGrid/Date.tsx @@ -1,14 +1,17 @@ -import * as React from 'react' -import { dateFormat } from '../../lib/date' +import { dateFormat } from 'src/lib/date' -export const Date: React.FC<{ children: string }> = ({ children }) => ( -

+export type DateProps = { + style?: React.CSSProperties + children: string | Date +} +export const Date: React.FC = props => ( +

- {dateFormat(children)} + {dateFormat(props.children)}

) diff --git a/src/components/ArticleGrid/index.tsx b/src/components/ArticleGrid/index.tsx index 2d232085..8e96edaa 100644 --- a/src/components/ArticleGrid/index.tsx +++ b/src/components/ArticleGrid/index.tsx @@ -1,16 +1,18 @@ +import { IArticle } from 'src/types' import { Pager } from '../Pager' import { CardGrid } from '../CardGrid' -import { IArticle } from 'src/types' import { Card, CardLayout } from '../Card' import { Date } from './Date' +import { Block } from '../Block' +import { Spacer } from '../Spacer' -export interface IArticleGridProps { +export type ArticleGridProps = { articles: IArticle[] nextPage: number | null prevPage: number | null } -export const ArticleGrid: React.FC = ({ articles, nextPage, prevPage, ...props }) => ( +export const ArticleGrid: React.FC = ({ articles, nextPage, prevPage, ...props }) => ( <> = ({ articles, nextPage, p const layout: CardLayout = article.featured ? 'featured' : 'simple' const srcSet = article.preview.set.map(({ url, density }) => `${url} ${density}x`).join(' ') + const content = article.featured + ? ( +

+ {article.title} +

+ ) : ( + + {article.title} + + {article.date} + + ) + return ( = ({ articles, nextPage, p gridColumn, }} > -
-

- {article.title} -

- - {/* {article.date} */} -
+ {content} ) })} From e66dfddeb977fd4ea2309d28738c554063338a94 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 01:35:55 +0300 Subject: [PATCH 4/9] card grid style cleanup --- src/components/CardGrid/styles.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/CardGrid/styles.css b/src/components/CardGrid/styles.css index eb51fc59..5f589948 100644 --- a/src/components/CardGrid/styles.css +++ b/src/components/CardGrid/styles.css @@ -1,17 +1,11 @@ .card-grid { --min-cell-size: 240px; display: grid; - /* grid-template-columns: 1fr 1fr 1fr; */ grid-template-columns: repeat(auto-fill, minmax(var(--min-cell-size), 1fr)); grid-auto-rows: 25em; grid-gap: var(--size-xl) var(--size-l); } -/* .card-grid > *:first-child { - grid-row: 1 / 1; - grid-column: 1 / 1; -} */ - @media screen and (max-width: 31.25em) { .card-grid { grid-template-columns: 1fr; From 5c7ab73e682c110b85fa615a0c23a2663cc46521 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 01:36:06 +0300 Subject: [PATCH 5/9] article style cleanup --- src/style/components/Article.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/style/components/Article.scss b/src/style/components/Article.scss index fb632a4c..02aacff5 100644 --- a/src/style/components/Article.scss +++ b/src/style/components/Article.scss @@ -15,8 +15,6 @@ } &-Body { - --text-margin: 10px; - ul, ol { margin-left: var(--half-margin); @@ -36,12 +34,6 @@ line-height: var(--article-line-height); } - h2, - h3 { - margin-left: var(--text-margin); - margin-right: var(--text-margin); - } - blockquote { background-color: hsl(215, 10%, 96%); padding: var(--article-quote-padding); From 4ed68b235acc2d36369f4d35275f9694b660fc8e Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 01:36:17 +0300 Subject: [PATCH 6/9] article layout fix --- pages/article/[slug].tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/pages/article/[slug].tsx b/pages/article/[slug].tsx index b835acb6..7929f831 100644 --- a/pages/article/[slug].tsx +++ b/pages/article/[slug].tsx @@ -27,6 +27,9 @@ const Page: NextPage = props => { {props.data.title} From 692f50ede4bfca28cfcc3bc2d0c75ba42d89ae18 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 02:09:22 +0300 Subject: [PATCH 7/9] CardGrid auto flow improved --- src/components/CardGrid/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/CardGrid/styles.css b/src/components/CardGrid/styles.css index 5f589948..2545e3b5 100644 --- a/src/components/CardGrid/styles.css +++ b/src/components/CardGrid/styles.css @@ -3,6 +3,7 @@ display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min-cell-size), 1fr)); grid-auto-rows: 25em; + grid-auto-flow: dense; grid-gap: var(--size-xl) var(--size-l); } From 86c7c63c6c80c0885f188954fdec1b4e7105c8a6 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 02:43:02 +0300 Subject: [PATCH 8/9] article grid featured simplified --- src/components/ArticleGrid/index.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/ArticleGrid/index.tsx b/src/components/ArticleGrid/index.tsx index 8e96edaa..b165ebdc 100644 --- a/src/components/ArticleGrid/index.tsx +++ b/src/components/ArticleGrid/index.tsx @@ -24,15 +24,8 @@ export const ArticleGrid: React.FC = ({ articles, nextPage, pr const layout: CardLayout = article.featured ? 'featured' : 'simple' const srcSet = article.preview.set.map(({ url, density }) => `${url} ${density}x`).join(' ') - const content = article.featured + const content = !article.featured ? ( -

- {article.title} -

- ) : ( @@ -42,6 +35,8 @@ export const ArticleGrid: React.FC = ({ articles, nextPage, pr marginTop: 'var(--size-m)', }}>{article.date} + ) : ( + article.title ) return ( From 70e8bd64609a151681a1e3bbeebe8fdab5a7023b Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Sat, 22 Feb 2020 02:54:50 +0300 Subject: [PATCH 9/9] content layout updated to improve mobile --- pages/article/[slug].tsx | 3 --- pages/articles/[slug].tsx | 3 --- pages/collective.tsx | 3 --- pages/document/[slug].tsx | 3 --- pages/documents.tsx | 3 --- pages/gallery.tsx | 3 --- pages/index.tsx | 3 --- pages/schedule.tsx | 3 --- src/style.css | 8 ++++++-- src/style/content.css | 4 +++- 10 files changed, 9 insertions(+), 27 deletions(-) diff --git a/pages/article/[slug].tsx b/pages/article/[slug].tsx index 7929f831..b835acb6 100644 --- a/pages/article/[slug].tsx +++ b/pages/article/[slug].tsx @@ -27,9 +27,6 @@ const Page: NextPage = props => { {props.data.title} diff --git a/pages/articles/[slug].tsx b/pages/articles/[slug].tsx index 94ae14a3..b378122a 100644 --- a/pages/articles/[slug].tsx +++ b/pages/articles/[slug].tsx @@ -31,9 +31,6 @@ const Page: NextPage = props => { menu={buildMenu(props.pageUrl, menuModel)} showAuthor={true} wide={true} - contentStyle={{ - margin: 'var(--size-l) var(--size-xl)' - }} > {props.title} diff --git a/pages/collective.tsx b/pages/collective.tsx index f54754d4..9d944176 100644 --- a/pages/collective.tsx +++ b/pages/collective.tsx @@ -38,9 +38,6 @@ const Page: NextPage = props => { menu={buildMenu(props.pageUrl, menuModel)} showAuthor={true} wide={true} - contentStyle={{ - margin: 'var(--size-l) var(--size-xl)' - }} > {props.title} diff --git a/pages/document/[slug].tsx b/pages/document/[slug].tsx index a70c2792..dc821944 100644 --- a/pages/document/[slug].tsx +++ b/pages/document/[slug].tsx @@ -28,9 +28,6 @@ const Page: NextPage = props => { {props.data.title} diff --git a/pages/documents.tsx b/pages/documents.tsx index deed0f7b..a4d310aa 100644 --- a/pages/documents.tsx +++ b/pages/documents.tsx @@ -103,9 +103,6 @@ const Page: NextPage = props => ( {props.title} diff --git a/pages/gallery.tsx b/pages/gallery.tsx index 5d41dfbc..ab74db8f 100644 --- a/pages/gallery.tsx +++ b/pages/gallery.tsx @@ -74,9 +74,6 @@ const Page: NextPage = props => ( menu={buildMenu(props.pageUrl, menuModel)} showAuthor={true} wide={true} - contentStyle={{ - margin: 'var(--size-l) var(--size-xl)' - }} > {props.title} diff --git a/pages/index.tsx b/pages/index.tsx index 18b14e54..a5eaf48e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -24,9 +24,6 @@ const Page: NextPage = props => ( menu={buildMenu(props.pageUrl, menuModel)} showAuthor={true} wide={true} - contentStyle={{ - margin: 'var(--size-l) var(--size-xl)', - }} > {props.title} diff --git a/pages/schedule.tsx b/pages/schedule.tsx index 667945db..4b676456 100644 --- a/pages/schedule.tsx +++ b/pages/schedule.tsx @@ -18,9 +18,6 @@ const Page: NextPage = props => ( menu={buildMenu(props.pageUrl, menuModel)} showAuthor={true} wide={true} - contentStyle={{ - marginTop: 'var(--size-l)' - }} > {props.title} diff --git a/src/style.css b/src/style.css index 7c72ed5b..e4b77543 100644 --- a/src/style.css +++ b/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; } diff --git a/src/style/content.css b/src/style/content.css index 0b0eed69..c50b21b7 100644 --- a/src/style/content.css +++ b/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 */