chore: move Main grid to its children

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

7 files changed, 54 insertions, 32 deletions

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>
   );