summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/Buttons/Button/Button.tsx7
-rw-r--r--src/components/Buttons/ButtonLink/ButtonLink.tsx6
-rw-r--r--src/components/Buttons/Buttons.module.scss45
-rw-r--r--src/components/Icons/Arrow/Arrow.module.scss7
-rw-r--r--src/components/Icons/Arrow/Arrow.tsx18
-rw-r--r--src/components/Icons/index.tsx2
-rw-r--r--src/components/PostMeta/PostMeta.module.scss1
-rw-r--r--src/components/PostPreview/PostPreview.module.scss74
-rw-r--r--src/components/PostPreview/PostPreview.tsx25
-rw-r--r--src/pages/blog/index.tsx1
10 files changed, 107 insertions, 79 deletions
diff --git a/src/components/Buttons/Button/Button.tsx b/src/components/Buttons/Button/Button.tsx
index 8256e6b..80acf8d 100644
--- a/src/components/Buttons/Button/Button.tsx
+++ b/src/components/Buttons/Button/Button.tsx
@@ -1,19 +1,24 @@
+import { ButtonPosition } from '@ts/types/app';
import { ReactNode } from 'react';
import styles from '../Buttons.module.scss';
const Button = ({
children,
clickHandler,
+ position = 'left',
isDisabled = false,
isPrimary = false,
}: {
children: ReactNode;
clickHandler: any;
+ position?: ButtonPosition;
isDisabled?: boolean;
isPrimary?: boolean;
}) => {
const classes = `${styles.btn} ${
- isPrimary ? styles.primary : styles.secondary
+ isPrimary
+ ? `${styles.primary} ${styles[`primary--${position}`]}`
+ : `${styles.secondary} ${styles[`secondary--${position}`]}`
}`;
return (
diff --git a/src/components/Buttons/ButtonLink/ButtonLink.tsx b/src/components/Buttons/ButtonLink/ButtonLink.tsx
index 70039a8..a2f75f2 100644
--- a/src/components/Buttons/ButtonLink/ButtonLink.tsx
+++ b/src/components/Buttons/ButtonLink/ButtonLink.tsx
@@ -8,13 +8,17 @@ const ButtonLink = ({
target,
position = 'left',
isExternal = false,
+ hasIcon = false,
}: {
children: ReactNode;
target: string;
position?: ButtonPosition;
isExternal?: boolean;
+ hasIcon?: boolean;
}) => {
- const classes = `${styles.btn} ${styles.link} ${styles[`link--${position}`]}`;
+ const classes = `${styles.btn} ${styles.link} ${styles[`link--${position}`]}${
+ hasIcon ? ` ${styles['link--icon']}` : ''
+ }`;
return isExternal ? (
<a className={classes} href={target}>
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index e05bd1d..f46de82 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -16,6 +16,19 @@
text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow);
transition: all 0.3s ease-in-out 0s;
+ &--left {
+ margin-right: auto;
+ }
+
+ &--right {
+ margin-left: auto;
+ }
+
+ &--center {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
&:hover,
&:focus {
background: var(--color-primary-light);
@@ -36,7 +49,7 @@
padding: var(--spacing-2xs) var(--spacing-md);
background: var(--color-bg);
border: fun.convert-px(5) solid var(--color-primary);
- border-radius: fun.convert-px(25);
+ border-radius: fun.convert-px(30);
box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
var(--color-shadow-light),
fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
@@ -44,9 +57,22 @@
fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
var(--color-shadow-light);
color: var(--color-primary);
- font-weight: 500;
+ font-weight: 600;
transition: all 0.35s ease-in-out 0s;
+ &--left {
+ margin-right: auto;
+ }
+
+ &--right {
+ margin-left: auto;
+ }
+
+ &--center {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
&:disabled {
color: var(--color-fg-light);
border-color: var(--color-border);
@@ -94,8 +120,8 @@
var(--color-shadow-light);
color: var(--color-primary);
font-weight: 600;
- text-decoration: none;
- transition: all 0.3s ease-in-out 0s;
+ text-decoration: underline transparent 0;
+ transition: all 0.3s ease-in-out 0s, text-decoration 0.35s ease-in-out 0s;
&--left {
margin-right: auto;
@@ -110,6 +136,13 @@
margin-right: auto;
}
+ &--icon {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: center;
+ gap: var(--spacing-2xs);
+ }
+
&:hover,
&:focus {
box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
@@ -120,7 +153,7 @@
var(--color-shadow-lighter),
fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3)
var(--color-shadow-lighter);
- transform: scale(1.08);
+ transform: scale(1.07);
}
&:focus {
@@ -129,7 +162,7 @@
&:active {
box-shadow: 0 0 0 0 var(--color-shadow-light);
- text-decoration: none;
+ text-decoration: underline transparent 0;
transform: scale(0.94);
}
}
diff --git a/src/components/Icons/Arrow/Arrow.module.scss b/src/components/Icons/Arrow/Arrow.module.scss
new file mode 100644
index 0000000..49e9b02
--- /dev/null
+++ b/src/components/Icons/Arrow/Arrow.module.scss
@@ -0,0 +1,7 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+ fill: var(--color-primary);
+ width: var(--icon-size, #{fun.convert-px(30)});
+ transition: all 0.25s ease-in-out 0s;
+}
diff --git a/src/components/Icons/Arrow/Arrow.tsx b/src/components/Icons/Arrow/Arrow.tsx
new file mode 100644
index 0000000..61edfca
--- /dev/null
+++ b/src/components/Icons/Arrow/Arrow.tsx
@@ -0,0 +1,18 @@
+import styles from './Arrow.module.scss';
+
+const ArrowIcon = () => {
+ return (
+ <svg
+ className={styles.icon}
+ viewBox="0 0 64.644997 23.476001"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="m 0,15.45 40.008,-0.018 v 8.044 L 64.645,11.715 39.845,0 V 8.044 L 0,8.186 Z"
+ id="path2"
+ />
+ </svg>
+ );
+};
+
+export default ArrowIcon;
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
index 9144619..1594775 100644
--- a/src/components/Icons/index.tsx
+++ b/src/components/Icons/index.tsx
@@ -1,3 +1,4 @@
+import ArrowIcon from './Arrow/Arrow';
import BlogIcon from './Blog/Blog';
import CloseIcon from './Close/Close';
import ContactIcon from './Contact/Contact';
@@ -10,6 +11,7 @@ import SunIcon from './Sun/Sun';
import ThemeIcon from './Theme/Theme';
export {
+ ArrowIcon,
BlogIcon,
CloseIcon,
ContactIcon,
diff --git a/src/components/PostMeta/PostMeta.module.scss b/src/components/PostMeta/PostMeta.module.scss
index f997ffa..3ec7daf 100644
--- a/src/components/PostMeta/PostMeta.module.scss
+++ b/src/components/PostMeta/PostMeta.module.scss
@@ -4,6 +4,7 @@
.wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
+ margin-top: var(--spacing-md);
font-size: var(--font-size-sm);
@include mix.media("screen") {
diff --git a/src/components/PostPreview/PostPreview.module.scss b/src/components/PostPreview/PostPreview.module.scss
index ccdae9b..cacc0d3 100644
--- a/src/components/PostPreview/PostPreview.module.scss
+++ b/src/components/PostPreview/PostPreview.module.scss
@@ -2,22 +2,24 @@
@use "@styles/abstracts/mixins" as mix;
.wrapper {
+ --icon-size: #{fun.convert-px(20)};
+
padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
border: fun.convert-px(1) solid var(--color-border);
border-radius: fun.convert-px(3);
- box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow),
- fun.convert-px(1) fun.convert-px(1) fun.convert-px(3) 0 var(--color-shadow);
- transition: all 0.2s ease-in-out 0s, border 0s;
+ box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow-light),
+ fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+ var(--color-shadow-light),
+ fun.convert-px(4) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-2)
+ var(--color-shadow-light);
+ transition: all 0.3s ease-in-out 0s, border 0s;
- &:hover,
- &:focus-within {
- box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0
- var(--color-shadow-light),
- fun.convert-px(3) fun.convert-px(3) fun.convert-px(3) 0
- var(--color-shadow-light),
- fun.convert-px(3) fun.convert-px(3) fun.convert-px(5) fun.convert-px(1)
- var(--color-shadow-lighter);
- transform: scale(1.01);
+ &:hover {
+ --icon-size: #{fun.convert-px(25)};
+ }
+
+ &:active {
+ --icon-size: 0;
}
}
@@ -29,54 +31,6 @@
border: fun.convert-px(1) solid var(--color-border);
}
-.read-more {
- display: block;
- width: max-content;
- margin: var(--spacing-md) auto var(--spacing-lg);
- padding: var(--spacing-2xs) var(--spacing-sm);
- background: var(--color-bg);
- border: fun.convert-px(3) solid var(--color-primary);
- border-radius: fun.convert-px(3);
- box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
- var(--color-shadow-light),
- fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
- var(--color-shadow-light),
- fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
- var(--color-shadow-light);
- color: var(--color-primary);
- font-weight: 600;
- text-decoration: none;
- transition: all 0.3s ease-in-out 0s;
-
- .icon {
- width: fun.convert-px(20);
- margin-left: var(--spacing-2xs);
- fill: var(--color-primary);
- transition: all 0.25s ease-in-out 0s;
- }
-
- &:hover,
- &:focus {
- text-decoration: underline var(--color-primary) fun.convert-px(2);
-
- .icon {
- margin-left: var(--spacing-xs);
- transform: scaleX(1.3);
- }
- }
-
- &:active {
- color: var(--color-primary-dark);
- text-decoration: none;
-
- .icon {
- margin-left: 0;
- transform: scaleX(0);
- width: 0;
- }
- }
-}
-
@include mix.media("screen") {
@include mix.dimensions("xs") {
.read-more {
diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
index f5c6d9b..ccbb9e5 100644
--- a/src/components/PostPreview/PostPreview.tsx
+++ b/src/components/PostPreview/PostPreview.tsx
@@ -2,9 +2,10 @@ import PostMeta from '@components/PostMeta/PostMeta';
import { t } from '@lingui/macro';
import { ArticlePreview } from '@ts/types/articles';
import Link from 'next/link';
-import ArrowRightIcon from '@assets/images/icon-arrow-right.svg';
import styles from './PostPreview.module.scss';
import Image from 'next/image';
+import { ButtonLink } from '@components/Buttons';
+import { ArrowIcon } from '@components/Icons';
type TitleLevel = 2 | 3 | 4 | 5 | 6;
@@ -41,16 +42,18 @@ const PostPreview = ({
dangerouslySetInnerHTML={{ __html: post.intro }}
></div>
<footer className={styles.footer}>
- <Link href={`/article/${post.slug}`}>
- <a className={styles['read-more']}>
- {t`Read more`}
- <span className="screen-reader-text">
- {' '}
- {t({ message: `about ${post.title}`, comment: 'Post title' })}
- </span>
- <ArrowRightIcon className={styles.icon} />
- </a>
- </Link>
+ <ButtonLink
+ target={`/article/${post.slug}`}
+ position="left"
+ hasIcon={true}
+ >
+ {t`Read more`}
+ <span className="screen-reader-text">
+ {' '}
+ {t({ message: `about ${post.title}`, comment: 'Post title' })}
+ </span>
+ <ArrowIcon />
+ </ButtonLink>
</footer>
<PostMeta
commentCount={post.commentCount}
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 23013bd..a638bd4 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -55,6 +55,7 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
<Button
isDisabled={isLoadingMore}
clickHandler={() => setSize(size + 1)}
+ position="center"
>{t`Load more?`}</Button>
)}
</>
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 04:47:08 +0000