From eef0dd0fafa5dbbbd29f2162967bc668eebf6074 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 20 Dec 2023 17:09:39 +0100
Subject: 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
---
 .../meta-list/meta-item/meta-item.module.scss      |   1 +
 .../forms/search-form/search-form.module.scss      |  55 +++---
 .../nav/breadcrumbs/breadcrumbs.module.scss        |   4 -
 .../organisms/nav/breadcrumbs/breadcrumbs.tsx      |   5 +-
 .../navbar/navbar-item/navbar-item.module.scss     | 200 +++++++++++----------
 src/components/templates/page/page.module.scss     |  12 +-
 src/pages/cv.tsx                                   |  14 +-
 src/pages/index.tsx                                |  66 ++++---
 src/styles/pages/home.module.scss                  |   3 +
 9 files changed, 183 insertions(+), 177 deletions(-)
 create mode 100644 src/styles/pages/home.module.scss

diff --git a/src/components/molecules/meta-list/meta-item/meta-item.module.scss b/src/components/molecules/meta-list/meta-item/meta-item.module.scss
index a1c2d47..263a5dc 100644
--- a/src/components/molecules/meta-list/meta-item/meta-item.module.scss
+++ b/src/components/molecules/meta-list/meta-item/meta-item.module.scss
@@ -31,6 +31,7 @@
 .value {
   width: fit-content;
   height: fit-content;
+  padding-block: fun.convert-px(2);
   color: var(--color-fg);
   font-weight: 400;
 }
diff --git a/src/components/organisms/forms/search-form/search-form.module.scss b/src/components/organisms/forms/search-form/search-form.module.scss
index f6570ce..1a440f0 100644
--- a/src/components/organisms/forms/search-form/search-form.module.scss
+++ b/src/components/organisms/forms/search-form/search-form.module.scss
@@ -10,52 +10,53 @@
   transition: all 0.3s ease-in-out 0s;
 }
 
-.btn {
-  background: var(--color-bg-tertiary);
-  border: fun.convert-px(2) solid var(--color-border);
-  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
-  transition: all 0.25s linear 0s;
+.form {
+  display: flex;
+  flex-flow: row nowrap;
+
+  /* It needs to be nested because of wrong CSS ordering on production build. */
+  .btn {
+    background: var(--color-bg-tertiary);
+    border: fun.convert-px(2) solid var(--color-border);
+    box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
+    transition: all 0.25s linear 0s;
+  }
+
+  &--no-label {
+    .btn {
+      align-self: stretch;
+    }
+  }
+
+  &--has-label {
+    .btn {
+      align-self: flex-end;
+      height: fun.convert-px(52);
+    }
+  }
 
-  &:hover,
-  &:focus {
+  .btn:hover,
+  .btn:focus {
     .icon {
       transform: scale(0.85) rotate(20deg) translateX(#{fun.convert-px(2)})
         translateY(#{fun.convert-px(3)});
     }
   }
 
-  &:focus {
+  .btn:focus {
     outline: none;
     border-color: var(--color-primary);
     box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0
       var(--color-primary-dark);
   }
 
-  &:active {
+  .btn:active {
     .icon {
       transform: scale(0.7);
     }
   }
 }
 
-.form {
-  display: flex;
-  flex-flow: row nowrap;
-
-  &--no-label {
-    .btn {
-      align-self: stretch;
-    }
-  }
-
-  &--has-label {
-    .btn {
-      align-self: flex-end;
-      height: fun.convert-px(52);
-    }
-  }
-}
-
 .field {
   min-width: 0;
 
diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss b/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss
index 1be81c4..b1b2302 100644
--- a/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss
+++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.module.scss
@@ -1,7 +1,3 @@
-.wrapper {
-  width: fit-content;
-}
-
 .sep {
   margin-inline-start: var(--spacing-xs);
 }
diff --git a/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx b/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx
index 13434e1..fd29f90 100644
--- a/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx
+++ b/src/components/organisms/nav/breadcrumbs/breadcrumbs.tsx
@@ -28,12 +28,11 @@ export type BreadcrumbsProps = Omit<NavProps, 'children'> & {
 const BreadcrumbsWithRef: ForwardRefRenderFunction<
   HTMLElement,
   BreadcrumbsProps
-> = ({ className = '', items, ...props }, ref) => {
-  const wrapperClass = `${styles.wrapper} ${className}`;
+> = ({ items, ...props }, ref) => {
   const sep = '>';
 
   return (
-    <Nav {...props} className={wrapperClass} ref={ref}>
+    <Nav {...props} ref={ref}>
       <NavList
         isInline
         isOrdered
diff --git a/src/components/organisms/navbar/navbar-item/navbar-item.module.scss b/src/components/organisms/navbar/navbar-item/navbar-item.module.scss
index f8249ba..a9a19de 100644
--- a/src/components/organisms/navbar/navbar-item/navbar-item.module.scss
+++ b/src/components/organisms/navbar/navbar-item/navbar-item.module.scss
@@ -2,23 +2,6 @@
 @use "../../../../styles/abstracts/mixins" as mix;
 @use "../../../../styles/abstracts/placeholders";
 
-.overlay {
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "sm") {
-      bottom: var(--modal-pos, var(--btn-size, --default-btn-size));
-      display: flex;
-      flex-flow: row wrap;
-      place-content: flex-end;
-    }
-
-    @include mix.dimensions("sm") {
-      position: absolute;
-      inset: calc(100% + var(--spacing-2xs)) auto;
-      background: transparent;
-    }
-  }
-}
-
 .modal {
   transition:
     all 0.8s ease-in-out 0s,
@@ -58,88 +41,6 @@
   }
 }
 
-.checkbox {
-  position: absolute;
-
-  /* 6px = checkbox approximate size */
-  inset: calc(50% - 6px) calc(50% - 6px);
-  opacity: 0;
-  cursor: pointer;
-
-  &:hover,
-  &:focus {
-    &,
-    + .label {
-      @extend %draw-borders;
-    }
-  }
-
-  &:checked {
-    + .label {
-      --draw-border-color1: var(--color-primary-dark);
-      --draw-border-color2: var(--color-primary-light);
-
-      .icon--hamburger {
-        > span {
-          background: transparent;
-          border: transparent;
-
-          &::before {
-            top: 40%;
-            transform-origin: 50% 50%;
-            transform: rotate(-45deg);
-          }
-
-          &::after {
-            bottom: 40%;
-            transform-origin: 50% 50%;
-            transform: rotate(45deg);
-          }
-        }
-      }
-    }
-
-    ~ .overlay {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-
-  &:not(:checked) {
-    + .label {
-      --draw-border-color1: var(--color-primary-light);
-      --draw-border-color2: var(--color-primary-lighter);
-    }
-
-    ~ .overlay {
-      opacity: 0;
-      overflow: hidden;
-      visibility: hidden;
-
-      @include mix.media("screen") {
-        @include mix.dimensions("sm") {
-          overflow: visible;
-          transition: all 0.3s ease-in-out 0.8s;
-        }
-      }
-
-      > .modal {
-        @include mix.media("screen") {
-          @include mix.dimensions(null, "sm") {
-            transform: translateX(-100vw);
-          }
-
-          @include mix.dimensions("sm") {
-            transform: scale(0) perspective(#{fun.convert-px(250)})
-              translate3d(0, 0, #{fun.convert-px(-250)});
-            transform-origin: var(--transform-origin, 15% -15%);
-          }
-        }
-      }
-    }
-  }
-}
-
 @mixin modal-visible {
   > .checkbox,
   > .label {
@@ -166,6 +67,107 @@
 
   position: relative;
 
+  /* It needs to be nested because of wrong CSS ordering on production build. */
+  .overlay {
+    @include mix.media("screen") {
+      @include mix.dimensions(null, "sm") {
+        bottom: var(--modal-pos, var(--btn-size, --default-btn-size));
+        display: flex;
+        flex-flow: row wrap;
+        place-content: flex-end;
+      }
+
+      @include mix.dimensions("sm") {
+        position: absolute;
+        inset: calc(100% + var(--spacing-2xs)) auto;
+        background: transparent;
+      }
+    }
+  }
+
+  /* It needs to be nested because of wrong CSS ordering on production build. */
+  .checkbox {
+    position: absolute;
+
+    /* 6px = checkbox approximate size */
+    inset: calc(50% - 6px) calc(50% - 6px);
+    opacity: 0;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      &,
+      + .label {
+        @extend %draw-borders;
+      }
+    }
+
+    &:checked {
+      + .label {
+        --draw-border-color1: var(--color-primary-dark);
+        --draw-border-color2: var(--color-primary-light);
+
+        .icon--hamburger {
+          > span {
+            background: transparent;
+            border: transparent;
+
+            &::before {
+              top: 40%;
+              transform-origin: 50% 50%;
+              transform: rotate(-45deg);
+            }
+
+            &::after {
+              bottom: 40%;
+              transform-origin: 50% 50%;
+              transform: rotate(45deg);
+            }
+          }
+        }
+      }
+
+      ~ .overlay {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+
+    &:not(:checked) {
+      + .label {
+        --draw-border-color1: var(--color-primary-light);
+        --draw-border-color2: var(--color-primary-lighter);
+      }
+
+      ~ .overlay {
+        opacity: 0;
+        overflow: hidden;
+        visibility: hidden;
+
+        @include mix.media("screen") {
+          @include mix.dimensions("sm") {
+            overflow: visible;
+            transition: all 0.3s ease-in-out 0.8s;
+          }
+        }
+
+        > .modal {
+          @include mix.media("screen") {
+            @include mix.dimensions(null, "sm") {
+              transform: translateX(-100vw);
+            }
+
+            @include mix.dimensions("sm") {
+              transform: scale(0) perspective(#{fun.convert-px(250)})
+                translate3d(0, 0, #{fun.convert-px(-250)});
+              transform-origin: var(--transform-origin, 15% -15%);
+            }
+          }
+        }
+      }
+    }
+  }
+
   &--hidden-controller-sm {
     @include mix.media("screen") {
       @include mix.dimensions("sm") {
diff --git a/src/components/templates/page/page.module.scss b/src/components/templates/page/page.module.scss
index 91a1b58..fd1fac9 100644
--- a/src/components/templates/page/page.module.scss
+++ b/src/components/templates/page/page.module.scss
@@ -204,6 +204,13 @@
   &__body {
     grid-column: 2;
   }
+
+  /* Without nesting, Nextjs does not override margin: the CSS is bundle in the
+   * wrong order. */
+  .heading {
+    width: fit-content;
+    margin: var(--spacing-md) auto;
+  }
 }
 
 .spinner {
@@ -211,11 +218,6 @@
 }
 
 :where(.comments) {
-  .heading {
-    width: fit-content;
-    margin: var(--spacing-md) auto;
-  }
-
   .form {
     max-width: 40ch;
     margin-inline: auto;
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>
diff --git a/src/styles/pages/home.module.scss b/src/styles/pages/home.module.scss
new file mode 100644
index 0000000..be54abf
--- /dev/null
+++ b/src/styles/pages/home.module.scss
@@ -0,0 +1,3 @@
+.card {
+  height: 100%;
+}
-- 
cgit v1.2.3