diff --git a/public/images/muro_is_lost.svg b/public/images/muro_is_lost.svg new file mode 100644 index 00000000..19d1fd5e --- /dev/null +++ b/public/images/muro_is_lost.svg @@ -0,0 +1,1266 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx index 5035fb64..af5e191c 100644 --- a/src/components/input/Button/index.tsx +++ b/src/components/input/Button/index.tsx @@ -15,7 +15,7 @@ type IButtonProps = DetailedHTMLProps< HTMLButtonElement > & { size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small'; - color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab'; + color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab' | 'outline-white'; iconLeft?: IIcon; iconRight?: IIcon; title?: string; @@ -48,8 +48,8 @@ const Button: FC = memo( disabled, stretchy, icon: ((iconLeft || iconRight) && !title && !children) || iconOnly, - has_icon_left: !!iconLeft, - has_icon_right: !!iconRight, + [styles.has_icon_left]: !!iconLeft, + [styles.has_icon_right]: !!iconRight, round, }), [ diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss index 602a4918..15b61d20 100644 --- a/src/components/input/Button/styles.module.scss +++ b/src/components/input/Button/styles.module.scss @@ -104,12 +104,12 @@ } } - &:global(.has_icon_left) { + &.has_icon_left { padding-left: $gap; padding-right: $gap; } - &:global(.has_icon_right) { + &.has_icon_right { padding-left: $gap; padding-right: $gap; } @@ -124,6 +124,16 @@ } } + &.outline-white { + background: transparent; + box-shadow: inset transparentize(white, 0) 0 0 0 2px; + color: transparentize(white, 0); + + svg { + fill: transparentize(white, 0); + } + } + &.gray { background: lighten($content_bg, 8%); } @@ -191,12 +201,17 @@ .giant { height: 50px; - padding: 0 15px; + padding: 0 30px; min-width: 50px; &:global(.round) { border-radius: 25px; } + + &.has_icon_left { + padding-left: 20px; + padding-right: 30px; + } } .disabled { diff --git a/src/layouts/BorisLayout/styles.module.scss b/src/layouts/BorisLayout/styles.module.scss index fdff92fd..7fbc7cf7 100644 --- a/src/layouts/BorisLayout/styles.module.scss +++ b/src/layouts/BorisLayout/styles.module.scss @@ -76,8 +76,7 @@ display: flex; align-items: flex-start; justify-content: flex-end; - font: $font_48_bold; - font-size: 72px; + font: $font_boris; line-height: 0.95em; flex-direction: column; padding: 0 0 $gap * 2; diff --git a/src/layouts/NotFoundLayout/index.tsx b/src/layouts/NotFoundLayout/index.tsx new file mode 100644 index 00000000..fc546942 --- /dev/null +++ b/src/layouts/NotFoundLayout/index.tsx @@ -0,0 +1,40 @@ +import React, { useCallback, VFC } from 'react'; + +import { useRouter } from 'next/router'; + +import { Button } from '~/components/input/Button'; +import { URLS } from '~/constants/urls'; + +import styles from './styles.module.scss'; + +interface NotFoundLayoutProps {} + +const NotFoundLayout: VFC = () => { + const nextRouter = useRouter(); + const goHome = useCallback(() => nextRouter.replace(URLS.BASE), [nextRouter]); + + return ( +
+
+
+
+

Потерян навсегда

+

Этой страницы никогда не существовало.

+ + +
+
+
+
+ ); +}; + +export { NotFoundLayout }; diff --git a/src/layouts/NotFoundLayout/styles.module.scss b/src/layouts/NotFoundLayout/styles.module.scss new file mode 100644 index 00000000..b69478bf --- /dev/null +++ b/src/layouts/NotFoundLayout/styles.module.scss @@ -0,0 +1,78 @@ +@import "src/styles/variables"; +@import "src/styles/mixins"; + +.background { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: #0b0b28 url('/images/muro_is_lost.svg') 50% 100% no-repeat; + background-size: cover; + z-index: 0; + + @media (orientation: portrait) { + background-size: auto 50vh; + } +} + +.wrap { + position: absolute; + z-index: 10; + height: 100%; + width: 100%; +} + +.block { + @include container; + + margin: auto; + height: 100%; + text-transform: uppercase; + display: flex; + align-items: center; +} + +.text { + width: 100%; + max-width: 400px; + padding-bottom: 25%; + display: flex; + flex-direction: column; + align-items: flex-start; + + @include tablet { + padding: 0 $gap 75% $gap; + text-align: center; + } + + @media (orientation: portrait) { + align-items: center; + } + + h1 { + font: $font_boris; + line-height: 1em; + + @include tablet { + font-size: 32px; + line-height: 1.4em; + } + } +} + +.caption { + font: $font_24_regular; + line-height: 1.5em; + margin-top: 1em; + + @include tablet { + font: $font_14_regular; + line-height: 2em; + } +} + +button.button { + opacity: 0.5; + margin-top: 30px; +} diff --git a/src/pages/404.tsx b/src/pages/404.tsx new file mode 100644 index 00000000..2a73cd09 --- /dev/null +++ b/src/pages/404.tsx @@ -0,0 +1,7 @@ +import { NotFoundLayout } from '~/layouts/NotFoundLayout'; + +const NotFoundPage = () => { + return ; +}; + +export default NotFoundPage; diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 584438cd..9c623345 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -39,3 +39,4 @@ $font_8_semibold: $semibold 8px $font; $font_cell_title: $font_24_semibold; $font_hero_title: $bold 40px $font; +$font_boris: $bold 72px $font; diff --git a/src/styles/_global.scss b/src/styles/_global.scss index c073498c..d14f2b19 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -161,3 +161,7 @@ p { margin-bottom: 0; } } + +#__next { + min-height: 100vh; +} diff --git a/yarn.lock b/yarn.lock index d7e2a63e..f737e1bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2300,9 +2300,9 @@ react-dom@^17.0.2: scheduler "^0.20.2" react-dropzone@^11.4.2: - version "11.5.1" - resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.5.1.tgz#f4d664437bf8af6acfccbf5040a9890c6780a49f" - integrity sha512-eNhttdq4ZDe3eKbXAe54Opt+sbtqmNK5NWTHf/l5d+1TdZqShJ8gMjBrya00qx5zkI//TYxRhu1d9pemTgaWwg== + version "11.5.3" + resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.5.3.tgz#757d4980fcae839896a894e41d3e72df04981f86" + integrity sha512-68+T6sWW5L89qJnn3SD1aRazhuRBhTT9JOI1W8vI5YWsfegM4C7tlGbPH1AgEbmZY5s8E8L0QhX0e3VdAa0KWA== dependencies: attr-accept "^2.2.1" file-selector "^0.2.2"