chore: add article header styles

author: Armand Philippot <git@armandphilippot.com> 2022-01-07 18:51:02 +0100
committer: Armand Philippot <git@armandphilippot.com> 2022-01-07 19:37:26 +0100
commit: 9a85c175bf59b7a360f09da23a3ac83293838570 (patch)
tree: c4e5385a3b2fd618cabd5356573aff14602c7d20 /src
parent: 06d0b7bb010f5ac1b3a0c8117b274a700f7266fe (diff)
5 files changed, 71 insertions, 19 deletions
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 (
       <>
+        <Head>
+          <script type="application/ld+json">{}</script>
+        </Head>
         <li className={styles.item}>
           <Link href="/">
             <a>{t`Home`}</a>
           </Link>
         </li>
-        {isBlog && <li className={styles.item}>{t`Blog`}</li>}
         {(isArticle || isThematic || isSubject) && (
           <>
             <li className={styles.item}>
@@ -28,12 +30,8 @@ const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => {
                 <a>{t`Blog`}</a>
               </Link>
             </li>
-            <li className={styles.item}>{pageTitle}</li>
           </>
         )}
-        {!isBlog && !isArticle && !isThematic && !isSubject && (
-          <li className={styles.item}>{pageTitle}</li>
-        )}
       </>
     );
   };
@@ -41,7 +39,7 @@ const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => {
   return (
     <>
       {!isHome && (
-        <nav>
+        <nav className={styles.wrapper}>
           <span className="screen-reader-text">{t`You are here:`}</span>
           <ol className={styles.list}>{getItems()}</ol>
         </nav>
diff --git a/src/components/PostHeader/PostHeader.module.scss b/src/components/PostHeader/PostHeader.module.scss
index f013651..9997ec3 100644
--- a/src/components/PostHeader/PostHeader.module.scss
+++ b/src/components/PostHeader/PostHeader.module.scss
@@ -1,7 +1,61 @@
-.meta {
-  font-size: var(--font-size-sm);
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.wrapper {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    minmax(0, 1fr);
+  align-items: center;
+  max-width: 100%;
+  margin-bottom: var(--spacing-md);
+  background: var(--color-bg-secondary);
+  border-top: fun.convert-px(3) solid var(--color-border-lighter);
+  border-bottom: fun.convert-px(3) solid var(--color-border-lighter);
+}
+
+.body {
+  grid-column: 2;
+  display: flex;
+  flex-flow: row wrap;
+  margin: fun.convert-px(-3) calc(var(--spacing-md) * -1);
+  background: var(--color-bg);
+  border-left: fun.convert-px(3) solid var(--color-border-lighter);
+  border-right: fun.convert-px(3) solid var(--color-border-lighter);
 }
 
-.label {
-  font-weight: inherit;
+.title {
+  flex: 0 0 100%;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  margin: 0;
+  padding: 0 var(--spacing-md) 0;
+  position: relative;
+  text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-lighter);
+
+  &::before,
+  &::after {
+    content: "";
+    width: 100%;
+    height: fun.convert-px(3);
+    background: var(--color-primary-dark);
+  }
+}
+
+.cover {
+  display: block;
+  width: fun.convert-px(50);
+  height: fun.convert-px(50);
+  position: relative;
+  margin-right: var(--spacing-sm);
+}
+
+.intro {
+  margin: var(--spacing-sm) 0 0;
+  padding: 0 var(--spacing-md);
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
 }
diff --git a/src/components/PostMeta/PostMeta.module.scss b/src/components/PostMeta/PostMeta.module.scss
index ac25828..81563d0 100644
--- a/src/components/PostMeta/PostMeta.module.scss
+++ b/src/components/PostMeta/PostMeta.module.scss
@@ -20,8 +20,8 @@
 
   &--single {
     flex-flow: column wrap;
-    margin: 0;
-    padding: 0 var(--spacing-md);
+    margin: var(--spacing-sm) 0 0;
+    padding: 0 var(--spacing-md) 0;
 
     @include mix.media("screen") {
       @include mix.dimensions("xs") {
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
index 667f913..cbb9ed1 100644
--- a/src/styles/pages/Page.module.scss
+++ b/src/styles/pages/Page.module.scss
@@ -36,7 +36,7 @@
   }
 
   &--no-comments {
-    margin-bottom: var(--spacing-md);
+    margin-bottom: var(--spacing-xl);
   }
 }
 
@@ -48,11 +48,12 @@
       grid-column: 1;
       grid-row: 2 / 4;
       align-self: stretch;
+      justify-self: end;
       padding: 0 0 0 var(--spacing-lg);
 
       ol:first-of-type {
         font-size: var(--font-size-sm);
-        font-weight: 600;
+        font-weight: 500;
       }
     }
   }
@@ -85,7 +86,7 @@
     minmax(0, 1fr);
   align-items: center;
   margin: var(--spacing-md) 0 0;
-  padding: var(--spacing-md) 0;
+  padding: var(--spacing-md) 0 var(--spacing-lg);
   background: var(--color-bg-secondary);
   border-top: fun.convert-px(3) solid var(--color-border-lighter);
author	Armand Philippot <git@armandphilippot.com>	2022-01-07 18:51:02 +0100
committer	Armand Philippot <git@armandphilippot.com>	2022-01-07 19:37:26 +0100
commit	9a85c175bf59b7a360f09da23a3ac83293838570 (patch)
tree	c4e5385a3b2fd618cabd5356573aff14602c7d20 /src
parent	06d0b7bb010f5ac1b3a0c8117b274a700f7266fe (diff)