aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/components/atoms/lists/list.module.scss10
-rw-r--r--src/components/atoms/lists/list.tsx12
-rw-r--r--src/components/organisms/layout/cards-list.tsx1
-rw-r--r--src/components/organisms/layout/posts-list.module.scss9
-rw-r--r--src/components/organisms/layout/posts-list.tsx4
-rw-r--r--src/components/organisms/widgets/links-list-widget.tsx1
-rw-r--r--src/pages/article/[slug].tsx5
-rw-r--r--src/pages/projets/[slug].tsx9
-rw-r--r--src/pages/sujet/[slug].tsx2
-rw-r--r--src/styles/pages/partials/_article-wp-blocks.scss38
-rw-r--r--src/styles/pages/project.module.scss10
-rw-r--r--src/styles/pages/topic.module.scss2
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;
}