From 9a85c175bf59b7a360f09da23a3ac83293838570 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 7 Jan 2022 18:51:02 +0100 Subject: chore: add article header styles --- src/components/Breadcrumb/Breadcrumb.module.scss | 5 +- src/components/Breadcrumb/Breadcrumb.tsx | 12 ++--- src/components/PostHeader/PostHeader.module.scss | 62 ++++++++++++++++++++++-- src/components/PostMeta/PostMeta.module.scss | 4 +- 4 files changed, 67 insertions(+), 16 deletions(-) (limited to 'src/components') diff --git a/src/components/Breadcrumb/Breadcrumb.module.scss b/src/components/Breadcrumb/Breadcrumb.module.scss index b469ee0..98a11a4 100644 --- a/src/components/Breadcrumb/Breadcrumb.module.scss +++ b/src/components/Breadcrumb/Breadcrumb.module.scss @@ -1,4 +1,5 @@ @use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; @use "@styles/abstracts/placeholders"; .wrapper { @@ -7,9 +8,7 @@ minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch) minmax(0, 1fr); align-items: center; - padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) - var(--spacing-lg); - border-bottom: fun.convert-px(3) solid var(--color-border-lighter); + padding: var(--spacing-md) 0; } .list { diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx index e090a4f..77e7c08 100644 --- a/src/components/Breadcrumb/Breadcrumb.tsx +++ b/src/components/Breadcrumb/Breadcrumb.tsx @@ -1,4 +1,5 @@ import { t } from '@lingui/macro'; +import Head from 'next/head'; import Link from 'next/link'; import { useRouter } from 'next/router'; import styles from './Breadcrumb.module.scss'; @@ -7,7 +8,6 @@ const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => { const router = useRouter(); const isHome = router.pathname === '/'; - const isBlog = router.pathname === '/blog'; const isArticle = router.pathname.includes('/article/'); const isThematic = router.pathname.includes('/thematique/'); const isSubject = router.pathname.includes('/sujet/'); @@ -15,12 +15,14 @@ const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => { const getItems = () => { return ( <> + + +
  • {t`Home`}
    • - {isBlog &&
  • {t`Blog`}
    • } {(isArticle || isThematic || isSubject) && ( <>
  • @@ -28,12 +30,8 @@ const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => { {t`Blog`}
    • -
  • {pageTitle}
    • )} - {!isBlog && !isArticle && !isThematic && !isSubject && ( -
  • {pageTitle}
    • - )} ); }; @@ -41,7 +39,7 @@ const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => { return ( <> {!isHome && ( -