diff options
Diffstat (limited to 'src/components')
18 files changed, 91 insertions, 41 deletions
diff --git a/src/components/Branding/Branding.module.scss b/src/components/Branding/Branding.module.scss index d02bfa6..54bbece 100644 --- a/src/components/Branding/Branding.module.scss +++ b/src/components/Branding/Branding.module.scss @@ -38,14 +38,14 @@ left: 0; backface-visibility: hidden; background: var(--color-bg); - border: fun.convert-px(1) solid var(--color-primary-dark); + border: fun.convert-px(2) solid var(--color-primary-dark); border-radius: 50%; transition: all 0.6s linear 0s; } &__front { box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 - var(--color-shadow), + var(--color-shadow-light), fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 var(--color-shadow-light); } @@ -70,7 +70,7 @@ &__back { box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 - var(--color-shadow), + var(--color-shadow-light), fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 var(--color-shadow-light); } @@ -90,8 +90,10 @@ grid-column: 2; grid-row: 2; margin: 0; + color: var(--color-fg-light); font-family: var(--font-family-secondary); font-size: var(--font-size-lg); + font-weight: 500; } .link { diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss index cee7918..df5ca3d 100644 --- a/src/components/Buttons/Buttons.module.scss +++ b/src/components/Buttons/Buttons.module.scss @@ -71,6 +71,10 @@ &:disabled { color: var(--color-fg-light); border-color: var(--color-border-dark); + box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-bg), + fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-darker), + fun.convert-px(5) fun.convert-px(5) 0 0 var(--color-bg), + fun.convert-px(6) fun.convert-px(6) 0 0 var(--color-primary-darker); cursor: wait; } @@ -138,7 +142,7 @@ var(--color-shadow-light), fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3) var(--color-shadow-light); - transform: scale(1.07); + transform: scale(1.1); } &:focus { @@ -154,6 +158,18 @@ } } +:global { + [data-theme="dark"] { + :local { + .tertiary { + img[src*="png"] { + background: none; + } + } + } + } +} + .toolbar { display: block; width: var(--btn-size); diff --git a/src/components/Icons/Blog/Blog.module.scss b/src/components/Icons/Blog/Blog.module.scss index 5b53125..5376c61 100644 --- a/src/components/Icons/Blog/Blog.module.scss +++ b/src/components/Icons/Blog/Blog.module.scss @@ -13,11 +13,11 @@ .picture { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); } .background { fill: var(--color-bg); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } diff --git a/src/components/Icons/CV/CV.module.scss b/src/components/Icons/CV/CV.module.scss index e7b0e59..aaa8a1a 100644 --- a/src/components/Icons/CV/CV.module.scss +++ b/src/components/Icons/CV/CV.module.scss @@ -8,46 +8,47 @@ .lock { fill: var(--color-bg); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 3; } .lines { + fill: var(--color-fg); stroke-width: 4; } .seal-top { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 2; } .seal-bottom { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 2; } .diploma { fill: var(--color-bg); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .top { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .handle { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 3; } .bottom { fill: var(--color-primary); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } diff --git a/src/components/Icons/Close/Close.module.scss b/src/components/Icons/Close/Close.module.scss index b45895b..5a1f638 100644 --- a/src/components/Icons/Close/Close.module.scss +++ b/src/components/Icons/Close/Close.module.scss @@ -8,6 +8,6 @@ .line { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 3; } diff --git a/src/components/Icons/Cog/Cog.module.scss b/src/components/Icons/Cog/Cog.module.scss index 4b09c38..a861f0c 100644 --- a/src/components/Icons/Cog/Cog.module.scss +++ b/src/components/Icons/Cog/Cog.module.scss @@ -5,6 +5,6 @@ width: var(--icon-size, #{fun.convert-px(40)}); margin: auto; fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } diff --git a/src/components/Icons/Contact/Contact.module.scss b/src/components/Icons/Contact/Contact.module.scss index 5c0040e..963c1dc 100644 --- a/src/components/Icons/Contact/Contact.module.scss +++ b/src/components/Icons/Contact/Contact.module.scss @@ -8,22 +8,22 @@ .envelop { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .lines { - fill: var(--color-border-dark); + fill: var(--color-fg); } .background { fill: var(--color-shadow-dark); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .paper { fill: var(--color-bg); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } diff --git a/src/components/Icons/Hamburger/Hamburger.module.scss b/src/components/Icons/Hamburger/Hamburger.module.scss index 07cbe50..f38df4e 100644 --- a/src/components/Icons/Hamburger/Hamburger.module.scss +++ b/src/components/Icons/Hamburger/Hamburger.module.scss @@ -12,7 +12,7 @@ var(--color-primary-light) 0%, var(--color-primary-lighter) 100% ); - border: fun.convert-px(1) solid var(--color-border-dark); + border: fun.convert-px(1) solid var(--color-primary-darker); border-radius: fun.convert-px(3); display: block; width: var(--btn-size, fun.convert-px(50)); diff --git a/src/components/Icons/Home/Home.module.scss b/src/components/Icons/Home/Home.module.scss index 6eb88c4..f2e7f9e 100644 --- a/src/components/Icons/Home/Home.module.scss +++ b/src/components/Icons/Home/Home.module.scss @@ -8,35 +8,35 @@ .wall { fill: var(--color-bg); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .indoor { fill: var(--color-shadow-dark); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .door { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .roof { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .chimney { fill: var(--color-bg); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; } .lines { - fill: var(--color-border-dark); + fill: var(--color-primary-darker); stroke-width: 4; } diff --git a/src/components/Icons/Moon/Moon.module.scss b/src/components/Icons/Moon/Moon.module.scss index 51d76fd..799a282 100644 --- a/src/components/Icons/Moon/Moon.module.scss +++ b/src/components/Icons/Moon/Moon.module.scss @@ -2,7 +2,7 @@ .moon { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; width: var(--icon-size, #{fun.convert-px(25)}); } diff --git a/src/components/Icons/Search/Search.module.scss b/src/components/Icons/Search/Search.module.scss index 7b506e8..4c42028 100644 --- a/src/components/Icons/Search/Search.module.scss +++ b/src/components/Icons/Search/Search.module.scss @@ -8,24 +8,24 @@ .big-handle { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 3; } .glass { fill: var(--color-bg-opacity); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 2; } .upright { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 3; } .small-handle { fill: var(--color-primary); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 2; } diff --git a/src/components/Icons/Sun/Sun.module.scss b/src/components/Icons/Sun/Sun.module.scss index 1de4b19..5682aa3 100644 --- a/src/components/Icons/Sun/Sun.module.scss +++ b/src/components/Icons/Sun/Sun.module.scss @@ -2,7 +2,7 @@ .sun { fill: var(--color-primary-lighter); - stroke: var(--color-border-dark); + stroke: var(--color-primary-darker); stroke-width: 4; width: var(--icon-size, #{fun.convert-px(25)}); } diff --git a/src/components/PostMeta/PostMeta.module.scss b/src/components/PostMeta/PostMeta.module.scss index ecd3105..6f8e1c2 100644 --- a/src/components/PostMeta/PostMeta.module.scss +++ b/src/components/PostMeta/PostMeta.module.scss @@ -35,7 +35,7 @@ .term { margin-right: var(--spacing-2xs); - color: var(--color-primary-darker); + color: var(--color-fg-light); } .description { diff --git a/src/components/ThemeToggle/ThemeToggle.tsx b/src/components/ThemeToggle/ThemeToggle.tsx index 4b93ac9..c44f6df 100644 --- a/src/components/ThemeToggle/ThemeToggle.tsx +++ b/src/components/ThemeToggle/ThemeToggle.tsx @@ -1,16 +1,27 @@ import { Form } from '@components/Form'; import { MoonIcon, SunIcon } from '@components/Icons'; +import Spinner from '@components/Spinner/Spinner'; import { t } from '@lingui/macro'; -import { FormEvent, useState } from 'react'; +import { useTheme } from 'next-themes'; +import { FormEvent, useEffect, useState } from 'react'; import styles from './ThemeToggle.module.scss'; const ThemeToggle = () => { - const [isDarkTheme, setIsDarkTheme] = useState<boolean>(false); + const [isMounted, setIsMounted] = useState<boolean>(false); + const { resolvedTheme, setTheme } = useTheme(); + + useEffect(() => { + setIsMounted(true); + }, []); const onSubmit = (e: FormEvent) => { e.preventDefault(); }; + if (!isMounted) return <Spinner />; + + const isDarkTheme = resolvedTheme === 'dark'; + return ( <Form modifier="theme" submitHandler={onSubmit}> <input @@ -19,7 +30,7 @@ const ThemeToggle = () => { id="dark-theme" name="dark-theme" checked={isDarkTheme} - onChange={() => setIsDarkTheme(!isDarkTheme)} + onChange={() => setTheme(isDarkTheme ? 'light' : 'dark')} /> <label htmlFor="dark-theme" className={styles.label}> <span className={styles.title}>{t`Theme:`}</span> diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss index 3b52fb6..096ad50 100644 --- a/src/components/Toolbar/Toolbar.module.scss +++ b/src/components/Toolbar/Toolbar.module.scss @@ -54,7 +54,7 @@ bottom: 100%; left: 0; right: 0; - background: var(--color-bg); + background: var(--color-bg-secondary); border-top: fun.convert-px(4) solid; border-bottom: fun.convert-px(4) solid; border-image: radial-gradient( diff --git a/src/components/Widgets/Sharing/Sharing.module.scss b/src/components/Widgets/Sharing/Sharing.module.scss index c05a56b..ada3e2f 100644 --- a/src/components/Widgets/Sharing/Sharing.module.scss +++ b/src/components/Widgets/Sharing/Sharing.module.scss @@ -181,3 +181,13 @@ } } } + +:global { + [data-theme="dark"] { + :local { + .link { + filter: brightness(0.85) contrast(1.1); + } + } + } +} diff --git a/src/components/Widgets/SocialMedia/SocialMedia.module.scss b/src/components/Widgets/SocialMedia/SocialMedia.module.scss index 5dfdcb7..373cefb 100644 --- a/src/components/Widgets/SocialMedia/SocialMedia.module.scss +++ b/src/components/Widgets/SocialMedia/SocialMedia.module.scss @@ -46,3 +46,13 @@ transform: scale(0.9); } } + +:global { + [data-theme="dark"] { + :local { + .icon { + filter: brightness(0.85) contrast(1.1); + } + } + } +} diff --git a/src/components/Widgets/SocialMedia/SocialMedia.tsx b/src/components/Widgets/SocialMedia/SocialMedia.tsx index 351fd48..e4151fc 100644 --- a/src/components/Widgets/SocialMedia/SocialMedia.tsx +++ b/src/components/Widgets/SocialMedia/SocialMedia.tsx @@ -22,13 +22,13 @@ const SocialMedia = ({ const getIcon = (id: string) => { switch (id) { case 'github': - return <GithubIcon />; + return <GithubIcon className={styles.icon} />; case 'gitlab': - return <GitlabIcon />; + return <GitlabIcon className={styles.icon} />; case 'linkedin': - return <LinkedInIcon />; + return <LinkedInIcon className={styles.icon} />; case 'twitter': - return <TwitterIcon />; + return <TwitterIcon className={styles.icon} />; default: break; } |