diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Buttons/ButtonLink/ButtonLink.tsx | 5 | ||||
| -rw-r--r-- | src/components/Buttons/Buttons.module.scss | 5 | ||||
| -rw-r--r-- | src/components/Footer/Footer.module.scss | 9 | ||||
| -rw-r--r-- | src/components/PostFooter/PostFooter.module.scss | 40 | ||||
| -rw-r--r-- | src/components/PostFooter/PostFooter.tsx | 27 | ||||
| -rw-r--r-- | src/components/PostPreview/PostPreview.tsx | 6 |
6 files changed, 29 insertions, 63 deletions
diff --git a/src/components/Buttons/ButtonLink/ButtonLink.tsx b/src/components/Buttons/ButtonLink/ButtonLink.tsx index 3e78440..4c94b34 100644 --- a/src/components/Buttons/ButtonLink/ButtonLink.tsx +++ b/src/components/Buttons/ButtonLink/ButtonLink.tsx @@ -8,17 +8,14 @@ const ButtonLink = ({ target, position = 'left', isExternal = false, - hasIcon = false, }: { children: ReactNode; target: string; position?: ButtonPosition; isExternal?: boolean; - hasIcon?: boolean; }) => { const positionModifier = `link--${position}`; - const iconModifier = hasIcon ? ` ${styles['link--icon']}` : ''; - const classes = `${styles.btn} ${styles.link} ${styles[positionModifier]}${iconModifier}`; + const classes = `${styles.btn} ${styles.link} ${styles[positionModifier]}`; return isExternal ? ( <a className={classes} href={target}> diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss index 08dc8b4..15065b2 100644 --- a/src/components/Buttons/Buttons.module.scss +++ b/src/components/Buttons/Buttons.module.scss @@ -117,8 +117,13 @@ } .link { + display: flex; + flex-flow: row wrap; + place-items: center; + gap: var(--spacing-2xs); width: max-content; padding: var(--spacing-2xs) var(--spacing-sm); + position: relative; background: var(--color-bg); border: fun.convert-px(3) solid var(--color-primary); border-radius: fun.convert-px(5); diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index 4daa52a..9376958 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -12,6 +12,7 @@ .back-to-top { --button-size: #{fun.convert-px(55)}; + --icon-size: #{fun.convert-px(32)}; position: fixed; bottom: calc(var(--toolbar-size) + var(--spacing-md)); @@ -36,19 +37,19 @@ height: var(--button-size); svg { - width: 100%; padding: var(--spacing-2xs); } :global { .arrow-head { - transform: translateY(12px) translateX(-5px) scale(1.5); + transform: translateY(#{fun.convert-px(18)}); transition: all 0.45s ease-in-out 0s; } .arrow-bar { opacity: 0; - transform: translateY(12px) translateX(5px) scale(0.5); + transform: translateY(#{fun.convert-px(18)}) + translateX(#{fun.convert-px(5)}) scale(0.5); transition: transform 0.45s ease-in-out 0s, opacity 0.7s ease-in-out 0s; } } @@ -57,7 +58,7 @@ &:focus { :global { .arrow-head { - transform: translateY(0) translateX(0) scale(1); + transform: translateY(0); } .arrow-bar { diff --git a/src/components/PostFooter/PostFooter.module.scss b/src/components/PostFooter/PostFooter.module.scss index a34269f..7c1f1ce 100644 --- a/src/components/PostFooter/PostFooter.module.scss +++ b/src/components/PostFooter/PostFooter.module.scss @@ -7,44 +7,12 @@ .list { @extend %flex-list; -} -.item { - &:not(:last-child) { - margin-right: var(--spacing-2xs); - } + gap: var(--spacing-xs); } -.link { - display: flex; - align-items: center; - gap: var(--spacing-2xs); - padding: fun.convert-px(3) var(--spacing-xs); - position: relative; - background: linear-gradient( - to right, - var(--color-primary) 50%, - var(--color-bg) 50% - ) - 100% 0 / 210% 100%; - border: fun.convert-px(2) solid var(--color-primary); - border-radius: fun.convert-px(5); - box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) 0 - var(--color-shadow-light); - font-weight: 600; - text-decoration: none; - transition: all 0.5s ease-in-out 0s, color 0.5s ease-in-out 0s; - - &:hover, - &:focus { - background-position: 0 0; - color: var(--color-fg-inverted); - transition: all 0.4s ease-in-out 0s, color 0.3s ease-in-out 0.1s; - } - - &:active { - background-position: 100% 0; - border-color: var(--color-primary-dark); - color: var(--color-primary-dark); +.item { + > a { + padding: calc(var(--spacing-2xs) / 2) var(--spacing-xs); } } diff --git a/src/components/PostFooter/PostFooter.tsx b/src/components/PostFooter/PostFooter.tsx index fe933d7..06e86bc 100644 --- a/src/components/PostFooter/PostFooter.tsx +++ b/src/components/PostFooter/PostFooter.tsx @@ -1,3 +1,4 @@ +import { ButtonLink } from '@components/Buttons'; import { t } from '@lingui/macro'; import { SubjectPreview } from '@ts/types/taxonomies'; import Image from 'next/image'; @@ -9,20 +10,18 @@ const PostFooter = ({ subjects }: { subjects: SubjectPreview[] }) => { return subjects.map((subject) => { return ( <li className={styles.item} key={subject.id}> - <Link href={`/sujet/${subject.slug}`}> - <a className={styles.link}> - {subject.featuredImage && ( - <Image - src={subject.featuredImage.sourceUrl} - alt={subject.featuredImage.altText} - layout="intrinsic" - width="20" - height="20" - /> - )} - {subject.title} - </a> - </Link> + <ButtonLink target={`/sujet/${subject.slug}`}> + {subject.featuredImage && ( + <Image + src={subject.featuredImage.sourceUrl} + alt={subject.featuredImage.altText} + layout="intrinsic" + width="20" + height="20" + /> + )} + {subject.title} + </ButtonLink> </li> ); }); diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx index 9cb7752..d89ddb5 100644 --- a/src/components/PostPreview/PostPreview.tsx +++ b/src/components/PostPreview/PostPreview.tsx @@ -48,11 +48,7 @@ const PostPreview = ({ dangerouslySetInnerHTML={{ __html: post.intro }} ></div> <footer className={styles.footer}> - <ButtonLink - target={`/article/${post.slug}`} - position="left" - hasIcon={true} - > + <ButtonLink target={`/article/${post.slug}`} position="left"> {t`Read more`} <span className="screen-reader-text"> {' '} |