From 406c660f41e5d0b3d0e8e7fb4b7980f2fdff2d3e Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 17:09:21 +0300 Subject: [PATCH 01/12] pager update --- src/components/ArticleCardList.tsx | 6 ++--- src/components/Pager/index.tsx | 34 +++++++++++++++++++++++++++++ src/components/Paginator.js | 21 ------------------ src/style/components/Paginator.scss | 10 --------- src/style/style.scss | 1 - 5 files changed, 37 insertions(+), 35 deletions(-) create mode 100644 src/components/Pager/index.tsx delete mode 100644 src/components/Paginator.js delete mode 100644 src/style/components/Paginator.scss diff --git a/src/components/ArticleCardList.tsx b/src/components/ArticleCardList.tsx index 9ee98ae1..d87a5471 100644 --- a/src/components/ArticleCardList.tsx +++ b/src/components/ArticleCardList.tsx @@ -1,5 +1,5 @@ -import Paginator from './Paginator' import { ArticleCard } from './ArticleCard' +import { Pager } from './Pager' export interface IArticleCardListProps { articles: any[] @@ -19,7 +19,7 @@ export const ArticleCardList:React.FC = ({ articles, next `} {!prevPage ? null : ( - + )}
@@ -41,7 +41,7 @@ export const ArticleCardList:React.FC = ({ articles, next
{!nextPage ? null : ( - + )} ) diff --git a/src/components/Pager/index.tsx b/src/components/Pager/index.tsx new file mode 100644 index 00000000..561d817d --- /dev/null +++ b/src/components/Pager/index.tsx @@ -0,0 +1,34 @@ +const text = ['↑', '↓'] +const linkText = ['Предыдущая страница', 'Следующая страница'] + +type Position = 'top' | 'bottom' +const i = (type: Position) => type === 'top' + ? 0 + : 1 + +export type PagerProps = { + url: string + position: Position +} + +export const Pager: React.FC = ({ url, position }) => ( +
+ + + + {text[i(position)]} + + + {linkText[i(position)]} +
+) diff --git a/src/components/Paginator.js b/src/components/Paginator.js deleted file mode 100644 index 30f0de90..00000000 --- a/src/components/Paginator.js +++ /dev/null @@ -1,21 +0,0 @@ -const React = require('react') - -const text = ['↑', '↓'] -const linkText = ['Предыдущая страница', 'Следующая страница'] - -const i = type => type === 'top' - ? 0 - : 1 - -const Icon = ({children}) => ( - {children} -) - -const Paginator = ({url, type}) => ( -
- {text[i(type)]} - {linkText[i(type)]} -
-) - -module.exports = Paginator diff --git a/src/style/components/Paginator.scss b/src/style/components/Paginator.scss deleted file mode 100644 index c30feff5..00000000 --- a/src/style/components/Paginator.scss +++ /dev/null @@ -1,10 +0,0 @@ -.Paginator { - text-align: center; - font-size: var(--font-size-second); - - margin: var(--single-margin) 0; -} - -.Paginator-Icon { - margin: 0 10px; -} \ No newline at end of file diff --git a/src/style/style.scss b/src/style/style.scss index fde37379..fc2389e2 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -6,7 +6,6 @@ @import "components/schedule-table"; @import "components/footer-links"; @import "components/Article"; -@import "components/Paginator"; @import "components/album"; @import "components/ArticleTags"; From 0ba0d74ea7c34fb6a1068bb0891c6a02e12ddad4 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 17:10:53 +0300 Subject: [PATCH 02/12] pager uses next link --- src/components/Pager/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Pager/index.tsx b/src/components/Pager/index.tsx index 561d817d..3a53e965 100644 --- a/src/components/Pager/index.tsx +++ b/src/components/Pager/index.tsx @@ -1,3 +1,5 @@ +import Link from 'next/link' + const text = ['↑', '↓'] const linkText = ['Предыдущая страница', 'Следующая страница'] @@ -29,6 +31,8 @@ export const Pager: React.FC = ({ url, position }) => ( {text[i(position)]} - {linkText[i(position)]} + + {linkText[i(position)]} + ) From 4bf3b55557b7a06d34c17703ee9ff4542712a440 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 17:12:22 +0300 Subject: [PATCH 03/12] pager styles jsx to css --- src/components/Pager/index.tsx | 18 ++++-------------- src/components/Pager/styles.css | 9 +++++++++ 2 files changed, 13 insertions(+), 14 deletions(-) create mode 100644 src/components/Pager/styles.css diff --git a/src/components/Pager/index.tsx b/src/components/Pager/index.tsx index 3a53e965..fb7ae07d 100644 --- a/src/components/Pager/index.tsx +++ b/src/components/Pager/index.tsx @@ -1,3 +1,5 @@ +import './styles.css' + import Link from 'next/link' const text = ['↑', '↓'] @@ -14,20 +16,8 @@ export type PagerProps = { } export const Pager: React.FC = ({ url, position }) => ( -
- - - +
+ {text[i(position)]} diff --git a/src/components/Pager/styles.css b/src/components/Pager/styles.css new file mode 100644 index 00000000..fd3f6d8e --- /dev/null +++ b/src/components/Pager/styles.css @@ -0,0 +1,9 @@ +.pager { + text-align: center; + margin-top: var(--size-m); + margin-bottom: var(--size-m); +} + +.pager .icon { + margin: 0 var(--size-s); +} From 843ade58ade5490dcf02a8ed1f20090774a0d979 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 17:42:55 +0300 Subject: [PATCH 04/12] disable visited link --- src/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/style.css b/src/style.css index 1a1b9171..8fbc6450 100644 --- a/src/style.css +++ b/src/style.css @@ -149,9 +149,9 @@ a:active { border-width: 2px; } -a:visited { +/* a:visited { color: #a4059c; -} +} */ a.invisible { border-bottom: none; From 41467aa4472145856ce6a13810f35402805089e7 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 17:43:37 +0300 Subject: [PATCH 05/12] add Button component; pager updated --- src/components/ArticleCardList.tsx | 11 ++++----- src/components/Button/index.tsx | 25 ++++++++++++++++++++ src/components/Button/styles.css | 25 ++++++++++++++++++++ src/components/Pager/index.tsx | 38 ++++++++++++------------------ src/components/Pager/styles.css | 9 ------- src/style.css | 4 ++++ 6 files changed, 73 insertions(+), 39 deletions(-) create mode 100644 src/components/Button/index.tsx create mode 100644 src/components/Button/styles.css delete mode 100644 src/components/Pager/styles.css diff --git a/src/components/ArticleCardList.tsx b/src/components/ArticleCardList.tsx index d87a5471..c02a264a 100644 --- a/src/components/ArticleCardList.tsx +++ b/src/components/ArticleCardList.tsx @@ -18,10 +18,6 @@ export const ArticleCardList:React.FC = ({ articles, next } `} - {!prevPage ? null : ( - - )} -
{articles.map((article, i) => { const preview = { @@ -40,8 +36,9 @@ export const ArticleCardList:React.FC = ({ articles, next })}
- {!nextPage ? null : ( - - )} +
) diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx new file mode 100644 index 00000000..39cc8faa --- /dev/null +++ b/src/components/Button/index.tsx @@ -0,0 +1,25 @@ +import './styles.css' +import Link from 'next/link' + +export type ButtonProps = { + style?: React.CSSProperties + href?: string +} + +export const Button: React.FC = props => { + if (props.href) { + return ( + + + {props.children} + + + ) + } + + return ( + + ) +} \ No newline at end of file diff --git a/src/components/Button/styles.css b/src/components/Button/styles.css new file mode 100644 index 00000000..b26b105f --- /dev/null +++ b/src/components/Button/styles.css @@ -0,0 +1,25 @@ +.button { + border: none; + font-size: var(--font-size-default); + + text-align: center; + margin-top: var(--size-m); + margin-bottom: var(--size-m); + margin-left: 1px; + margin-right: 1px; + + padding: var(--size-s) var(--size-m); + border-radius: 100px; + + background-color: var(--color-back); + box-shadow: 0 0 0 1px rgba(27, 51, 88, 0.15); + + transition: box-shadow 150ms; + + outline: none; + cursor: pointer; +} + +.button:hover { + box-shadow: 0 4px 20px rgba(27, 51, 88, 0.15) +} diff --git a/src/components/Pager/index.tsx b/src/components/Pager/index.tsx index fb7ae07d..d349add5 100644 --- a/src/components/Pager/index.tsx +++ b/src/components/Pager/index.tsx @@ -1,28 +1,20 @@ -import './styles.css' - -import Link from 'next/link' - -const text = ['↑', '↓'] -const linkText = ['Предыдущая страница', 'Следующая страница'] - -type Position = 'top' | 'bottom' -const i = (type: Position) => type === 'top' - ? 0 - : 1 +import { Block } from '../Block' +import { Button } from '../Button' +import { Spacer } from '../Spacer' export type PagerProps = { - url: string - position: Position + nextHref: string | null + prevHref: string | null } -export const Pager: React.FC = ({ url, position }) => ( -
- - {text[i(position)]} - - - - {linkText[i(position)]} - -
+export const Pager: React.FC = props => ( + + {!props.prevHref ? null : ( + + )} + + {!props.nextHref ? null : ( + + )} + ) diff --git a/src/components/Pager/styles.css b/src/components/Pager/styles.css deleted file mode 100644 index fd3f6d8e..00000000 --- a/src/components/Pager/styles.css +++ /dev/null @@ -1,9 +0,0 @@ -.pager { - text-align: center; - margin-top: var(--size-m); - margin-bottom: var(--size-m); -} - -.pager .icon { - margin: 0 var(--size-s); -} diff --git a/src/style.css b/src/style.css index 8fbc6450..5df5193a 100644 --- a/src/style.css +++ b/src/style.css @@ -73,6 +73,10 @@ --size-l: 2em; --size-xl: 5em; + /* EFFECTS */ + --radius: 10px; + --shadow: 0 0 0 1px rgba(27, 51, 88, 0.15); + /* MARGINS */ --small-margin: 0.2em; --half-margin: 0.5em; From 55b4ce14d3746d8c74595fe8f7a4a69820e46b49 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 19:49:46 +0300 Subject: [PATCH 06/12] Pager updated --- src/components/Pager/index.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Pager/index.tsx b/src/components/Pager/index.tsx index d349add5..f99889d0 100644 --- a/src/components/Pager/index.tsx +++ b/src/components/Pager/index.tsx @@ -1,20 +1,20 @@ -import { Block } from '../Block' +import { Block, BlockProps } from '../Block' import { Button } from '../Button' import { Spacer } from '../Spacer' -export type PagerProps = { +export type PagerProps = Omit & { nextHref: string | null prevHref: string | null } -export const Pager: React.FC = props => ( - - {!props.prevHref ? null : ( - +export const Pager: React.FC = ({ prevHref, nextHref, ...props }) => ( + + {!prevHref ? null : ( + )} - {!props.nextHref ? null : ( - + {!nextHref ? null : ( + )} ) From 3631216be4c223895a3949335e2147263c455433 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 20:31:07 +0300 Subject: [PATCH 07/12] article card list updated --- src/components/App/index.tsx | 6 +- src/components/ArticleCard/index.tsx | 90 +-------------------------- src/components/ArticleCard/styles.css | 77 +++++++++++++++++++++++ src/components/ArticleCardList.tsx | 24 +++---- src/components/CardGrid/index.tsx | 13 ++++ src/components/CardGrid/styles.css | 13 ++++ src/components/Wrapper/index.tsx | 7 ++- src/style.css | 4 +- src/style/content.scss | 34 +++++----- src/types.ts | 6 ++ 10 files changed, 152 insertions(+), 122 deletions(-) create mode 100644 src/components/ArticleCard/styles.css create mode 100644 src/components/CardGrid/index.tsx create mode 100644 src/components/CardGrid/styles.css diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index cac1472e..d337d2e3 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -38,14 +38,14 @@ export const App: React.FC = props => { /> )} > -
{props.children} -
+
- + {/* */} ) diff --git a/src/components/ArticleCard/index.tsx b/src/components/ArticleCard/index.tsx index 82191af1..a96491b3 100644 --- a/src/components/ArticleCard/index.tsx +++ b/src/components/ArticleCard/index.tsx @@ -1,12 +1,8 @@ -import * as React from 'react' +import './styles.css' + import cx from 'classnames' import { Date } from './Date' - -interface IImage { - alt: string - src: string - srcSet: Array<{ url: string, density: number }> -} +import { IImage } from 'src/types' export interface IArticleCardProps { article: any @@ -15,86 +11,6 @@ export interface IArticleCardProps { export const ArticleCard: React.FC = ({ article, ...props }) => (
- -
{!props.preview ? null : ( diff --git a/src/components/ArticleCard/styles.css b/src/components/ArticleCard/styles.css new file mode 100644 index 00000000..551ed10c --- /dev/null +++ b/src/components/ArticleCard/styles.css @@ -0,0 +1,77 @@ +.ArticleCard { + --article-card-width: 100%; + --article-card-image-height: 15em; + --article-card-margin: var(--double-margin) var(--single-margin); + + display: flex; + flex-direction: column; + + /* margin: var(--article-card-margin); */ + width: var(--article-card-width); + /* min-width: 15em; */ + /* max-width: 20em; */ + + border-radius: 10px; + + box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); + overflow: hidden; +} + +.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 { + z-index: 1000; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + + height: 5em; + + padding: 0.75em 1em; +} + +.ArticleCard: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)) { + .ArticleCard { + --article-card-image-height: 12em; + } +} + +/* Mobile */ +@media (max-width: 31.25em) { + .ArticleCard { + --article-card-width: 100%; + --article-card-margin: var(--single-margin) 0; + } +} diff --git a/src/components/ArticleCardList.tsx b/src/components/ArticleCardList.tsx index c02a264a..2af451d8 100644 --- a/src/components/ArticleCardList.tsx +++ b/src/components/ArticleCardList.tsx @@ -1,5 +1,6 @@ import { ArticleCard } from './ArticleCard' import { Pager } from './Pager' +import { CardGrid } from './CardGrid' export interface IArticleCardListProps { articles: any[] @@ -7,18 +8,13 @@ export interface IArticleCardListProps { prevPage: number | null } -export const ArticleCardList:React.FC = ({ articles, nextPage, prevPage }) => ( -
- - -
+export const ArticleCardList: React.FC = ({ articles, nextPage, prevPage }) => ( + <> + {articles.map((article, i) => { const preview = { alt: article.title, @@ -34,11 +30,11 @@ export const ArticleCardList:React.FC = ({ articles, next /> ) })} -
+ -
+ ) diff --git a/src/components/CardGrid/index.tsx b/src/components/CardGrid/index.tsx new file mode 100644 index 00000000..2357d8d3 --- /dev/null +++ b/src/components/CardGrid/index.tsx @@ -0,0 +1,13 @@ +import './styles.css' + +export type CardGridProps = { + style?: React.CSSProperties +} + +export const CardGrid: React.FC = props => { + return ( +
+ {props.children} +
+ ) +} diff --git a/src/components/CardGrid/styles.css b/src/components/CardGrid/styles.css new file mode 100644 index 00000000..e88395d0 --- /dev/null +++ b/src/components/CardGrid/styles.css @@ -0,0 +1,13 @@ +.card-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + 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) { +} diff --git a/src/components/Wrapper/index.tsx b/src/components/Wrapper/index.tsx index 96c643e5..7105591c 100644 --- a/src/components/Wrapper/index.tsx +++ b/src/components/Wrapper/index.tsx @@ -21,11 +21,16 @@ export const Wrapper: React.FC = props => ( .content { flex: 1; } + + main { + display: flex; + justify-content: center; + } `} {props.header} -
+
{props.children}
diff --git a/src/style.css b/src/style.css index 5df5193a..285c06f9 100644 --- a/src/style.css +++ b/src/style.css @@ -23,10 +23,12 @@ --tablet-min-width: 31.25em; --tablet-max-width: 64em; + /* CONTENT */ --content-full: 100%; --content-wide: 90%; --content-semi-wide: 70%; --content-thin: 60%; + --content-width: var(--content-full); --embed-video-ratio: 56.25%; @@ -71,7 +73,7 @@ --size-s: 0.5em; --size-m: 1em; --size-l: 2em; - --size-xl: 5em; + --size-xl: 3em; /* EFFECTS */ --radius: 10px; diff --git a/src/style/content.scss b/src/style/content.scss index 3889e7fa..437e3889 100644 --- a/src/style/content.scss +++ b/src/style/content.scss @@ -1,25 +1,27 @@ .content { - margin: 0 auto 1em; + // margin: 0 auto 1em; - &.content_full { - width: var(--content-full); - } + width: var(--content-width); +} - &.content_wide { - width: var(--content-wide); - } +.content_full { + --content-width: var(--content-full); +} - &.content_semi-wide { - width: var(--content-semi-wide); - } +.content_wide { + --content-width: var(--content-wide); +} - &.content_thin { - width: var(--content-thin); - } +.content_semi-wide { + --content-width: var(--content-semi-wide); +} - &.content--padding-top--menu { - padding-top: var(--menu-thickness); - } +.content_thin { + --content-width: var(--content-thin); +} + +.content--padding-top--menu { + padding-top: var(--menu-thickness); } // Animation on load diff --git a/src/types.ts b/src/types.ts index 7bd31cff..5ca42726 100644 --- a/src/types.ts +++ b/src/types.ts @@ -23,3 +23,9 @@ export interface IMeta { twitterSite: string twitterCreator: string } + +export interface IImage { + alt: string + src: string + srcSet: Array<{ url: string, density: number }> +} From b46bc1234c753787797af5a2943041b18b267237 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 20:33:13 +0300 Subject: [PATCH 08/12] effect css vars changed --- src/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/style.css b/src/style.css index 285c06f9..00006d65 100644 --- a/src/style.css +++ b/src/style.css @@ -76,8 +76,8 @@ --size-xl: 3em; /* EFFECTS */ - --radius: 10px; - --shadow: 0 0 0 1px rgba(27, 51, 88, 0.15); + --radius: 15px; + --shadow: 0 0 15px rgba(27, 51, 88, 0.15); /* MARGINS */ --small-margin: 0.2em; From 0b47b12d27be5e7cd2d254bad2eed58c2bb88996 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 20:33:30 +0300 Subject: [PATCH 09/12] article card style updated --- src/components/ArticleCard/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ArticleCard/styles.css b/src/components/ArticleCard/styles.css index 551ed10c..0994537c 100644 --- a/src/components/ArticleCard/styles.css +++ b/src/components/ArticleCard/styles.css @@ -11,9 +11,9 @@ /* min-width: 15em; */ /* max-width: 20em; */ - border-radius: 10px; + border-radius: var(--radius); + box-shadow: var(--shadow); - box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); overflow: hidden; } From 93d9021ac0bb4e548bc2ae05ff6b130ca10de6be Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 20:35:16 +0300 Subject: [PATCH 10/12] article card uses next link --- src/components/ArticleCard/index.tsx | 47 +++++++++++++++------------- 1 file changed, 25 insertions(+), 22 deletions(-) diff --git a/src/components/ArticleCard/index.tsx b/src/components/ArticleCard/index.tsx index a96491b3..a164a47c 100644 --- a/src/components/ArticleCard/index.tsx +++ b/src/components/ArticleCard/index.tsx @@ -3,6 +3,7 @@ import './styles.css' import cx from 'classnames' import { Date } from './Date' import { IImage } from 'src/types' +import Link from 'next/link' export interface IArticleCardProps { article: any @@ -11,29 +12,31 @@ export interface IArticleCardProps { export const ArticleCard: React.FC = ({ article, ...props }) => (
- -
- {!props.preview ? null : ( - - {props.preview.alt} `${url} ${density}x`).join(' ')} - /> - - )} -
+ + +
+ {!props.preview ? null : ( + + {props.preview.alt} `${url} ${density}x`).join(' ')} + /> + + )} +
- + +
) From 168ebb81ce672c76f1b5271b39c08481b2dda30f Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 23:48:28 +0300 Subject: [PATCH 11/12] article page size is 12 --- next.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/next.config.js b/next.config.js index 2f3110f1..536139e2 100644 --- a/next.config.js +++ b/next.config.js @@ -4,7 +4,7 @@ const withSass = require('@zeit/next-sass') module.exports = withCss(withSass({ exportTrailingSlash: true, env: { - APP_ARTICLES_PAGE_SIZE: 15, + APP_ARTICLES_PAGE_SIZE: 12, }, webpack(config) { config.resolve.modules.push(__dirname) From 5cf2dbf8f7d8f18f495eedbbbfd194e569570718 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 23:49:24 +0300 Subject: [PATCH 12/12] article cards updated --- src/components/ArticleCard/index.tsx | 5 +-- src/components/ArticleCard/styles.css | 44 ++++++++++++++++++--------- src/components/ArticleCardList.tsx | 12 ++++++-- src/components/Button/styles.css | 4 +-- src/components/CardGrid/styles.css | 12 ++++++-- src/style.css | 4 ++- src/types.ts | 9 ++++++ 7 files changed, 65 insertions(+), 25 deletions(-) diff --git a/src/components/ArticleCard/index.tsx b/src/components/ArticleCard/index.tsx index a164a47c..ba0e77da 100644 --- a/src/components/ArticleCard/index.tsx +++ b/src/components/ArticleCard/index.tsx @@ -6,12 +6,13 @@ 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 index 0994537c..db9fb096 100644 --- a/src/components/ArticleCard/styles.css +++ b/src/components/ArticleCard/styles.css @@ -1,20 +1,20 @@ .ArticleCard { - --article-card-width: 100%; --article-card-image-height: 15em; - --article-card-margin: var(--double-margin) var(--single-margin); display: flex; flex-direction: column; - /* margin: var(--article-card-margin); */ - width: var(--article-card-width); - /* min-width: 15em; */ - /* max-width: 20em; */ - 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 { @@ -42,6 +42,8 @@ } .ArticleCard-body { + position: relative; + z-index: 1000; display: flex; flex-direction: column; @@ -50,15 +52,29 @@ height: 5em; - padding: 0.75em 1em; + 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: 105%; - height: 105%; - - top: -2.5%; - left: -2.5%; + width: 104%; + height: 104%; + + top: -2%; + left: -2%; } /* Tablet */ @@ -71,7 +87,5 @@ /* Mobile */ @media (max-width: 31.25em) { .ArticleCard { - --article-card-width: 100%; - --article-card-margin: var(--single-margin) 0; } } diff --git a/src/components/ArticleCardList.tsx b/src/components/ArticleCardList.tsx index 2af451d8..0b5655bd 100644 --- a/src/components/ArticleCardList.tsx +++ b/src/components/ArticleCardList.tsx @@ -1,14 +1,15 @@ import { ArticleCard } from './ArticleCard' import { Pager } from './Pager' import { CardGrid } from './CardGrid' +import { IArticle } from 'src/types' export interface IArticleCardListProps { - articles: any[] + articles: IArticle[] nextPage: number | null prevPage: number | null } -export const ArticleCardList: React.FC = ({ articles, nextPage, prevPage }) => ( +export const ArticleCardList: React.FC = ({ articles, nextPage, prevPage, ...props }) => ( <> = ({ articles, nex srcSet: article.preview.set, } + const gridColumn = article.featured ? 'span 2' : 'auto' + return ( ) })} diff --git a/src/components/Button/styles.css b/src/components/Button/styles.css index b26b105f..84708c32 100644 --- a/src/components/Button/styles.css +++ b/src/components/Button/styles.css @@ -12,7 +12,7 @@ border-radius: 100px; background-color: var(--color-back); - box-shadow: 0 0 0 1px rgba(27, 51, 88, 0.15); + box-shadow: 0 0 0 1px var(--color-shadow); transition: box-shadow 150ms; @@ -21,5 +21,5 @@ } .button:hover { - box-shadow: 0 4px 20px rgba(27, 51, 88, 0.15) + box-shadow: var(--shadow-active); } diff --git a/src/components/CardGrid/styles.css b/src/components/CardGrid/styles.css index e88395d0..4fccc77c 100644 --- a/src/components/CardGrid/styles.css +++ b/src/components/CardGrid/styles.css @@ -1,7 +1,10 @@ .card-grid { + --min-cell-size: 240px; display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-gap: var(--size-xl) var(--size-l); + /* grid-template-columns: 1fr 1fr 1fr; */ + grid-template-columns: repeat(auto-fill, minmax(var(--min-cell-size), 1fr)); + grid-auto-rows: 1fr; + grid-gap: var(--size-xl) var(--size-l); } /* .card-grid > *:first-child { @@ -10,4 +13,9 @@ } */ @media screen and (max-width: 31.25em) { + .card-grid { + grid-template-columns: 1fr; + /* grid-template-columns: auto; */ + grid-gap: var(--size-l) 0; + } } diff --git a/src/style.css b/src/style.css index 00006d65..da9c3217 100644 --- a/src/style.css +++ b/src/style.css @@ -55,6 +55,7 @@ --magenta-color: rgb(214, 39, 246); --red-color: rgb(246, 27, 20); --gray-color: rgb(153, 154, 160); + --color-shadow: rgba(27, 51, 88, 0.15); --inactive-link-color: var(--light-color); @@ -77,7 +78,8 @@ /* EFFECTS */ --radius: 15px; - --shadow: 0 0 15px rgba(27, 51, 88, 0.15); + --shadow: 0 0 8px var(--color-shadow); + --shadow-active: 0 4px 16px var(--color-shadow); /* MARGINS */ --small-margin: 0.2em; diff --git a/src/types.ts b/src/types.ts index 5ca42726..b781be23 100644 --- a/src/types.ts +++ b/src/types.ts @@ -28,4 +28,13 @@ export interface IImage { alt: string src: string srcSet: Array<{ url: string, density: number }> + set: any // TODO +} + +export interface IArticle { + id: string + featured: boolean + url: string + title: string + preview: IImage }