chore: update some styles

* Improve wp-blocks-columns, wp-block-quote and some images
* Make Sharing widget consistent between pages
* Remove margin option from lists
* Fix Topic logo alignement

12 files changed, 51 insertions, 52 deletions

diff --git a/src/components/atoms/lists/list.module.scss b/src/components/atoms/lists/list.module.scss
index f647072..95f9b40 100644
--- a/src/components/atoms/lists/list.module.scss
+++ b/src/components/atoms/lists/list.module.scss
@@ -7,10 +7,6 @@
     color: var(--color-primary-dark);
   }
 
-  & & {
-    margin-top: var(--spacing-2xs);
-  }
-
   &--ordered {
     padding: 0;
     counter-reset: li;
@@ -33,12 +29,6 @@
     padding: 0 0 0 var(--spacing-sm);
   }
 
-  &--has-margin &__item {
-    &:not(:last-child) {
-      margin-bottom: var(--spacing-2xs);
-    }
-  }
-
   &--flex {
     @extend %reset-list;
 
diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx
index 711ade1..aa0a241 100644
--- a/src/components/atoms/lists/list.tsx
+++ b/src/components/atoms/lists/list.tsx
@@ -33,10 +33,6 @@ export type ListProps = {
    * The list kind.
    */
   kind?: 'ordered' | 'unordered' | 'flex';
-  /**
-   * Set margin between list items. Default: true.
-   */
-  withMargin?: boolean;
 };
 
 /**
@@ -49,11 +45,9 @@ const List: FC<ListProps> = ({
   items,
   itemsClassName = '',
   kind = 'unordered',
-  withMargin = true,
 }) => {
   const ListTag = kind === 'ordered' ? 'ol' : 'ul';
   const kindClass = `list--${kind}`;
-  const marginClass = withMargin ? 'list--has-margin' : 'list--no-margin';
 
   /**
    * Retrieve the list items.
@@ -66,7 +60,7 @@ const List: FC<ListProps> = ({
         {value}
         {child && (
           <ListTag
-            className={`${styles.list} ${styles[kindClass]} ${styles[marginClass]} ${className}`}
+            className={`${styles.list} ${styles[kindClass]} ${className}`}
           >
             {getItems(child)}
           </ListTag>
@@ -76,9 +70,7 @@ const List: FC<ListProps> = ({
   };
 
   return (
-    <ListTag
-      className={`${styles.list} ${styles[kindClass]} ${styles[marginClass]} ${className}`}
-    >
+    <ListTag className={`${styles.list} ${styles[kindClass]} ${className}`}>
       {getItems(items)}
     </ListTag>
   );
diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index 1558d7c..0168bb2 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -77,7 +77,6 @@ const CardsList: FC<CardsListProps> = ({
     <List
       kind="flex"
       items={getCards(items)}
-      withMargin={false}
       className={`${styles.wrapper} ${styles[kindModifier]} ${className}`}
     />
   );
diff --git a/src/components/organisms/layout/posts-list.module.scss b/src/components/organisms/layout/posts-list.module.scss
index a006914..b09bb12 100644
--- a/src/components/organisms/layout/posts-list.module.scss
+++ b/src/components/organisms/layout/posts-list.module.scss
@@ -3,6 +3,10 @@
 @use "@styles/abstracts/placeholders";
 
 .section {
+  &:not(:last-of-type) {
+    margin-bottom: var(--spacing-md);
+  }
+
   @include mix.media("screen") {
     @include mix.dimensions("md") {
       display: grid;
@@ -17,8 +21,11 @@
   @extend %reset-ordered-list;
 
   .item {
-    margin-bottom: var(--spacing-md);
     border-bottom: fun.convert-px(1) solid var(--color-border);
+
+    &:not(:last-child) {
+      margin-bottom: var(--spacing-md);
+    }
   }
 }
 
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 50192dd..608130e 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -100,6 +100,8 @@ const PostsList: FC<PostsListProps> = ({
   const isMounted = useIsMounted(listRef);
   const { blog } = useSettings();
 
+  const lastPostId = posts.length ? posts[posts.length - 1].id : 0;
+
   /**
    * Retrieve the list of posts.
    *
@@ -111,8 +113,6 @@ const PostsList: FC<PostsListProps> = ({
     allPosts: Post[],
     headingLevel: HeadingLevel = 2
   ): JSX.Element => {
-    const lastPostId = allPosts[allPosts.length - 1].id;
-
     return (
       <ol className={styles.list} ref={listRef}>
         {allPosts.map(({ id, ...post }) => (
diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index 90dae4a..a9c677b 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -75,7 +75,6 @@ const LinksListWidget: FC<LinksListWidgetProps> = ({
       <List
         items={getListItems(items)}
         kind={kind}
-        withMargin={false}
         className={`${styles.list} ${styles[listKindClass]} ${className}`}
         itemsClassName={styles.list__item}
       />
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 7abbabc..812fffe 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -99,10 +99,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
             target={`/sujet/${topic.slug}`}
             className={styles.btn}
           >
-            {topic.logo && (
-              <ResponsiveImage className={styles.btn__icon} {...topic.logo} />
-            )}{' '}
-            {topic.name}
+            {topic.logo && <ResponsiveImage {...topic.logo} />} {topic.name}
           </ButtonLink>
         );
       }),
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index cf7d0dc..e9b36fa 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -10,6 +10,7 @@ import { getLayout } from '@components/templates/layout/layout';
 import PageLayout, {
   PageLayoutProps,
 } from '@components/templates/page/page-layout';
+import styles from '@styles/pages/project.module.scss';
 import {
   type NextPageWithLayout,
   type ProjectPreview,
@@ -53,7 +54,7 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
   const components: NestedMDXComponents = {
     Code: (props) => <Code {...props} />,
     Gallery: (props) => <Gallery {...props} />,
-    Image: (props) => <ResponsiveImage {...props} />,
+    Image: (props) => <ResponsiveImage withBorders={true} {...props} />,
     Link: (props) => <Link {...props} />,
     pre: ({ children }) => <Code {...children.props} />,
   };
@@ -66,7 +67,10 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
 
   const headerMeta: PageLayoutProps['headerMeta'] = {
     publication: { date: dates.publication },
-    update: dates.update ? { date: dates.update } : undefined,
+    update:
+      dates.update && dates.update !== dates.publication
+        ? { date: dates.update }
+        : undefined,
   };
 
   /**
@@ -202,6 +206,7 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
               'linkedin',
               'twitter',
             ]}
+            className={styles.widget}
           />,
         ]}
       >
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 271f4ec..b4845eb 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -191,7 +191,7 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
             : []
         }
       >
-        <div dangerouslySetInnerHTML={{ __html: content }} />
+        {content && <div dangerouslySetInnerHTML={{ __html: content }} />}
         {articles && (
           <>
             <Heading level={2}>
diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss
index 33e59a1..86be062 100644
--- a/src/styles/pages/partials/_article-wp-blocks.scss
+++ b/src/styles/pages/partials/_article-wp-blocks.scss
@@ -7,13 +7,12 @@
     margin: var(--spacing-sm) 0;
     padding: var(--spacing-sm);
     position: relative;
-    border: fun.convert-px(1) solid var(--color-primary-lighter);
-    border-left: fun.convert-px(5) solid var(--color-primary-lighter);
-    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-      fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-        var(--color-shadow-light),
-      fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-        var(--color-shadow-light);
+    border: fun.convert-px(1) solid var(--color-border-dark);
+    border-left: fun.convert-px(5) solid var(--color-border-dark);
+    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
+        var(--color-shadow),
+      fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) 0
+        var(--color-shadow);
     font-style: italic;
 
     > *:last-child {
@@ -21,6 +20,7 @@
     }
 
     cite {
+      color: var(--color-fg-light);
       font-size: var(--font-size-sm);
       font-style: normal;
       font-weight: 600;
@@ -62,18 +62,26 @@
     }
   }
 
+  .wp-block-image,
+  .wp-block-video {
+    padding: fun.convert-px(4);
+    border: fun.convert-px(1) solid var(--color-border);
+    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
+      var(--color-shadow);
+  }
+
   .wp-block-image {
     display: flex;
     flex-flow: column;
     width: fit-content;
     margin: 0 auto;
-    padding: fun.convert-px(4);
     position: relative;
-    border: fun.convert-px(1) solid var(--color-border);
-    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
-      var(--color-shadow);
     text-align: center;
 
+    img {
+      margin: auto;
+    }
+
     figcaption {
       margin-top: fun.convert-px(4);
       font-size: var(--font-size-sm);
@@ -166,12 +174,4 @@
       object-fit: cover;
     }
   }
-
-  .wp-block-video {
-    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-      fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-        var(--color-shadow-light),
-      fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-        var(--color-shadow-light);
-  }
 }
diff --git a/src/styles/pages/project.module.scss b/src/styles/pages/project.module.scss
new file mode 100644
index 0000000..3b1b5cc
--- /dev/null
+++ b/src/styles/pages/project.module.scss
@@ -0,0 +1,10 @@
+@use "@styles/abstracts/mixins" as mix;
+
+.widget {
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      width: min-content;
+      gap: var(--spacing-2xs);
+    }
+  }
+}
diff --git a/src/styles/pages/topic.module.scss b/src/styles/pages/topic.module.scss
index badb694..fd5f742 100644
--- a/src/styles/pages/topic.module.scss
+++ b/src/styles/pages/topic.module.scss
@@ -2,5 +2,5 @@
 
 .logo {
   max-width: fun.convert-px(50);
-  margin-right: var(--spacing-xs);
+  margin: 0 var(--spacing-xs) 0 0;
 }