fix(styles): increase CSS specifity for some selectors

Since `sideEffects` has been added to activate tree shakings, the
styles are imported in the wrong order in production build. There is an
open issue (again) on Next.js repo. I'm not sure it will be fixed soon
so in the meantime I had to increase the specifity of some selectors
to avoid broken styles.
I also fixed two minor layout errors:
* CV page widgets should use headings of level 2
* Homepage should wrap the cards in list items

2 files changed, 41 insertions, 39 deletions

diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index f0e1e8b..cc24ca3 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -141,7 +141,7 @@ const CVPage: NextPageWithLayout = () => {
       />
       <PageSidebar>
         <Toc
-          heading={<Heading level={3}>{messages.toc.title}</Heading>}
+          heading={<Heading level={2}>{messages.toc.title}</Heading>}
           tree={tree}
         />
       </PageSidebar>
@@ -151,19 +151,11 @@ const CVPage: NextPageWithLayout = () => {
       <PageSidebar>
         <ImageWidget
           description={messages.image.caption}
-          heading={
-            <Heading isFake level={3}>
-              {messages.image.title}
-            </Heading>
-          }
+          heading={<Heading level={2}>{messages.image.title}</Heading>}
           img={<NextImage {...data.image} />}
         />
         <SocialMediaWidget
-          heading={
-            <Heading isFake level={3}>
-              {messages.socialMedia.title}
-            </Heading>
-          }
+          heading={<Heading level={2}>{messages.socialMedia.title}</Heading>}
           media={[
             {
               icon: 'Github',
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0e6bb23..7a45477 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -16,6 +16,7 @@ import {
   Time,
   MetaItem,
   Page,
+  GridItem,
 } from '../components';
 import { mdxComponents } from '../components/mdx';
 import HomePageContent, { meta } from '../content/pages/homepage.mdx';
@@ -23,6 +24,7 @@ import {
   convertRecentPostToRecentArticle,
   fetchRecentPosts,
 } from '../services/graphql';
+import styles from '../styles/pages/home.module.scss';
 import type { NextPageWithLayout, RecentArticle } from '../types';
 import { CONFIG } from '../utils/config';
 import { ROUTES } from '../utils/constants';
@@ -82,34 +84,42 @@ const RecentPosts: FC<RecentPostsProps> = ({ posts }): JSX.Element => {
         );
 
         return (
-          <Card
-            aria-label={cardLabel}
-            cover={
-              post.cover ? (
-                <CardCover aria-label={coverLabel} hasBorders>
-                  <NextImage {...post.cover} />
-                </CardCover>
-              ) : undefined
-            }
-            key={post.id}
-            meta={
-              <CardMeta isCentered>
-                <MetaItem
-                  hasBorderedValues
-                  isCentered
-                  label={publicationDate}
-                  value={<Time date={post.publicationDate} />}
-                />
-              </CardMeta>
-            }
-            isCentered
-            linkTo={postUrl}
-          >
-            <CardHeader>
-              <CardTitle level={3}>{post.title}</CardTitle>
-            </CardHeader>
-            <CardFooter />
-          </Card>
+          <GridItem key={post.id}>
+            <Card
+              aria-label={cardLabel}
+              className={styles.card}
+              cover={
+                post.cover ? (
+                  <CardCover aria-label={coverLabel} hasBorders>
+                    <NextImage
+                      {...post.cover}
+                      // eslint-disable-next-line react/jsx-no-literals
+                      alt=""
+                      // eslint-disable-next-line react/jsx-no-literals
+                      title=""
+                    />
+                  </CardCover>
+                ) : undefined
+              }
+              meta={
+                <CardMeta isCentered>
+                  <MetaItem
+                    hasBorderedValues
+                    isCentered
+                    label={publicationDate}
+                    value={<Time date={post.publicationDate} />}
+                  />
+                </CardMeta>
+              }
+              isCentered
+              linkTo={postUrl}
+            >
+              <CardHeader>
+                <CardTitle level={3}>{post.title}</CardTitle>
+              </CardHeader>
+              <CardFooter />
+            </Card>
+          </GridItem>
         );
       })}
     </Grid>