diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-05-20 22:22:35 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-05-21 19:23:43 +0200 |
| commit | 802548124071039f83ebfa2605e839ded82b5689 (patch) | |
| tree | 62d85fe786b84fcdd099f20e21e1827add701ae8 /src/components | |
| parent | 7fd11d99f8a547e4acb89b9f9159b92e208dc90f (diff) | |
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
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/atoms/lists/list.module.scss | 10 | ||||
| -rw-r--r-- | src/components/atoms/lists/list.tsx | 12 | ||||
| -rw-r--r-- | src/components/organisms/layout/cards-list.tsx | 1 | ||||
| -rw-r--r-- | src/components/organisms/layout/posts-list.module.scss | 9 | ||||
| -rw-r--r-- | src/components/organisms/layout/posts-list.tsx | 4 | ||||
| -rw-r--r-- | src/components/organisms/widgets/links-list-widget.tsx | 1 |
6 files changed, 12 insertions, 25 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} /> |
