chore: move Main grid to its children

This way I can use full width background for some blocks.

22 files changed, 275 insertions, 117 deletions

diff --git a/src/components/Breadcrumb/Breadcrumb.module.scss b/src/components/Breadcrumb/Breadcrumb.module.scss
index bfba21f..b469ee0 100644
--- a/src/components/Breadcrumb/Breadcrumb.module.scss
+++ b/src/components/Breadcrumb/Breadcrumb.module.scss
@@ -1,13 +1,26 @@
+@use "@styles/abstracts/functions" as fun;
 @use "@styles/abstracts/placeholders";
 
+.wrapper {
+  display: grid;
+  grid-template-columns:
+    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);
+}
+
 .list {
   @extend %reset-ordered-list;
 
+  grid-column: 2;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   gap: var(--spacing-2xs);
-  margin: 0 0 var(--spacing-md) 0;
+  margin: 0;
   font-size: var(--font-size-sm);
 }
 
diff --git a/src/components/Main/Main.module.scss b/src/components/Main/Main.module.scss
deleted file mode 100644
index a513f73..0000000
--- a/src/components/Main/Main.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.wrapper {
-  display: grid;
-  grid-template-columns:
-    minmax(0, 1fr) min(calc(50vw - var(--spacing-md)), 40ch) min(
-      calc(50vw - var(--spacing-md)),
-      40ch
-    )
-    minmax(0, 1fr);
-  align-items: center;
-  padding: var(--spacing-md) 0;
-}
-
-.body {
-  grid-column: 2 / 4;
-}
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index 8b2e822..ad270f6 100644
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@@ -1,12 +1,7 @@
 import { FunctionComponent } from 'react';
-import styles from './Main.module.scss';
 
 const Main: FunctionComponent = ({ children }) => {
-  return (
-    <main id="main" className={styles.wrapper}>
-      <div className={styles.body}>{children}</div>
-    </main>
-  );
+  return <main id="main">{children}</main>;
 };
 
 export default Main;
diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss
index 471b172..8a6c083 100644
--- a/src/components/PostsList/PostsList.module.scss
+++ b/src/components/PostsList/PostsList.module.scss
@@ -1,9 +1,33 @@
 @use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/placeholders";
 
+.section {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    minmax(0, 1fr);
+  align-items: first baseline;
+}
+
+.year {
+  grid-column: 2;
+  margin-bottom: 0;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-column: 1;
+      justify-self: end;
+      position: sticky;
+      top: 0;
+      margin-right: var(--spacing-lg);
+    }
+  }
+}
+
 .list {
   @extend %reset-ordered-list;
 
+  grid-column: 2;
   margin: 0 auto var(--spacing-md);
 }
 
@@ -14,19 +38,3 @@ li.item {
     margin-top: var(--spacing-sm);
   }
 }
-
-.section {
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      display: grid;
-      grid-template-columns: max-content minmax(0, 1fr);
-      align-items: first baseline;
-      gap: var(--spacing-md);
-    }
-  }
-}
-
-.year {
-  position: sticky;
-  top: 0;
-}
diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx
index 51698e6..3354dd5 100644
--- a/src/components/PostsList/PostsList.tsx
+++ b/src/components/PostsList/PostsList.tsx
@@ -21,7 +21,12 @@ const PostsList = ({
     return years.map((year) => {
       return (
         <section key={year} className={styles.section}>
-          {showYears && <h2 className={styles.year}>{year}</h2>}
+          {showYears && (
+            <h2 className={styles.year}>
+              <span className="screen-reader-text">{t`Published in`} </span>
+              {year}
+            </h2>
+          )}
           <ol className={styles.list}>
             {posts[year].map((post) => {
               return (
diff --git a/src/components/Sharing/Sharing.module.scss b/src/components/Sharing/Sharing.module.scss
index 3186675..fe13125 100644
--- a/src/components/Sharing/Sharing.module.scss
+++ b/src/components/Sharing/Sharing.module.scss
@@ -2,11 +2,18 @@
 @use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/placeholders";
 
+.wrapper {
+  max-height: 100vh;
+  padding-bottom: var(--spacing-sm);
+  position: sticky;
+  top: 0;
+  overflow-y: auto;
+}
+
 .list {
   @extend %flex-list;
 
   gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-md);
 }
 
 .link {
@@ -55,9 +62,8 @@
     filter: drop-shadow(
       #{fun.convert-px(1)} #{fun.convert-px(1)} #{fun.convert-px(1)} hsl(0, 0%, 0%)
     );
-    width: 2ex;
-    height: 2ex;
-    margin-right: var(--spacing-2xs);
+    width: fun.convert-px(30);
+    height: fun.convert-px(30);
   }
 
   &--diaspora {
diff --git a/src/components/Sharing/Sharing.tsx b/src/components/Sharing/Sharing.tsx
index 4bcad5d..4df8e0d 100644
--- a/src/components/Sharing/Sharing.tsx
+++ b/src/components/Sharing/Sharing.tsx
@@ -90,9 +90,10 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
         <li key={id}>
           <a
             href={sharingUrl}
+            title={name}
             className={`${styles.link} ${styles[linkModifier]}`}
           >
-            {name}
+            <span className="screen-reader-text">{name}</span>
           </a>
         </li>
       );
@@ -100,7 +101,7 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
   };
 
   return (
-    <div>
+    <div className={styles.wrapper}>
       <h2>{t`Share`}</h2>
       <ul className={styles.list}>{getItems()}</ul>
     </div>
diff --git a/src/components/ToC/ToC.module.scss b/src/components/ToC/ToC.module.scss
new file mode 100644
index 0000000..27e79ad
--- /dev/null
+++ b/src/components/ToC/ToC.module.scss
@@ -0,0 +1,11 @@
+.wrapper {
+  max-height: 100vh;
+  padding-bottom: var(--spacing-sm);
+  position: sticky;
+  top: 0;
+  overflow-y: auto;
+}
+
+.list {
+  margin-bottom: 0;
+}
diff --git a/src/components/ToC/ToC.tsx b/src/components/ToC/ToC.tsx
index e7aafa5..3ab482c 100644
--- a/src/components/ToC/ToC.tsx
+++ b/src/components/ToC/ToC.tsx
@@ -2,6 +2,7 @@ import { t } from '@lingui/macro';
 import { Heading } from '@ts/types/app';
 import { slugify } from '@utils/helpers/slugify';
 import useHeadingsTree from '@utils/hooks/useHeadingsTree';
+import styles from './ToC.module.scss';
 
 const ToC = () => {
   const headingsTree = useHeadingsTree('article');
@@ -21,10 +22,10 @@ const ToC = () => {
   };
 
   return (
-    <>
+    <div className={styles.wrapper}>
       <h2>{title}</h2>
-      <ol>{getItems(headingsTree)}</ol>
-    </>
+      <ol className={styles.list}>{getItems(headingsTree)}</ol>
+    </div>
   );
 };
 
diff --git a/src/content b/src/content
-Subproject fbb25dbae6ba96dc7b8bf75caff9d331df548d5
+Subproject 0a46ff9e84354f57aef6d919b7fefbfae478f99
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index e8df85e..e906d12 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -18,6 +18,7 @@ import { useRouter } from 'next/router';
 import Prism from 'prismjs';
 import { ParsedUrlQuery } from 'querystring';
 import { useEffect } from 'react';
+import styles from '@styles/pages/Page.module.scss';
 
 const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
   const {
@@ -57,17 +58,20 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
         <title>{seo.title}</title>
         <meta name="description" content={seo.metaDesc} />
       </Head>
-      <article>
+      <article className={styles.article}>
         <PostHeader intro={intro} meta={meta} title={title} />
-        <aside>
+        <aside className={styles.toc}>
           <ToC />
         </aside>
-        <div dangerouslySetInnerHTML={{ __html: content }}></div>
+        <div
+          className={styles.body}
+          dangerouslySetInnerHTML={{ __html: content }}
+        ></div>
         <PostFooter subjects={subjects} />
-        <aside>
+        <aside className={styles.aside}>
           <Sharing title={title} excerpt={intro} />
         </aside>
-        <section>
+        <section className={styles.comments}>
           <h2>{t`Comments`}</h2>
           <CommentsList comments={comments} />
           <h2>{t`Leave a comment`}</h2>
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 2a58571..79b8631 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -12,6 +12,7 @@ import useSWRInfinite from 'swr/infinite';
 import { Button } from '@components/Buttons';
 import { getPublishedPosts } from '@services/graphql/queries';
 import PostHeader from '@components/PostHeader/PostHeader';
+import styles from '@styles/pages/Listing.module.scss';
 
 const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
   const getKey = (pageIndex: number, previousData: PostsListData) => {
@@ -47,15 +48,17 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
         <title>{seo.blog.title}</title>
         <meta name="description" content={seo.blog.description} />
       </Head>
-      <PostHeader title={t`Blog`} />
-      <PostsList data={data} showYears={true} />
-      {hasNextPage && (
-        <Button
-          isDisabled={isLoadingMore}
-          clickHandler={() => setSize(size + 1)}
-          position="center"
-        >{t`Load more?`}</Button>
-      )}
+      <div className={styles.wrapper}>
+        <PostHeader title={t`Blog`} />
+        <PostsList data={data} showYears={true} />
+        {hasNextPage && (
+          <Button
+            isDisabled={isLoadingMore}
+            clickHandler={() => setSize(size + 1)}
+            position="center"
+          >{t`Load more?`}</Button>
+        )}
+      </div>
     </>
   );
 };
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index ca82f5b..9eebdb2 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -10,6 +10,7 @@ import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { FormEvent, useState } from 'react';
 import PostHeader from '@components/PostHeader/PostHeader';
+import styles from '@styles/pages/Page.module.scss';
 
 const ContactPage: NextPageWithLayout = () => {
   const [name, setName] = useState('');
@@ -58,9 +59,11 @@ const ContactPage: NextPageWithLayout = () => {
         <title>{seo.contact.title}</title>
         <meta name="description" content={seo.contact.description} />
       </Head>
-      <article>
+      <article
+        className={`${styles.article} ${styles['article--no-comments']}`}
+      >
         <PostHeader title={title} intro={intro} />
-        <div>
+        <div className={styles.body}>
           <p>{t`All fields marked with * are required.`}</p>
           {status && <p>{status}</p>}
           <Form submitHandler={submitHandler}>
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 3faa941..8bd1b0c 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -8,6 +8,7 @@ import Head from 'next/head';
 import CVContent, { intro, meta } from '@content/pages/cv.mdx';
 import PostHeader from '@components/PostHeader/PostHeader';
 import { ArticleMeta } from '@ts/types/articles';
+import styles from '@styles/pages/Page.module.scss';
 
 const CV: NextPageWithLayout = () => {
   const dates = {
@@ -25,12 +26,14 @@ const CV: NextPageWithLayout = () => {
         <title>{seo.cv.title}</title>
         <meta name="description" content={seo.cv.description} />
       </Head>
-      <article>
+      <article
+        className={`${styles.article} ${styles['article--no-comments']}`}
+      >
         <PostHeader intro={intro} meta={pageMeta} title={meta.title} />
-        <aside>
+        <aside className={styles.toc}>
           <ToC />
         </aside>
-        <div>
+        <div className={styles.body}>
           <CVContent />
         </div>
       </article>
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index d8dfe49..ea98e20 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -11,6 +11,7 @@ import LegalNoticeContent, {
 } from '@content/pages/legal-notice.mdx';
 import PostHeader from '@components/PostHeader/PostHeader';
 import { ArticleMeta } from '@ts/types/articles';
+import styles from '@styles/pages/Page.module.scss';
 
 const LegalNotice: NextPageWithLayout = () => {
   const dates = {
@@ -28,12 +29,14 @@ const LegalNotice: NextPageWithLayout = () => {
         <title>{seo.legalNotice.title}</title>
         <meta name="description" content={seo.legalNotice.description} />
       </Head>
-      <article>
+      <article
+        className={`${styles.article} ${styles['article--no-comments']}`}
+      >
         <PostHeader intro={intro} meta={pageMeta} title={meta.title} />
-        <aside>
+        <aside className={styles.toc}>
           <ToC />
         </aside>
-        <div>
+        <div className={styles.body}>
           <LegalNoticeContent />
         </div>
       </article>
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index bcea544..c3387b4 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -6,7 +6,7 @@ import { SubjectProps } from '@ts/types/taxonomies';
 import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import { ParsedUrlQuery } from 'querystring';
-import styles from '@styles/pages/Subject.module.scss';
+import styles from '@styles/pages/Listing.module.scss';
 import {
   getAllSubjectsSlug,
   getSubjectBySlug,
@@ -28,19 +28,22 @@ const Subject: NextPageWithLayout<SubjectProps> = ({ subject }) => {
   };
 
   return (
-    <article>
+    <article className={styles.wrapper}>
       <PostHeader
         cover={subject.featuredImage}
         intro={subject.intro}
         meta={meta}
         title={subject.title}
       />
-      <div dangerouslySetInnerHTML={{ __html: subject.content }}></div>
+      <div
+        className={styles.body}
+        dangerouslySetInnerHTML={{ __html: subject.content }}
+      ></div>
       {subject.posts.length > 0 && (
-        <div>
+        <section className={styles.section}>
           <h2>{t`All posts in ${subject.title}`}</h2>
           <ol className={styles.list}>{getPostsList()}</ol>
-        </div>
+        </section>
       )}
     </article>
   );
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index dca8f25..fb0eda5 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -6,7 +6,7 @@ import { ThematicProps } from '@ts/types/taxonomies';
 import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import { ParsedUrlQuery } from 'querystring';
-import styles from '@styles/pages/Thematic.module.scss';
+import styles from '@styles/pages/Listing.module.scss';
 import {
   getAllThematicsSlug,
   getThematicBySlug,
@@ -23,14 +23,17 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
   };
 
   return (
-    <article>
+    <article className={styles.wrapper}>
       <PostHeader intro={thematic.intro} title={thematic.title} />
-      <div dangerouslySetInnerHTML={{ __html: thematic.content }}></div>
+      <div
+        className={styles.body}
+        dangerouslySetInnerHTML={{ __html: thematic.content }}
+      ></div>
       {thematic.posts.length > 0 && (
-        <div>
+        <section className={styles.section}>
           <h2>{t`All posts in ${thematic.title}`}</h2>
           <ol className={styles.list}>{getPostsList()}</ol>
-        </div>
+        </section>
       )}
     </article>
   );
diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss
index 3a8fd0e..49f483c 100644
--- a/src/styles/pages/Home.module.scss
+++ b/src/styles/pages/Home.module.scss
@@ -6,3 +6,14 @@
   gap: var(--spacing-md);
   margin: var(--spacing-md) 0;
 }
+
+.section {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    minmax(0, 1fr);
+
+  > * {
+    grid-column: 2;
+  }
+}
diff --git a/src/styles/pages/Listing.module.scss b/src/styles/pages/Listing.module.scss
new file mode 100644
index 0000000..1915148
--- /dev/null
+++ b/src/styles/pages/Listing.module.scss
@@ -0,0 +1,25 @@
+@use "@styles/abstracts/placeholders";
+
+.wrapper {
+  padding-bottom: var(--spacing-lg);
+}
+
+.list {
+  @extend %reset-ordered-list;
+}
+
+li.item {
+  margin: 0 0 var(--spacing-md) 0;
+}
+
+.body,
+.section {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    minmax(0, 1fr);
+
+  > * {
+    grid-column: 2;
+  }
+}
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
new file mode 100644
index 0000000..667f913
--- /dev/null
+++ b/src/styles/pages/Page.module.scss
@@ -0,0 +1,112 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.article {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    minmax(0, 1fr);
+  align-items: center;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-template-columns:
+        minmax(0, var(--spacing-xl)) min(
+          calc(100vw - calc(var(--spacing-md) * 2)),
+          80ch
+        )
+        minmax(0, 1fr);
+    }
+
+    @include mix.dimensions("lg") {
+      grid-template-columns:
+        minmax(0, 1fr) clamp(50ch, 50vw, 80ch)
+        minmax(0, 1fr);
+      column-gap: var(--spacing-2xl);
+    }
+  }
+
+  > header {
+    grid-column: 1 / -1;
+  }
+
+  > footer,
+  .body {
+    grid-column: 2;
+  }
+
+  &--no-comments {
+    margin-bottom: var(--spacing-md);
+  }
+}
+
+.toc {
+  grid-column: 2;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("lg") {
+      grid-column: 1;
+      grid-row: 2 / 4;
+      align-self: stretch;
+      padding: 0 0 0 var(--spacing-lg);
+
+      ol:first-of-type {
+        font-size: var(--font-size-sm);
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.aside {
+  grid-column: 2;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-column: 3;
+      grid-row: 2 / 5;
+      align-self: stretch;
+      max-width: min-content;
+      margin-left: var(--spacing-2xl);
+    }
+
+    @include mix.dimensions("lg") {
+      grid-row: 2 / 4;
+      margin-left: 0;
+    }
+  }
+}
+
+.comments {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    minmax(0, 1fr);
+  align-items: center;
+  margin: var(--spacing-md) 0 0;
+  padding: var(--spacing-md) 0;
+  background: var(--color-bg-secondary);
+  border-top: fun.convert-px(3) solid var(--color-border-lighter);
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-template-columns:
+        minmax(0, var(--spacing-xl)) min(
+          calc(100vw - calc(var(--spacing-md) * 2)),
+          80ch
+        )
+        minmax(0, 1fr);
+    }
+
+    @include mix.dimensions("lg") {
+      grid-template-columns:
+        minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+        minmax(0, 1fr);
+    }
+  }
+
+  > * {
+    grid-column: 2;
+  }
+}
diff --git a/src/styles/pages/Subject.module.scss b/src/styles/pages/Subject.module.scss
deleted file mode 100644
index 01c3cb8..0000000
--- a/src/styles/pages/Subject.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
-
-.title {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.cover {
-  display: block;
-  width: fun.convert-px(50);
-  height: fun.convert-px(50);
-  position: relative;
-}
-
-.list {
-  @extend %reset-ordered-list;
-
-  margin: var(--spacing-md) auto;
-}
-
-li.item {
-  margin: var(--spacing-md) 0;
-}
diff --git a/src/styles/pages/Thematic.module.scss b/src/styles/pages/Thematic.module.scss
deleted file mode 100644
index 0b9aa2d..0000000
--- a/src/styles/pages/Thematic.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use "@styles/abstracts/placeholders";
-
-.list {
-  @extend %reset-ordered-list;
-
-  margin: var(--spacing-md) auto;
-}
-
-li.item {
-  margin: var(--spacing-md) 0;
-}