diff --git a/.storybook/styles.css b/.storybook/styles.css index 5d020a0..1beae7c 100644 --- a/.storybook/styles.css +++ b/.storybook/styles.css @@ -5,8 +5,9 @@ } .sb-show-main.light-mode { - background: #fff; + background: #fafafa; } + .sb-show-main.dark-mode { background: #191a1f; } diff --git a/components/base-layout/index.module.scss b/components/base-layout/index.module.scss index 5d4185b..69f7d4b 100644 --- a/components/base-layout/index.module.scss +++ b/components/base-layout/index.module.scss @@ -3,14 +3,3 @@ .root { padding: 0; } - -.container { - max-width: 1440px; - padding: 20px; -} - -.header { - display: flex; - align-items: center; - justify-content: space-between; -} diff --git a/components/base-layout/index.tsx b/components/base-layout/index.tsx index c2bbb3e..2c20bf3 100644 --- a/components/base-layout/index.tsx +++ b/components/base-layout/index.tsx @@ -1,9 +1,8 @@ import React from 'react' import PropTypes from 'prop-types' -import { DarkModeToggle } from 'components/dark-mode-toggle' +import { Header } from 'components/header' import styles from './index.module.scss' -import { Typography } from 'components/typography' type BaseLayoutProps = { children: PropTypes.ReactNodeLike @@ -12,13 +11,8 @@ type BaseLayoutProps = { const BaseLayout = ({ children }: BaseLayoutProps) => { return (
-
-
- Menu - -
-
-
{children}
+
+ {children}
) } diff --git a/components/header/index.module.scss b/components/header/index.module.scss new file mode 100644 index 0000000..26a3353 --- /dev/null +++ b/components/header/index.module.scss @@ -0,0 +1,30 @@ +@import '../../styles/variables.scss'; + +.root { + padding: 0; +} + +.container { + max-width: 1440px; + height: 64px; + padding: 0 20px; +} + +.header { + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; +} + +.item { + background: $off-white; + border-radius: 16px; + box-shadow: 0 0 10px rgba($off-white, 0.5); + transition: all 0.2s ease; +} + +.dark { + background: $dark-black; + box-shadow: 0 0 10px rgba($dark-black, 0.5); +} diff --git a/components/header/index.tsx b/components/header/index.tsx new file mode 100644 index 0000000..730f15b --- /dev/null +++ b/components/header/index.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import useDarkMode from 'use-dark-mode' +import classnames from 'classnames' +import { DarkModeToggle } from 'components/dark-mode-toggle' +import { Typography } from 'components/typography' +import { Sticky } from 'components/sticky' + +import styles from './index.module.scss' + +const Header = () => { + const { value: isDark } = useDarkMode(false) + const itemClassName = classnames(styles.item, { [styles.dark]: isDark }) + return ( + +
+
+
+
+ Menu +
+
+ +
+
+
+
+ + ) +} + +export { Header } diff --git a/components/sticky/index.module.scss b/components/sticky/index.module.scss new file mode 100644 index 0000000..e39ca79 --- /dev/null +++ b/components/sticky/index.module.scss @@ -0,0 +1,14 @@ +@import '../../styles/variables.scss'; + +.root { + position: relative; + width: 100%; +} + +.sticky { + position: fixed; + top: 0; + left: 0; + z-index: 3; + width: 100%; +} diff --git a/components/sticky/index.tsx b/components/sticky/index.tsx new file mode 100644 index 0000000..57b356e --- /dev/null +++ b/components/sticky/index.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import styles from './index.module.scss' + +type StickyProps = { + children: PropTypes.ReactNodeLike +} + +const Sticky = ({ children }: StickyProps) => { + return ( +
+
{children}
+
+ ) +} + +export { Sticky } diff --git a/pages/index.module.scss b/pages/index.module.scss index 4a432df..4cafdf8 100644 --- a/pages/index.module.scss +++ b/pages/index.module.scss @@ -2,10 +2,11 @@ .container { display: flex; - align-items: flex-start; + align-items: center; justify-content: space-between; width: 100%; max-width: 960px; + min-height: 100vh; padding: 52px 20px; margin: 0 auto; } @@ -31,7 +32,7 @@ justify-content: center; width: 100%; max-width: 540px; - padding: 41px 0 38px; + padding: 41px 0 0; } .background { diff --git a/pages/index.tsx b/pages/index.tsx index 2c0d365..fa156a3 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useMemo } from 'react' import { NextPage } from 'next' import useDarkMode from 'use-dark-mode' import { LazyImage } from 'components/lazy-image' @@ -13,14 +13,14 @@ import styles from './index.module.scss' const getRandomNumber = (min = 1, max = 3) => Math.floor(Math.random() * max) + min const unsplashImagesUrls = [ - 'https://unsplash.com/photos/F573ZRbKOEw', - 'https://unsplash.com/photos/k0JNJRbrJAs', - 'https://unsplash.com/photos/f9oQZOk9vnk', + 'https://unsplash.com/photos/zKnQnyARggY', + 'https://unsplash.com/photos/UQAQm_EpWR8', + 'https://unsplash.com/photos/IXUM4cJynP0', ] const Home: NextPage = () => { const { value: isDark } = useDarkMode(false) - const backgroundId = getRandomNumber() + const backgroundId = useMemo(() => getRandomNumber(), []) const onDrop = (acceptedFiles: File[]) => { console.log('acceptedFiles[0]', acceptedFiles[0]) } @@ -41,7 +41,7 @@ const Home: NextPage = () => { Just drag & drop an image and you will then get a downloadable file alongside some documentation on how to add the favicons. -
+
Created by 4 people on their 2020’s worldwide quarantine. Background image from{' '} diff --git a/public/images/unsplash-1@1x.jpg b/public/images/unsplash-1@1x.jpg index 06e870b..68f6855 100644 Binary files a/public/images/unsplash-1@1x.jpg and b/public/images/unsplash-1@1x.jpg differ diff --git a/public/images/unsplash-1@2x.jpg b/public/images/unsplash-1@2x.jpg index fad1fb1..5f4d68a 100644 Binary files a/public/images/unsplash-1@2x.jpg and b/public/images/unsplash-1@2x.jpg differ diff --git a/public/images/unsplash-1@placeholder.jpg b/public/images/unsplash-1@placeholder.jpg index 600cc90..74fa5c9 100644 Binary files a/public/images/unsplash-1@placeholder.jpg and b/public/images/unsplash-1@placeholder.jpg differ diff --git a/public/images/unsplash-2@1x.jpg b/public/images/unsplash-2@1x.jpg index b8b30d2..906bd5f 100644 Binary files a/public/images/unsplash-2@1x.jpg and b/public/images/unsplash-2@1x.jpg differ diff --git a/public/images/unsplash-2@2x.jpg b/public/images/unsplash-2@2x.jpg index 7efbfd2..993c78c 100644 Binary files a/public/images/unsplash-2@2x.jpg and b/public/images/unsplash-2@2x.jpg differ diff --git a/public/images/unsplash-2@placeholder.jpg b/public/images/unsplash-2@placeholder.jpg index 3fb9efe..cfb2d4b 100644 Binary files a/public/images/unsplash-2@placeholder.jpg and b/public/images/unsplash-2@placeholder.jpg differ diff --git a/public/images/unsplash-3@1x.jpg b/public/images/unsplash-3@1x.jpg index d62d949..afdd2e3 100644 Binary files a/public/images/unsplash-3@1x.jpg and b/public/images/unsplash-3@1x.jpg differ diff --git a/public/images/unsplash-3@2x.jpg b/public/images/unsplash-3@2x.jpg index c5a5b20..b80cc54 100644 Binary files a/public/images/unsplash-3@2x.jpg and b/public/images/unsplash-3@2x.jpg differ diff --git a/public/images/unsplash-3@placeholder.jpg b/public/images/unsplash-3@placeholder.jpg index ef90d59..e830d82 100644 Binary files a/public/images/unsplash-3@placeholder.jpg and b/public/images/unsplash-3@placeholder.jpg differ diff --git a/public/share.png b/public/share.png index f0e2824..df4f7d6 100644 Binary files a/public/share.png and b/public/share.png differ diff --git a/styles/main.scss b/styles/main.scss index edde9ac..f282a6a 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -18,7 +18,7 @@ body { transition: background 0.2s ease; &.light-mode { - background: $white; + background: $off-white; } &.dark-mode { @@ -33,6 +33,13 @@ body { hr { height: 1px; margin: 16px 0; - background-color: $light-grey; + background: $light-grey; border: none; + transition: background 0.2s ease; +} + +.dark-mode { + hr { + background: $darker-grey; + } }