diff --git a/.all-contributorsrc b/.all-contributorsrc index 06f0dbb..6c01068 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -51,6 +51,16 @@ "code", "review" ] + }, + { + "login": "miguellteixeira", + "name": "Miguel Teixeira", + "avatar_url": "https://avatars1.githubusercontent.com/u/17954325?v=4", + "profile": "https://github.com/miguellteixeira", + "contributions": [ + "code", + "review" + ] } ], "contributorsPerLine": 7 diff --git a/.eslintrc.json b/.eslintrc.json index 3c18468..c752bfb 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -28,6 +28,7 @@ "@typescript-eslint/member-delimiter-style": "off", "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/ban-ts-ignore": "off", + "@typescript-eslint/ban-ts-comment": "off", "@typescript-eslint/explicit-module-boundary-types": "off", "@typescript-eslint/no-unsafe-call": "off", "@typescript-eslint/no-extra-semi": "off", diff --git a/.stylelintrc.json b/.stylelintrc.json index f52b8ef..5f77f7b 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -5,8 +5,14 @@ "stylelint-config-css-modules", "stylelint-config-prettier" ], - "plugins": ["stylelint-prettier"], + "plugins": ["stylelint-scss", "stylelint-prettier"], "rules": { - "prettier/prettier": true + "prettier/prettier": true, + "at-rule-no-unknown": [ + true, + { + "ignoreAtRules": ["mixin", "include"] + } + ] } } diff --git a/README.md b/README.md index d04b8f6..f078289 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ A small online tool to help you generate your favicon in all the sizes and formats you need. -[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-) +[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-) ![Release](https://github.com/ruisaraiva19/favycon/workflows/Release/badge.svg) ![Lint](https://github.com/ruisaraiva19/favycon/workflows/Lint/badge.svg) @@ -110,14 +110,15 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d - - - - + + + + +

Rui Saraiva

πŸš‡ πŸ’» πŸ“– πŸ’¬ 🚧

Eduardo Pinto

πŸ’» πŸ‘€

Augusto Lopes

🎨

RogΓ©rio Moreira

πŸ’» πŸ‘€

Rui Saraiva

πŸš‡ πŸ’» πŸ“– πŸ’¬ 🚧

Eduardo Pinto

πŸ’» πŸ‘€

Augusto Lopes

🎨

RogΓ©rio Moreira

πŸ’» πŸ‘€

Miguel Teixeira

πŸ’» πŸ‘€
- + diff --git a/components/base-layout/index.module.scss b/components/base-layout/index.module.scss index 69f7d4b..36a943e 100644 --- a/components/base-layout/index.module.scss +++ b/components/base-layout/index.module.scss @@ -2,4 +2,5 @@ .root { padding: 0; + overflow: hidden; } diff --git a/components/button/index.module.scss b/components/button/index.module.scss index e44dc07..1a83a6a 100644 --- a/components/button/index.module.scss +++ b/components/button/index.module.scss @@ -10,18 +10,24 @@ border-radius: 4px; transition: all 0.2s ease; + @include breakpoint-md { + padding: 9px 12px; + } + &:hover, &:focus, &:active { outline: none; } - &:hover { - transform: translate3d(0, -2px, 0); - } + @media (pointer: fine) { + &:hover { + transform: translate3d(0, -2px, 0); + } - &:active { - transform: translate3d(0, 0, 0); + &:active { + transform: translate3d(0, 0, 0); + } } } @@ -52,14 +58,34 @@ padding: 5px 0; background: transparent; border: 1px solid transparent; + + @include breakpoint-md { + padding: 9px 0; + } +} + +:global(.dark-mode) .transparent { + @include breakpoint-md { + background: $dark-grey; + } +} + +.modalClose { + composes: base; + padding: 5px 16px; + background-color: $off-white; + border: 1px solid $light-grey; + border-radius: 18px; } .regularTransparent { - composes: transparent; + composes: base; padding: 0; font-size: $font-size-regular-body; line-height: $line-height-regular-body; text-decoration: none; + background: transparent; + border: 1px solid transparent; border: 0; } @@ -89,6 +115,10 @@ :global(.dark-mode) .gray { color: $grey-dark; + + @include breakpoint-md { + color: $off-white-dark; + } } .white { @@ -150,3 +180,13 @@ border-color: $green-hover; } } + +.bgDarkGray { + background: $dark-grey; + border-color: $dark-grey; + + &:hover { + background: $darker-grey; + border-color: $darker-grey; + } +} diff --git a/components/button/index.tsx b/components/button/index.tsx index c10e53a..b2ac0ce 100644 --- a/components/button/index.tsx +++ b/components/button/index.tsx @@ -6,10 +6,10 @@ import styles from './index.module.scss' type ButtonProps = { children: PropTypes.ReactNodeLike - variant: 'primary' | 'transparent' | 'regularTransparent' + variant: 'primary' | 'transparent' | 'regularTransparent' | 'modalClose' weight: 'regular' | 'medium' | 'semiBold' | 'bold' color: 'black' | 'gray' | 'white' | 'link' - background: 'bgLink' | 'bgGreen' + background: 'bgLink' | 'bgGreen' | 'bgDarkGray' } const Button = ({ diff --git a/components/dark-mode-toggle/index.module.scss b/components/dark-mode-toggle/index.module.scss index 549d29e..45db760 100644 --- a/components/dark-mode-toggle/index.module.scss +++ b/components/dark-mode-toggle/index.module.scss @@ -72,19 +72,23 @@ .sun, .moon { path { - fill: #657584; + fill: $grey-dark; } } } :global(.light-mode) .label { - &:hover path { - fill: $link; + @media (pointer: fine) { + &:hover path { + fill: $link; + } } } :global(.dark-mode) .label { - &:hover path { - fill: $link-dark; + @media (pointer: fine) { + &:hover path { + fill: $link-dark; + } } } diff --git a/components/drag-and-drop/index.module.scss b/components/drag-and-drop/index.module.scss index 949baf1..848d684 100644 --- a/components/drag-and-drop/index.module.scss +++ b/components/drag-and-drop/index.module.scss @@ -9,10 +9,28 @@ border-radius: 8px; box-shadow: 0 2px 4px rgba($black, 0.12); transition: background 0.2s ease; + + @include breakpoint-md { + max-width: 100%; + height: 100%; + border-radius: 0; + } + + &.transparent { + @include breakpoint-md { + background: transparent; + } + } } :global(.dark-mode) .root { background: $dark-black; + + &.transparent { + @include breakpoint-md { + background: transparent; + } + } } .container { @@ -25,6 +43,21 @@ pointer-events: none; opacity: 0.32; } + + @include breakpoint-md { + display: flex; + flex-direction: column; + width: 100%; + height: calc(100% - 68px); + margin-top: 68px; + border-radius: 0; + } + + &.transparent { + @include breakpoint-md { + padding: 0; + } + } } .dashed { @@ -67,6 +100,13 @@ border-radius: 6px; transition: background 0.2s ease; + @include breakpoint-md { + flex-grow: 1; + margin-bottom: 0; + background: transparent; + border-radius: 0; + } + &:hover { cursor: pointer; @@ -79,6 +119,10 @@ :global(.dark-mode) .dropZoneWrapper { background: $dark-grey; + @include breakpoint-md { + background: transparent; + } + &:hover { .dashed rect { stroke: $off-white-dark; @@ -95,6 +139,32 @@ } } +.dropZoneFooter { + transition: background 0.2s ease; + + @include breakpoint-md { + padding: 16px 24px 24px; + padding-bottom: env(safe-area-inset-bottom); + background: rgba($white, 0.88); + border-radius: 16px 16px 0 0; + box-shadow: 0 -2px 4px rgba($black, 0.12); + + @supports (padding: max(1px)) { + padding-bottom: max(24px, env(safe-area-inset-bottom)); + } + + p { + font-size: 15px; + } + } +} + +:global(.dark-mode) .dropZoneFooter { + @include breakpoint-md { + background: rgba($dark-black, 0.88); + } +} + .dropZone { position: relative; z-index: 2; @@ -126,25 +196,56 @@ &.dragActive { height: 48px; } + + @include breakpoint-md { + font-size: 16px; + font-weight: 600; + line-height: 28px; + color: $off-white-dark; + } + + &.mobileUploadText { + @include breakpoint-md-up { + display: none; + } + } + + &.desktopUploadText { + /* smartphones, touchscreens */ + @media (hover: none) and (pointer: coarse) { + display: none; + } + @include breakpoint-md { + display: none; + } + } } :global(.dark-mode) .imageUploadText { color: $white-dark; + + @include breakpoint-md { + color: $off-white-dark; + } } .info { display: flex; - align-items: center; + align-items: flex-start; margin-top: 8px; letter-spacing: 0.2px; svg { flex: 0 0 20px; margin-right: 8px; + + @include breakpoint-md { + height: 24px; + } } strong { - padding: 0 4px; + // padding: 0 4px; font-weight: 700; } } @@ -209,6 +310,7 @@ .imageInfo { display: flex; + flex-wrap: wrap; padding: 16px 0; border-top: 1px solid $light-grey; transition: all 0.2s ease; @@ -222,17 +324,16 @@ padding: 8px 0 16px; border-top: 1px solid $light-grey; transition: all 0.2s ease; + + @include breakpoint-md { + padding: 24px 0; + } } :global(.dark-mode) .imageOptionsWrapper { border-top: 1px solid $dark-grey; } -.imageOptions { - display: flex; - padding: 8px 0 16px; -} - .imageInfoItem { display: flex; align-items: center; @@ -241,6 +342,24 @@ span { margin-right: 8px; } + + @include breakpoint-md { + margin-top: 8px; + margin-bottom: 8px; + } +} + +.imageOptions { + display: flex; + flex-wrap: wrap; + padding: 8px 0 16px; + + .imageInfoItem { + @include breakpoint-md { + margin-top: 0; + margin-bottom: 24px; + } + } } .pwaCheck { @@ -259,6 +378,10 @@ align-items: center; justify-content: center; margin: 16px 0 12px; + + @include breakpoint-md { + align-items: flex-end; + } } .preview { @@ -269,15 +392,39 @@ background: $white; box-shadow: 0 2px 4px rgba($black, 0.12); + @include breakpoint-md { + width: 96px; + height: 96px; + margin-right: 0; + } + img { width: 40px; height: 40px; object-fit: contain; + + @include breakpoint-md { + width: 96px; + height: 96px; + } } &.circle, &.circle img { border-radius: 24px; + + @include breakpoint-md { + width: 52px; + height: 52px; + border-radius: 26px; + } + } + + &.circle { + @include breakpoint-md { + z-index: 1; + transform: translate3d(21px, 3px, 0); + } } &.square, @@ -285,12 +432,31 @@ width: 48px; height: 48px; border-radius: 4px; + + @include breakpoint-md { + width: 96px; + height: 96px; + border-radius: 8px; + } } &.rounded, &.rounded img { margin-right: 0; border-radius: 14px; + + @include breakpoint-md { + width: 40px; + height: 40px; + border-radius: 13px; + } + } + + &.rounded { + @include breakpoint-md { + z-index: 1; + transform: translate3d(-12px, 3px, 0); + } } } @@ -339,14 +505,32 @@ padding: 23px 24px 24px 24px; border-top: 1px solid $light-grey; transition: all 0.2s ease; + + &.spaceBetween { + justify-content: space-between; + } + + @include breakpoint-md { + flex-direction: column-reverse; + padding: 11px 24px 12px 24px; + border-top: 1px solid transparent; + + > * { + margin-bottom: 12px; + } + } + + @include breakpoint-xs { + align-items: stretch; + } } :global(.dark-mode) .imageFooter { border-top: 1px solid $dark-grey; -} -.spaceBetween { - justify-content: space-between; + @include breakpoint-md { + border-top: 1px solid transparent; + } } .makeNewOne { @@ -377,12 +561,20 @@ .imageGenerate { margin-left: 24px; + + @include breakpoint-md { + margin-left: 0; + } } .modalContainer { max-width: 730px; height: 100%; margin: 0 auto; + + @include breakpoint-md { + padding-top: 20px; + } } .modalHeader { @@ -392,13 +584,23 @@ margin-bottom: 10px; } -.modalCode { - height: 100%; - max-height: 488px; - padding: 28px; - color: $white; - background: $darker-grey; - border-radius: 8px; +.modalHeaderMobile { + display: none; + padding: 36px 32px 8px; + margin-bottom: 0; + + @include breakpoint-md { + display: flex; + background: $dark-black; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + } +} + +.modalHeaderDesktop { + @include breakpoint-md { + display: none; + } } .overlay { @@ -422,8 +624,8 @@ width: 100%; max-width: 730px; height: 100%; - max-height: 536px; - padding: 0; + max-height: 538px; + padding: 2px 0 0; overflow: auto; background: transparent; border: none; @@ -431,6 +633,11 @@ outline: none; transform: translate(-50%, -50%); -webkit-overflow-scrolling: touch; + + @include breakpoint-md { + max-height: 100vh; + padding: 0; + } } .copyWrapper { @@ -460,3 +667,73 @@ :global(.dark-mode) .copyWrapper::before { color: $off-white-dark; } + +.modalCode { + position: relative; + height: 100%; + max-height: 488px; + padding: 28px; + color: $white; + background: $dark-black; + border-radius: 8px; + + @include breakpoint-md { + max-height: calc(100% - 84px); + border-radius: 0; + } + + &::before { + z-index: 2; + @include breakpoint-md { + position: absolute; + right: -1px; + bottom: 28px; + left: 0; + height: 136px; + content: ''; + background: linear-gradient(to bottom, rgba($dark-black, 0), rgba($dark-black, 1)); + } + } + + .copyWrapper { + z-index: 3; + display: none; + + @include breakpoint-md { + position: absolute; + right: 24px; + bottom: 80px; + left: 24px; + display: block; + + button { + width: 100%; + } + } + } + + pre { + position: relative; + z-index: 1; + + @include breakpoint-md { + max-height: calc(100% - 68px); + padding-bottom: 104px; + } + } + + pre code { + @include breakpoint-md { + white-space: pre-wrap; + } + } +} + +.modalCodeTitle { + display: none; + + @include breakpoint-md { + display: block; + margin-bottom: 20px; + } +} diff --git a/components/drag-and-drop/index.tsx b/components/drag-and-drop/index.tsx index a1b896d..919090c 100644 --- a/components/drag-and-drop/index.tsx +++ b/components/drag-and-drop/index.tsx @@ -23,6 +23,8 @@ import { Button } from 'components/button' import { SvgCheck } from 'components/svgs/svg-check' import { SvgError } from 'components/svgs/svg-error' import { Checkbox } from 'components/checkbox' +import { useToggle } from 'hooks/use-toggle' +import { useMediaQueryContext } from 'components/media-query-provider' import styles from './index.module.scss' @@ -31,11 +33,12 @@ const Clipboard = dynamic(() => import('react-clipboard.js')) type DragAndDropProps = { onFile: (hasFile: boolean) => void - onGenerate: (image: File, pwa: boolean) => Promise + onGenerate: (image: File, pwa: boolean, darkMode: boolean) => Promise onError: (message: string) => void } const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { + const { isMobile } = useMediaQueryContext() const [imageSizes, setImageSizes] = useState({ width: 0, height: 0 }) const [image, setImage] = useState() const [imageBase64, setImageBase64] = useState('') @@ -48,8 +51,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { const [is310px, setIs310px] = useState(false) const [is512px, setIs512px] = useState(false) const [isLoading, setIsLoading] = useState(false) - const [pwa, setPwa] = useState(false) - const [darkMode, setDarkMode] = useState(false) + const [pwa, togglePwa] = useToggle(false) + const [darkMode, toggleDarkMode] = useToggle(false) const [zipData, setZipData] = useState() const [isModalOpen, setIsModalOpen] = useState(false) const [copied, setCopied] = useState(false) @@ -84,10 +87,11 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { if (image) { reader.readAsDataURL(image) const matches = /(.+)(\..+)$/.exec(image.name) as RegExpExecArray - const name = matches[1].length > 30 ? `${matches[1].slice(0, 30)}..` : matches[1].slice(0, 30) + const length = isMobile ? 15 : 30 + const name = matches[1].length > length ? `${matches[1].slice(0, length)}..` : matches[1].slice(0, length) setImageData({ name, extension: matches[2] }) } - }, [image, zipData, generateImgFromCanvas]) + }, [image, zipData, generateImgFromCanvas, isMobile]) useEffect(() => { if (!image) { @@ -110,10 +114,10 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { const generateFavicon = async (file: File) => { try { setIsLoading(true) - const zip = await onGenerate(file, pwa) + const zip = await onGenerate(file, pwa, darkMode) setZipData(zip) } catch (error) { - console.log(error) + onError(error.message || 'Something went wrong. Please try again.') } finally { setIsLoading(false) } @@ -171,8 +175,12 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { const [isHover, setIsHover] = useState(false) return ( -
-
+
+
{!image && !zipData && ( <>
{ + + Generate all the sizes for your +
+ favicon. Tap to upload a file. +
+
+ Drag &  @@ -211,13 +234,17 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
- {/* */} - - We recommend a square PNG or SVG with at least 310px - - - No data or images are stored - +
+ + {' '} + + We recommend a square PNG or SVG with at least 310px + + + + No data or images are stored + +
)} {image && !zipData && ( @@ -279,7 +306,7 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { name="pwa" id="pwa" disabled={PWADisabled} - onChange={() => setPwa(!pwa)} + onChange={togglePwa} data-cy="preview-pwa-compatible"> PWA compatible @@ -295,13 +322,13 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { name="dark" id="dark" disabled - onChange={() => setDarkMode(!darkMode)} + onChange={toggleDarkMode} data-cy="preview-dark-mode-version"> Dark Mode version - Available soon + Coming soon
@@ -384,7 +411,19 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { closeTimeoutMS={200} contentLabel="Code generated">
-
+
+ + Code + + +
+
Insert the following code in the <head> section of your pages: @@ -400,7 +439,25 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
+ + Insert the following code in the <head> section of your pages: + + +
+ +
+
diff --git a/components/favycon-error/index.module.scss b/components/favycon-error/index.module.scss index 1bb4e3c..41f4cb1 100644 --- a/components/favycon-error/index.module.scss +++ b/components/favycon-error/index.module.scss @@ -4,6 +4,7 @@ position: absolute; top: 26px; right: 72px; + z-index: 10; display: flex; align-items: center; padding: 6px 13px 6px 16px; @@ -11,6 +12,21 @@ border-radius: 8px; box-shadow: 0 2px 4px rgba($black, 0.12); + @include breakpoint-md { + top: 13px; + right: 12px; + left: 12px; + justify-content: center; + max-width: 400px; + margin: auto; + } + + .content { + @include breakpoint-md { + font-size: 14px; + } + } + svg { margin-left: 13px; } diff --git a/components/favycon-error/index.tsx b/components/favycon-error/index.tsx index c1dc9c1..4094c5b 100644 --- a/components/favycon-error/index.tsx +++ b/components/favycon-error/index.tsx @@ -33,7 +33,12 @@ const FavyconError = ({ error, clearError }: FavyconErrorProps) => { return (
- + {error} diff --git a/components/favycon-info/index.module.scss b/components/favycon-info/index.module.scss index 2b1904d..3776900 100644 --- a/components/favycon-info/index.module.scss +++ b/components/favycon-info/index.module.scss @@ -1,8 +1,50 @@ @import '../../styles/variables.scss'; .root { + position: relative; width: 100%; max-width: 350px; + + @include breakpoint-md { + position: absolute; + top: 32px; + right: 72px; + z-index: 3; + display: block; + width: 80px; + max-width: 100%; + } +} + +.bodyMobile { + display: none; + + @include breakpoint-md { + display: block; + } +} + +.bodyDesktop { + @include breakpoint-md { + display: none; + } +} + +.modalBodyScroll { + height: calc(100% - 96px); + overflow: auto; +} + +.button { + color: $black !important; + background: $light-grey !important; + border: 1px solid $light-grey !important; +} + +:global(.dark-mode) .button { + color: $off-white-dark !important; + background: $dark-grey !important; + border: 1px solid $dark-grey !important; } .firstParagraph { @@ -14,11 +56,15 @@ margin-top: 16px; margin-bottom: 60px; letter-spacing: 0.2px; + + @include breakpoint-md { + margin-bottom: 24px; + } } :global(.dark-mode) .firstParagraph, :global(.dark-mode) .secondParagraph { - color: $white-dark; + color: $white-dark !important; } .peopleButton { @@ -47,6 +93,10 @@ color: $link; } } + + @include breakpoint-md { + margin-top: 12px; + } } :global(.dark-mode) .footer { @@ -91,27 +141,83 @@ box-shadow: 0 2px 4px rgba($black, 0.12); transform: translate(-50%, -50%); -webkit-overflow-scrolling: touch; + + @include breakpoint-md { + height: 100%; + max-height: 100vh; + padding-top: 20px; + background: transparent; + border-radius: 0; + } } :global(.dark-mode) .content { background: $dark-black; + + @include breakpoint-md { + background: transparent; + } } .modalContainer { max-width: 572px; padding: 0 16px; margin: 0 auto; + background: $white; + + @include breakpoint-md { + height: 100%; + padding: 0; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + + > * { + padding: 0 32px; + } + } +} + +:global(.dark-mode) .modalContainer { + background: $dark-black; +} + +.modalHeaderTop { + display: flex; + align-items: center; + justify-content: space-between; + padding: 28px 0 16px; +} + +.modalHeaderMobile { + display: none; + + @include breakpoint-md { + display: block; + } } .modalHeader { padding-top: 48px; text-align: center; + + @include breakpoint-md { + text-align: left; + } +} + +.logoMobile { + width: 52px; + height: 52px; } .logo { width: 96px; height: 96px; margin-bottom: 16px; + + @include breakpoint-md { + display: none; + } } .title { @@ -122,6 +228,12 @@ margin-bottom: 24px; } +:global(.dark-mode) .subTitle { + @include breakpoint-md { + color: $white-dark !important; + } +} + .hr { padding: 0; margin: 0; @@ -138,6 +250,10 @@ display: flex; width: calc(50% - 15px); margin-top: 24px; + + @include breakpoint-xs { + width: 100%; + } } .personAvatar { @@ -145,6 +261,12 @@ margin-right: 16px; } +:global(.dark-mode) .personRole { + @include breakpoint-md { + color: $white-dark !important; + } +} + .personTwitter { color: #55acee; text-decoration: none; @@ -180,4 +302,8 @@ padding-bottom: 48px; margin-top: 12px; text-align: center; + + @include breakpoint-md { + text-align: left; + } } diff --git a/components/favycon-info/index.tsx b/components/favycon-info/index.tsx index 81e082f..e232f8a 100644 --- a/components/favycon-info/index.tsx +++ b/components/favycon-info/index.tsx @@ -8,6 +8,7 @@ import { SvgTwitter } from 'components/svgs/svg-twitter' import styles from './index.module.scss' import { SvgFavycon } from 'components/svgs/svg-favycon' +import { Button } from 'components/button' const Modal = dynamic(() => import('react-modal')) @@ -34,30 +35,40 @@ const people = [ }, ] -const FavyconInfo = () => { +const FavyconInfo = ({ + className, + ...props +}: React.DetailedHTMLProps, HTMLDivElement>) => { const [isModalOpen, setIsModalOpen] = useState(false) return ( -
- - - A small online tool to help you generate your favicon in all the sizes and formats you need. - - - Just drag & drop an image and you will then get a downloadable file alongside some documentation on how to - add the favicons. - -
- - Created by{' '} - {' '} - on their 2020’s worldwide quarantine. Background image from{' '} - - Unsplash - - . - +
+
+ +
+
+ + + A small online tool to help you generate your favicon in all the sizes and formats you need. + + + Just drag & drop an image and you will then get a downloadable file alongside some documentation on how to + add the favicons. + +
+ + Created by{' '} + {' '} + on their 2020’s worldwide quarantine. Background image from{' '} + + Unsplash + + . + +
{ closeTimeoutMS={200} contentLabel="About Us">
-
- {/* Favycon logo */} - - - Behind the curtains - - - For new updates be sure to follow these guys on Twitter. - +
+
+ + +
-
-
- {people.map((person) => ( -
-
- -
-
- - {person.name} - - - {person.role} - - - - {person.screenName} + -
-
- - Project on{' '} - - GitHub - - . Have feedback? Send it to{' '} - - hello@favycon.app - - + ))} +
+
+
+ + Project on{' '} + + GitHub + + . Have feedback? Send it to{' '} + + hello@favycon.app + + +
diff --git a/components/favycon-wizard/index.module.scss b/components/favycon-wizard/index.module.scss index ab53668..200d582 100644 --- a/components/favycon-wizard/index.module.scss +++ b/components/favycon-wizard/index.module.scss @@ -8,6 +8,11 @@ width: 100%; max-width: 540px; padding: 41px 0 0; + + @include breakpoint-md { + max-width: 100%; + padding: 0; + } } .background { @@ -28,10 +33,34 @@ bottom: 0; left: 0; z-index: 0; - content: ''; + content: ' '; background: rgba($black, 0.16); border-radius: 8px; } + + @include breakpoint-md { + top: 0; + bottom: 0; + border-radius: 0; + transform: rotate(0); + + &::after { + background: rgba($black, 0.56); + border-radius: 0; + } + } +} + +.mobileBackground { + @include breakpoint-md-up { + display: none; + } +} + +.desktopBackground { + @include breakpoint-md { + display: none; + } } .image { @@ -42,11 +71,22 @@ width: 185px; height: 109px; opacity: 1; - transition: opacity 0.2s ease-in-out; - transform: translate(100%, -100%); + transition: all 0.2s ease-in-out; + transform: translate(160px, -96px); &.hide { pointer-events: none; + visibility: hidden; + opacity: 0; + } + + @media screen and (width >= 1280px) { + transform: translate(100%, -100%); + } + + @include breakpoint-lg { + pointer-events: none; + visibility: hidden; opacity: 0; } } diff --git a/components/favycon-wizard/index.tsx b/components/favycon-wizard/index.tsx index ffbc66d..ec6c580 100644 --- a/components/favycon-wizard/index.tsx +++ b/components/favycon-wizard/index.tsx @@ -10,17 +10,21 @@ type FavyconWizardProps = { showDndImage: boolean } +const unsplashImageProps = (isMobile: boolean) => ({ + src: `/images/unsplash${isMobile ? '-vertical' : ''}@1x.jpg`, + srcRetina: `/images/unsplash${isMobile ? '-vertical' : ''}@2x.jpg`, + srcPlaceholder: `/images/unsplash${isMobile ? '-vertical' : ''}@placeholder.jpg`, + alt: 'Unsplash', + aspectRatio: isMobile ? '614/768' : '540/354', + stretch: isMobile, +}) + const FavyconWizardComponent = ({ children, showDndImage }: FavyconWizardProps) => { return (
- + +
{children}
diff --git a/components/header/index.module.scss b/components/header/index.module.scss index cd83895..7a9e504 100644 --- a/components/header/index.module.scss +++ b/components/header/index.module.scss @@ -8,6 +8,11 @@ height: 68px; padding: 20px 20px 0 20px; margin: 0 auto; + + @include breakpoint-md { + height: 74px; + padding: 26px 26px 0 26px; + } } .header { @@ -15,6 +20,16 @@ align-items: center; justify-content: flex-end; height: 100%; + + @include breakpoint-md { + justify-content: space-between; + } +} + +.logo { + @include breakpoint-md-up { + display: none; + } } .item { @@ -23,14 +38,30 @@ box-shadow: 0 0 10px rgba($off-white, 0.5); transition: all 0.2s ease; + @include breakpoint-md { + background: transparent; + box-shadow: none; + } + a { display: flex; align-items: center; justify-content: center; } + + &:first-child { + svg { + width: 48px; + } + } } :global(.dark-mode) .item { background: $darker-black; box-shadow: 0 0 10px rgba($darker-black, 0.5); + + @include breakpoint-md { + background: transparent; + box-shadow: none; + } } diff --git a/components/header/index.tsx b/components/header/index.tsx index 755056b..9dac569 100644 --- a/components/header/index.tsx +++ b/components/header/index.tsx @@ -1,5 +1,7 @@ import React from 'react' +import classnames from 'classnames' import { DarkModeToggle } from 'components/dark-mode-toggle' +import { SvgFavycon } from 'components/svgs/svg-favycon' import { Sticky } from 'components/sticky' import styles from './index.module.scss' @@ -10,6 +12,9 @@ const Header = () => {
+
+ +
diff --git a/components/lazy-image/index.module.scss b/components/lazy-image/index.module.scss index 9388e59..a90bb60 100644 --- a/components/lazy-image/index.module.scss +++ b/components/lazy-image/index.module.scss @@ -3,6 +3,11 @@ .root { position: relative; width: 100%; + + &.stretch { + height: 100%; + padding-bottom: 0 !important; + } } .image { diff --git a/components/lazy-image/index.tsx b/components/lazy-image/index.tsx index 56bb891..3504dab 100644 --- a/components/lazy-image/index.tsx +++ b/components/lazy-image/index.tsx @@ -1,6 +1,7 @@ import React, { useRef, useEffect } from 'react' import { LazyImageFull, ImageState } from 'react-lazy-images' import objectFitImages from 'object-fit-images' +import classNames from 'classnames' import styles from './index.module.scss' @@ -10,9 +11,18 @@ type LazyImageProps = { srcPlaceholder?: string alt: string aspectRatio: string + stretch?: boolean } & React.DetailedHTMLProps, HTMLDivElement> -const LazyImage = ({ src, srcRetina = src, srcPlaceholder = src, alt, aspectRatio, ...props }: LazyImageProps) => { +const LazyImage = ({ + src, + srcRetina = src, + srcPlaceholder = src, + alt, + aspectRatio, + stretch = false, + ...props +}: LazyImageProps) => { const [widthString, heightString] = aspectRatio.split('/') const width = parseInt(widthString) const height = parseInt(heightString) @@ -30,7 +40,11 @@ const LazyImage = ({ src, srcRetina = src, srcPlaceholder = src, alt, aspectRati {({ imageProps, imageState, ref }) => { const loaded = imageState === ImageState.LoadSuccess return ( -
+
({ isMobile: false }) + +export const MediaQueryProvider = ({ children, isMobileDevice = false }: MediaQueryProviderProps) => { + const isMobile = useMedia('(max-width: 991px)', isMobileDevice) + const value = useMemo(() => ({ isMobile }), [isMobile]) + + return {children} +} + +MediaQueryProvider.propTypes = { + children: PropTypes.node.isRequired, + isMobileDevice: PropTypes.bool, +} + +export const useMediaQueryContext = () => useContext(MediaQueryContext) diff --git a/components/seo/index.tsx b/components/seo/index.tsx index d038e6f..88517a6 100644 --- a/components/seo/index.tsx +++ b/components/seo/index.tsx @@ -33,7 +33,7 @@ const SEO = ({ title, description }: SEOProps) => ( - + diff --git a/components/svgs/svg-appycon.tsx b/components/svgs/svg-appycon.tsx deleted file mode 100644 index fcfa1aa..0000000 --- a/components/svgs/svg-appycon.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react' -import { uniqueId } from 'utils/ids' - -const SvgAppycon: React.FC> = (props) => { - const idPrefix = uniqueId('svg-') - return ( - - Appycon logo - - - - - - - - - - - - - - - - - - - - - - ) -} - -export { SvgAppycon } diff --git a/components/svgs/svg-arrow-down.tsx b/components/svgs/svg-arrow-down.tsx deleted file mode 100644 index d308edd..0000000 --- a/components/svgs/svg-arrow-down.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import useDarkMode from 'use-dark-mode' -import { uniqueId } from 'utils/ids' - -const SvgArrowDown: React.FC> = (props) => { - const { value: isDark } = useDarkMode(false) - const idPrefix = uniqueId('svg-') - return ( - - Arrow down - - - ) -} - -export { SvgArrowDown } diff --git a/components/svgs/svg-checkbox.module.scss b/components/svgs/svg-checkbox.module.scss index 025bbe0..72fa6b1 100644 --- a/components/svgs/svg-checkbox.module.scss +++ b/components/svgs/svg-checkbox.module.scss @@ -1,8 +1,9 @@ @import '../../styles/variables.scss'; .unchecked { - fill: #f7f7f8; + fill: #f7f7f7; stroke: #ccc; + stroke-width: 1.5px; transition: all 100ms ease-in-out; &.disabled { @@ -13,11 +14,12 @@ :global(.dark-mode) .unchecked { fill: $dark-grey; - stroke: $grey-dark; + stroke: $darker-black; + stroke-width: 1.5px; &.disabled { fill: $dark-black; - stroke: $dark-grey; + stroke: $darker-black; } } diff --git a/components/svgs/svg-drop-zone.module.scss b/components/svgs/svg-drop-zone.module.scss index 25f7102..6419ac1 100644 --- a/components/svgs/svg-drop-zone.module.scss +++ b/components/svgs/svg-drop-zone.module.scss @@ -3,6 +3,10 @@ .rect { stroke: #ccc; transition: stroke 0.2s ease; + + @include breakpoint-md { + stroke-width: 0; + } } :global(.dark-mode) .rect { diff --git a/components/svgs/svg-favycon.tsx b/components/svgs/svg-favycon.tsx index aba6990..8b350a7 100644 --- a/components/svgs/svg-favycon.tsx +++ b/components/svgs/svg-favycon.tsx @@ -1,10 +1,9 @@ import React from 'react' -import { uniqueId } from 'utils/ids' import styles from './svg-favycon.module.scss' const SvgFavycon: React.FC> = (props) => { - const idPrefix = uniqueId('svg-') + const idPrefix = 'svg-favycon-' return ( Favycon logo diff --git a/components/svgs/svg-image-upload.module.scss b/components/svgs/svg-image-upload.module.scss index f72ce77..4532ef1 100644 --- a/components/svgs/svg-image-upload.module.scss +++ b/components/svgs/svg-image-upload.module.scss @@ -1,11 +1,53 @@ @import '../../styles/variables.scss'; +.circle { + opacity: 0; + fill: $white; + transition: all 0.2s ease; + + @include breakpoint-md { + opacity: 0.1; + } +} + .rect { fill: #ccc; transition: all 0.2s ease; + &:nth-of-type(1) { + y: 20px; + height: 48px; + } + + &:nth-of-type(2) { + x: 20px; + width: 48px; + } + &.active { - fill: $link; + @include breakpoint-md-up { + fill: $link; + } + + &:nth-of-type(1) { + /* mouse, touch pad */ + @media (hover: hover) and (pointer: fine) { + y: 16px; + height: 56px; + } + } + + &:nth-of-type(2) { + /* mouse, touch pad */ + @media (hover: hover) and (pointer: fine) { + x: 16px; + width: 56px; + } + } + } + + @include breakpoint-md { + fill: $off-white-dark; } } @@ -15,4 +57,8 @@ &.active { fill: $off-white-dark; } + + @include breakpoint-md { + fill: $off-white-dark; + } } diff --git a/components/svgs/svg-image-upload.tsx b/components/svgs/svg-image-upload.tsx index 7d534d6..494edcc 100644 --- a/components/svgs/svg-image-upload.tsx +++ b/components/svgs/svg-image-upload.tsx @@ -1,6 +1,5 @@ import React from 'react' import classnames from 'classnames' -import { uniqueId } from 'utils/ids' import styles from './svg-image-upload.module.scss' @@ -12,24 +11,13 @@ const SvgImageUpload: React.FC { - const idPrefix = uniqueId('svg-') + const idPrefix = 'svg-image-upload-' return ( Image Upload - - + + + ) } diff --git a/components/svgs/svg-info.tsx b/components/svgs/svg-info.tsx index fcfb4d9..0ec4256 100644 --- a/components/svgs/svg-info.tsx +++ b/components/svgs/svg-info.tsx @@ -1,10 +1,9 @@ import React from 'react' -import { uniqueId } from 'utils/ids' import styles from './svg-info.module.scss' const SvgInfo: React.FC> = (props) => { - const idPrefix = uniqueId('svg-') + const idPrefix = 'svg-info-' return ( Info diff --git a/components/svgs/svg-moon.tsx b/components/svgs/svg-moon.tsx index 800a09a..3a4675c 100644 --- a/components/svgs/svg-moon.tsx +++ b/components/svgs/svg-moon.tsx @@ -1,8 +1,7 @@ import React from 'react' -import { uniqueId } from 'utils/ids' const SvgMoon: React.FC> = (props) => { - const idPrefix = uniqueId('svg-') + const idPrefix = 'svg-moon-' return ( Activate dark mode diff --git a/components/svgs/svg-sun.tsx b/components/svgs/svg-sun.tsx index dd5731a..9ffcbc4 100644 --- a/components/svgs/svg-sun.tsx +++ b/components/svgs/svg-sun.tsx @@ -1,8 +1,7 @@ import React from 'react' -import { uniqueId } from 'utils/ids' const SvgSun: React.FC> = (props) => { - const idPrefix = uniqueId('svg-') + const idPrefix = 'svg-sun-' return ( Activate light mode diff --git a/components/tool-title/index.tsx b/components/tool-title/index.tsx index d88e123..e8d4549 100644 --- a/components/tool-title/index.tsx +++ b/components/tool-title/index.tsx @@ -4,10 +4,15 @@ import { SvgFavycon } from 'components/svgs/svg-favycon' import styles from './index.module.scss' -const ToolTitle = () => ( +type ToolTitleProps = { + hideLogo?: boolean + small?: boolean +} + +const ToolTitle = ({ hideLogo = false, small = false }: ToolTitleProps) => (
- - + {!hideLogo && } + Favycon diff --git a/components/typography/index.module.scss b/components/typography/index.module.scss index 1374a6c..127d07e 100644 --- a/components/typography/index.module.scss +++ b/components/typography/index.module.scss @@ -9,6 +9,11 @@ line-height: $line-height-h1; } +.h2 { + font-size: $font-size-extra-large-title; + line-height: $line-height-extra-large-title; +} + .smallBody { font-size: $font-size-small-body; line-height: $line-height-small-body; @@ -17,6 +22,10 @@ .regularBody { font-size: $font-size-regular-body; line-height: $line-height-regular-body; + + @include breakpoint-md { + font-size: $font-size-medium-body; + } } .mediumBody { @@ -33,6 +42,10 @@ font-size: $font-size-footer; line-height: $line-height-footer; + @include breakpoint-md { + font-size: $font-size-small-body; + } + a { color: inherit; @@ -52,6 +65,10 @@ .title { font-size: $font-size-title; line-height: $line-height-title; + + @include breakpoint-md { + font-size: $font-size-medium-body; + } } .largeTitle { @@ -59,6 +76,11 @@ line-height: $line-height-large-title; } +.extraLargeTitle { + font-size: $font-size-extra-large-title; + line-height: $line-height-extra-large-title; +} + .regular { font-weight: 400; } @@ -101,7 +123,7 @@ transition: color 0.2s ease; } -:global(.dark-mode) .white { +:global(.dark-mode) .white:not(.colorImmutable) { color: $black; } @@ -115,5 +137,5 @@ } :global(.dark-mode) .muted { - color: $grey; + color: $grey-dark; } diff --git a/components/typography/index.tsx b/components/typography/index.tsx index e35f338..06a2f33 100644 --- a/components/typography/index.tsx +++ b/components/typography/index.tsx @@ -8,6 +8,7 @@ type TypographyProps = { children: PropTypes.ReactNodeLike variant: | 'h1' + | 'h2' | 'smallBody' | 'regularBody' | 'mediumBody' @@ -16,22 +17,25 @@ type TypographyProps = { | 'superscript' | 'title' | 'largeTitle' + | 'extraLargeTitle' weight: 'regular' | 'medium' | 'semiBold' | 'bold' | 'extraBold' color: 'black' | 'gray' | 'white' | 'green' + colorImmutable?: boolean tag?: string muted?: boolean } & React.DetailedHTMLProps, HTMLParagraphElement> -const Typography = ({ children, variant, weight, color, tag, muted, ...props }: TypographyProps) => { +const Typography = ({ children, variant, weight, color, colorImmutable, tag, muted, ...props }: TypographyProps) => { const className = classNames( styles.root, styles[variant], styles[color], styles[weight], { [styles.muted]: muted }, + { [styles.colorImmutable]: colorImmutable }, props.className ) - const componentType = ['h1'].includes(variant) ? variant : 'p' + const componentType = ['h1', 'h2'].includes(variant) ? variant : 'p' return React.createElement(tag || componentType, { ...props, className }, children) } @@ -40,6 +44,7 @@ Typography.defaultProps = { variant: 'p', weight: 'regular', color: 'black', + colorImmutable: false, } export { Typography } diff --git a/hooks/use-toggle.ts b/hooks/use-toggle.ts new file mode 100644 index 0000000..ec101b7 --- /dev/null +++ b/hooks/use-toggle.ts @@ -0,0 +1,11 @@ +import React from 'react' + +export const useToggle = (initialValue = false): [boolean, () => void] => { + const [value, setValue] = React.useState(initialValue) + + const toggle = React.useCallback(() => { + setValue((v) => !v) + }, []) + + return [value, toggle] +} diff --git a/package.json b/package.json index 05c2ff1..6ed37c9 100644 --- a/package.json +++ b/package.json @@ -62,8 +62,9 @@ "react-lazy-images": "1.1.0", "react-modal": "3.11.2", "react-transition-group": "4.4.1", - "sharp": "0.26.0", - "use-dark-mode": "2.3.1" + "sharp": "0.25.0", + "use-dark-mode": "2.3.1", + "use-media": "1.4.0" }, "devDependencies": { "@babel/core": "7.11.6", @@ -116,6 +117,9 @@ "husky": "4.2.5", "lint-staged": "10.3.0", "npm-run-all": "4.1.5", + "postcss-100vh-fix": "0.1.1", + "postcss-flexbugs-fixes": "4.2.1", + "postcss-preset-env": "6.7.0", "prettier": "2.1.1", "react-refresh": "0.8.3", "regenerator-runtime": "0.13.7", @@ -129,6 +133,7 @@ "stylelint-config-recess-order": "2.1.0", "stylelint-config-standard": "20.0.0", "stylelint-prettier": "1.1.2", + "stylelint-scss": "3.17.2", "typescript": "3.9.7", "webpack-notifier": "1.8.0" }, diff --git a/pages/_app.tsx b/pages/_app.tsx index b255b9e..15195f9 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,10 +1,15 @@ import React from 'react' import { AppProps } from 'next/app' +import { MediaQueryProvider } from 'components/media-query-provider' import '../styles/main.scss' function MyApp({ Component, pageProps }: AppProps) { - return + return ( + + + + ) } export default MyApp diff --git a/pages/index.module.scss b/pages/index.module.scss index 0685a68..dbe4270 100644 --- a/pages/index.module.scss +++ b/pages/index.module.scss @@ -6,6 +6,7 @@ } .container { + position: relative; display: flex; align-items: center; justify-content: space-between; @@ -14,4 +15,10 @@ min-height: 100vh; padding: 52px 20px; margin: 0 auto; + + @include breakpoint-md { + align-items: stretch; + max-width: 100%; + padding: 0; + } } diff --git a/pages/index.tsx b/pages/index.tsx index f55e3d3..3cbc101 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -29,16 +29,20 @@ const Home: NextPage = () => { setError(error) } - const onGenerate = async (file: File, pwa: boolean) => { + const onGenerate = async (file: File, pwa: boolean, dark: boolean) => { try { NProgress.start() const formData = new FormData() formData.append('icon', file) formData.append('pwa', pwa ? '1' : '0') + formData.append('dark', dark ? '1' : '0') const response = await fetch('/api/favycon', { method: 'POST', body: formData, }) + if (response.status >= 300) { + throw new Error(await response.text()) + } return await response.arrayBuffer() } catch (error) { throw error @@ -55,12 +59,12 @@ const Home: NextPage = () => { />
- +
- onError('')} /> + setError('')} />
) diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..9c9a09d --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,18 @@ +module.exports = { + plugins: [ + 'postcss-100vh-fix', + 'postcss-flexbugs-fixes', + [ + 'postcss-preset-env', + { + autoprefixer: { + flexbox: 'no-2009', + }, + stage: 3, + features: { + 'custom-properties': false, + }, + }, + ], + ], +} diff --git a/public/images/unsplash-vertical@1x.jpg b/public/images/unsplash-vertical@1x.jpg new file mode 100644 index 0000000..53a5e65 Binary files /dev/null and b/public/images/unsplash-vertical@1x.jpg differ diff --git a/public/images/unsplash-vertical@2x.jpg b/public/images/unsplash-vertical@2x.jpg new file mode 100644 index 0000000..fea6f25 Binary files /dev/null and b/public/images/unsplash-vertical@2x.jpg differ diff --git a/public/images/unsplash-vertical@placeholder.jpg b/public/images/unsplash-vertical@placeholder.jpg new file mode 100644 index 0000000..cbce912 Binary files /dev/null and b/public/images/unsplash-vertical@placeholder.jpg differ diff --git a/public/images/unsplash@1x.jpg b/public/images/unsplash@1x.jpg index 4f519cc..7da35d5 100644 Binary files a/public/images/unsplash@1x.jpg and b/public/images/unsplash@1x.jpg differ diff --git a/public/images/unsplash@2x.jpg b/public/images/unsplash@2x.jpg index 19ba2f2..4eb0b49 100644 Binary files a/public/images/unsplash@2x.jpg and b/public/images/unsplash@2x.jpg differ diff --git a/public/images/unsplash@placeholder.jpg b/public/images/unsplash@placeholder.jpg new file mode 100644 index 0000000..810c11d Binary files /dev/null and b/public/images/unsplash@placeholder.jpg differ diff --git a/public/share.png b/public/share.png index 52fb11f..37e3377 100644 Binary files a/public/share.png and b/public/share.png differ diff --git a/styles/breakpoints.scss b/styles/breakpoints.scss new file mode 100644 index 0000000..6065239 --- /dev/null +++ b/styles/breakpoints.scss @@ -0,0 +1,34 @@ +$breakpoint-xs: 576px; +$breakpoint-sm: 768px; +$breakpoint-md: 992px; +$breakpoint-lg: 1200px; + +@mixin breakpoint-xs { + @media screen and (max-width: $breakpoint-xs - 1) { + @content; + } +} + +@mixin breakpoint-sm { + @media screen and (max-width: $breakpoint-sm - 1) { + @content; + } +} + +@mixin breakpoint-md { + @media screen and (max-width: $breakpoint-md - 1) { + @content; + } +} + +@mixin breakpoint-md-up { + @media screen and (min-width: $breakpoint-md) { + @content; + } +} + +@mixin breakpoint-lg { + @media screen and (max-width: $breakpoint-lg - 1) { + @content; + } +} diff --git a/styles/main.scss b/styles/main.scss index 955c18f..074a210 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -30,6 +30,7 @@ body { * { box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } hr { diff --git a/styles/reset.scss b/styles/reset.scss index 9fbc97d..94ec4f5 100644 --- a/styles/reset.scss +++ b/styles/reset.scss @@ -121,7 +121,7 @@ blockquote::before, blockquote::after, q::before, q::after { - content: ''; + content: ' '; content: none; } table { diff --git a/styles/variables.scss b/styles/variables.scss index 8452925..15f7b45 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -1,3 +1,5 @@ +@import 'breakpoints'; + $white: #fff; $white-dark: #a8b7c4; $off-white: #fafafa; @@ -47,3 +49,6 @@ $line-height-title: 24px; $font-size-large-title: 18px; $line-height-large-title: 24px; + +$font-size-extra-large-title: 32px; +$line-height-extra-large-title: 40px; diff --git a/utils/device.ts b/utils/device.ts new file mode 100644 index 0000000..01719b1 --- /dev/null +++ b/utils/device.ts @@ -0,0 +1,12 @@ +export const isTouchCapable = () => { + if (typeof window === 'undefined') { + return false + } + return ( + 'ontouchstart' in window || + // @ts-ignore + (window.DocumentTouch && document instanceof window.DocumentTouch) || + navigator.maxTouchPoints > 0 || + window.navigator.msMaxTouchPoints > 0 + ) +} diff --git a/yarn.lock b/yarn.lock index e7c519e..9b763de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2352,6 +2352,11 @@ resolved "https://registry.yarnpkg.com/@commitlint/types/-/types-9.1.2.tgz#d05f66db03e3a3638a654e8badf2deb489eb220d" integrity sha512-r3fwVbVH+M8W0qYlBBZFsUwKe6NT5qvz+EmU7sr8VeN1cQ63z+3cfXyTo7WGGEMEgKiT0jboNAK3b1FZp8k9LQ== +"@csstools/convert-colors@^1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7" + integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw== + "@cypress/listr-verbose-renderer@^0.4.1": version "0.4.1" resolved "https://registry.yarnpkg.com/@cypress/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#a77492f4b11dcc7c446a34b3e28721afd33c642a" @@ -4505,6 +4510,19 @@ attr-accept@^2.0.0: resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.1.0.tgz#a231a854385d36ff7a99647bb77b33c8a5175aee" integrity sha512-sLzVM3zCCmmDtDNhI0i96k6PUztkotSOXqE4kDGQt/6iDi5M+H0srjeF+QC6jN581l4X/Zq3Zu/tgcErEssavg== +autoprefixer@^9.6.1, autoprefixer@^9.8.6: + version "9.8.6" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f" + integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg== + dependencies: + browserslist "^4.12.0" + caniuse-lite "^1.0.30001109" + colorette "^1.2.1" + normalize-range "^0.1.2" + num2fraction "^1.2.2" + postcss "^7.0.32" + postcss-value-parser "^4.1.0" + autoprefixer@^9.7.2: version "9.8.0" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.0.tgz#68e2d2bef7ba4c3a65436f662d0a56a741e56511" @@ -4518,19 +4536,6 @@ autoprefixer@^9.7.2: postcss "^7.0.30" postcss-value-parser "^4.1.0" -autoprefixer@^9.8.6: - version "9.8.6" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f" - integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg== - dependencies: - browserslist "^4.12.0" - caniuse-lite "^1.0.30001109" - colorette "^1.2.1" - normalize-range "^0.1.2" - num2fraction "^1.2.2" - postcss "^7.0.32" - postcss-value-parser "^4.1.0" - aws-sign2@~0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8" @@ -4996,9 +5001,9 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0: integrity sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw== bn.js@^5.1.1: - version "5.1.2" - resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.2.tgz#c9686902d3c9a27729f43ab10f9d79c2004da7b0" - integrity sha512-40rZaf3bUNKTVYu9sIeeEGOg7g14Yvnj9kH7b50EiwX0Q7A6umbvfI5tvHaOERH0XigqKkfLkFQxzb4e6CIXnA== + version "5.1.1" + resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.1.tgz#48efc4031a9c4041b9c99c6941d903463ab62eb5" + integrity sha512-IUTD/REb78Z2eodka1QZyyEk66pciRcP6Sroka0aI3tG/iwIdYLrBD62RsubR7vqdt3WyX8p4jxeatzmRSphtA== body-parser@1.19.0: version "1.19.0" @@ -5150,7 +5155,7 @@ browserify-zlib@^0.2.0: dependencies: pako "~1.0.5" -browserslist@4.13.0: +browserslist@4.13.0, browserslist@^4.6.4: version "4.13.0" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.13.0.tgz#42556cba011e1b0a2775b611cba6a8eca18e940d" integrity sha512-MINatJ5ZNrLnQ6blGvePd/QOz9Xtu+Ne+x29iQSCHfkU5BugKVJwZKn/iiL8UbpIpa3JhviKjz+XxMo0m2caFQ== @@ -5390,16 +5395,16 @@ can-use-dom@^0.1.0: resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a" integrity sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo= +caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001093: + version "1.0.30001109" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001109.tgz#a9f3f26a0c3753b063d7acbb48dfb9c0e46f2b19" + integrity sha512-4JIXRodHzdS3HdK8nSgIqXYLExOvG+D2/EenSvcub2Kp3QEADjo2v2oUn5g0n0D+UNwG9BtwKOyGcSq2qvQXvQ== + caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001061: version "1.0.30001077" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001077.tgz#5d7da6a120b08d9f4fd94823786ecb454aaa5626" integrity sha512-AEzsGvjBJL0lby/87W96PyEvwN0GsYvk5LHsglLg9tW37K4BqvAvoSCdWIE13OZQ8afupqZ73+oL/1LkedN8hA== -caniuse-lite@^1.0.30001093: - version "1.0.30001109" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001109.tgz#a9f3f26a0c3753b063d7acbb48dfb9c0e46f2b19" - integrity sha512-4JIXRodHzdS3HdK8nSgIqXYLExOvG+D2/EenSvcub2Kp3QEADjo2v2oUn5g0n0D+UNwG9BtwKOyGcSq2qvQXvQ== - caniuse-lite@^1.0.30001109: version "1.0.30001123" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001123.tgz#7b981d81382ab2c8fd062f3e6439215e8c503c22" @@ -5566,6 +5571,11 @@ chownr@^1.1.1, chownr@^1.1.2, chownr@^1.1.3, chownr@^1.1.4: resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b" integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg== +chownr@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece" + integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ== + chrome-trace-event@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4" @@ -6334,6 +6344,21 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== +css-blank-pseudo@^0.1.4: + version "0.1.4" + resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz#dfdefd3254bf8a82027993674ccf35483bfcb3c5" + integrity sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w== + dependencies: + postcss "^7.0.5" + +css-has-pseudo@^0.10.0: + version "0.10.0" + resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz#3c642ab34ca242c59c41a125df9105841f6966ee" + integrity sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ== + dependencies: + postcss "^7.0.6" + postcss-selector-parser "^5.0.0-rc.4" + css-loader@3.5.3, css-loader@^3.0.0: version "3.5.3" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.5.3.tgz#95ac16468e1adcd95c844729e0bb167639eb0bcf" @@ -6353,6 +6378,13 @@ css-loader@3.5.3, css-loader@^3.0.0: schema-utils "^2.6.6" semver "^6.3.0" +css-prefers-color-scheme@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4" + integrity sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg== + dependencies: + postcss "^7.0.5" + css-select-base-adapter@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7" @@ -6419,6 +6451,16 @@ css@^2.0.0: source-map-resolve "^0.5.2" urix "^0.1.0" +cssdb@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0" + integrity sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ== + +cssesc@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703" + integrity sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg== + cssesc@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" @@ -6656,13 +6698,6 @@ decompress-response@^4.2.0: dependencies: mimic-response "^2.0.0" -decompress-response@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc" - integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ== - dependencies: - mimic-response "^3.1.0" - dedent@0.7.0, dedent@^0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c" @@ -8155,6 +8190,11 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== +flatten@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b" + integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg== + flush-write-stream@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8" @@ -10560,7 +10600,7 @@ lodash.sortby@^4.7.0: resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438" integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg= -lodash.template@^4.0.2: +lodash.template@^4.0.2, lodash.template@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab" integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A== @@ -11091,11 +11131,6 @@ mimic-response@^2.0.0: resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-2.1.0.tgz#d13763d35f613d09ec37ebb30bac0469c0ee8f43" integrity sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA== -mimic-response@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9" - integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ== - min-document@^2.19.0: version "2.19.0" resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685" @@ -11200,6 +11235,14 @@ minizlib@^2.1.0: minipass "^3.0.0" yallist "^4.0.0" +minizlib@^2.1.1: + version "2.1.2" + resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931" + integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg== + dependencies: + minipass "^3.0.0" + yallist "^4.0.0" + mississippi@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022" @@ -11251,6 +11294,11 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdir dependencies: minimist "^1.2.5" +mkdirp@^1.0.3: + version "1.0.4" + resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" + integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== + modify-values@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022" @@ -11461,10 +11509,10 @@ node-abi@^2.7.0: dependencies: semver "^5.4.1" -node-addon-api@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.0.0.tgz#812446a1001a54f71663bed188314bba07e09247" - integrity sha512-sSHCgWfJ+Lui/u+0msF3oyCgvdkhxDbkCS6Q8uiJquzOimkJBvX6hl5aSSA7DR1XbMpdM8r7phjcF63sF4rkKg== +node-addon-api@^2.0.0: + version "2.0.2" + resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-2.0.2.tgz#432cfa82962ce494b132e9d72a15b29f71ff5d32" + integrity sha512-Ntyt4AIXyaLIuMHF6IOoTakB3K+RWxwtsHNRxllEoA6vPwP9o4866g6YWDLUdnucilZhmkxiHwHr11gAENw+QA== node-dir@^0.1.10: version "0.1.17" @@ -12667,13 +12715,145 @@ posix-character-classes@^0.1.0: resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs= -postcss-flexbugs-fixes@^4.1.0: +postcss-100vh-fix@0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/postcss-100vh-fix/-/postcss-100vh-fix-0.1.1.tgz#b3a5f816b5a7ba05b8073c3b0e7b44a48e0654df" + integrity sha512-Dv0OdLLIskpAgB70XxFTwHHs0mQnDbnXF12NI2DjIt7pq5wvwDr9p3jAoP7P7OBo7Uu2v6mQzj33tU7o0lI+NA== + dependencies: + postcss "^7.0.32" + +postcss-attribute-case-insensitive@^4.0.1: + version "4.0.2" + resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz#d93e46b504589e94ac7277b0463226c68041a880" + integrity sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA== + dependencies: + postcss "^7.0.2" + postcss-selector-parser "^6.0.2" + +postcss-color-functional-notation@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0" + integrity sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g== + dependencies: + postcss "^7.0.2" + postcss-values-parser "^2.0.0" + +postcss-color-gray@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547" + integrity sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw== + dependencies: + "@csstools/convert-colors" "^1.4.0" + postcss "^7.0.5" + postcss-values-parser "^2.0.0" + +postcss-color-hex-alpha@^5.0.3: + version "5.0.3" + resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz#a8d9ca4c39d497c9661e374b9c51899ef0f87388" + integrity sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw== + dependencies: + postcss "^7.0.14" + postcss-values-parser "^2.0.1" + +postcss-color-mod-function@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d" + integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ== + dependencies: + "@csstools/convert-colors" "^1.4.0" + postcss "^7.0.2" + postcss-values-parser "^2.0.0" + +postcss-color-rebeccapurple@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz#c7a89be872bb74e45b1e3022bfe5748823e6de77" + integrity sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g== + dependencies: + postcss "^7.0.2" + postcss-values-parser "^2.0.0" + +postcss-custom-media@^7.0.8: + version "7.0.8" + resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz#fffd13ffeffad73621be5f387076a28b00294e0c" + integrity sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg== + dependencies: + postcss "^7.0.14" + +postcss-custom-properties@^8.0.11: + version "8.0.11" + resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz#2d61772d6e92f22f5e0d52602df8fae46fa30d97" + integrity sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA== + dependencies: + postcss "^7.0.17" + postcss-values-parser "^2.0.1" + +postcss-custom-selectors@^5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz#64858c6eb2ecff2fb41d0b28c9dd7b3db4de7fba" + integrity sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w== + dependencies: + postcss "^7.0.2" + postcss-selector-parser "^5.0.0-rc.3" + +postcss-dir-pseudo-class@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz#6e3a4177d0edb3abcc85fdb6fbb1c26dabaeaba2" + integrity sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw== + dependencies: + postcss "^7.0.2" + postcss-selector-parser "^5.0.0-rc.3" + +postcss-double-position-gradients@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz#fc927d52fddc896cb3a2812ebc5df147e110522e" + integrity sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA== + dependencies: + postcss "^7.0.5" + postcss-values-parser "^2.0.0" + +postcss-env-function@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-2.0.2.tgz#0f3e3d3c57f094a92c2baf4b6241f0b0da5365d7" + integrity sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw== + dependencies: + postcss "^7.0.2" + postcss-values-parser "^2.0.0" + +postcss-flexbugs-fixes@4.2.1, postcss-flexbugs-fixes@^4.1.0: version "4.2.1" resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690" integrity sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ== dependencies: postcss "^7.0.26" +postcss-focus-visible@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz#477d107113ade6024b14128317ade2bd1e17046e" + integrity sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g== + dependencies: + postcss "^7.0.2" + +postcss-focus-within@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz#763b8788596cee9b874c999201cdde80659ef680" + integrity sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w== + dependencies: + postcss "^7.0.2" + +postcss-font-variant@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-4.0.0.tgz#71dd3c6c10a0d846c5eda07803439617bbbabacc" + integrity sha512-M8BFYKOvCrI2aITzDad7kWuXXTm0YhGdP9Q8HanmN4EF1Hmcgs1KK5rSHylt/lUJe8yLxiSwWAHdScoEiIxztg== + dependencies: + postcss "^7.0.2" + +postcss-gap-properties@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz#431c192ab3ed96a3c3d09f2ff615960f902c1715" + integrity sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg== + dependencies: + postcss "^7.0.2" + postcss-html@^0.36.0: version "0.36.0" resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.36.0.tgz#b40913f94eaacc2453fd30a1327ad6ee1f88b204" @@ -12681,6 +12861,31 @@ postcss-html@^0.36.0: dependencies: htmlparser2 "^3.10.0" +postcss-image-set-function@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz#28920a2f29945bed4c3198d7df6496d410d3f288" + integrity sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw== + dependencies: + postcss "^7.0.2" + postcss-values-parser "^2.0.0" + +postcss-initial@^3.0.0: + version "3.0.2" + resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.2.tgz#f018563694b3c16ae8eaabe3c585ac6319637b2d" + integrity sha512-ugA2wKonC0xeNHgirR4D3VWHs2JcU08WAi1KFLVcnb7IN89phID6Qtg2RIctWbnvp1TM2BOmDtX8GGLCKdR8YA== + dependencies: + lodash.template "^4.5.0" + postcss "^7.0.2" + +postcss-lab-function@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e" + integrity sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg== + dependencies: + "@csstools/convert-colors" "^1.4.0" + postcss "^7.0.2" + postcss-values-parser "^2.0.0" + postcss-less@^3.1.4: version "3.1.4" resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad" @@ -12706,6 +12911,20 @@ postcss-loader@^3.0.0: postcss-load-config "^2.0.0" schema-utils "^1.0.0" +postcss-logical@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-3.0.0.tgz#2495d0f8b82e9f262725f75f9401b34e7b45d5b5" + integrity sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA== + dependencies: + postcss "^7.0.2" + +postcss-media-minmax@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz#b75bb6cbc217c8ac49433e12f22048814a4f5ed5" + integrity sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw== + dependencies: + postcss "^7.0.2" + postcss-media-query-parser@^0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244" @@ -12744,6 +12963,93 @@ postcss-modules-values@^3.0.0: icss-utils "^4.0.0" postcss "^7.0.6" +postcss-nesting@^7.0.0: + version "7.0.1" + resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052" + integrity sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg== + dependencies: + postcss "^7.0.2" + +postcss-overflow-shorthand@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz#31ecf350e9c6f6ddc250a78f0c3e111f32dd4c30" + integrity sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g== + dependencies: + postcss "^7.0.2" + +postcss-page-break@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-2.0.0.tgz#add52d0e0a528cabe6afee8b46e2abb277df46bf" + integrity sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ== + dependencies: + postcss "^7.0.2" + +postcss-place@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-4.0.1.tgz#e9f39d33d2dc584e46ee1db45adb77ca9d1dcc62" + integrity sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg== + dependencies: + postcss "^7.0.2" + postcss-values-parser "^2.0.0" + +postcss-preset-env@6.7.0: + version "6.7.0" + resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz#c34ddacf8f902383b35ad1e030f178f4cdf118a5" + integrity sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg== + dependencies: + autoprefixer "^9.6.1" + browserslist "^4.6.4" + caniuse-lite "^1.0.30000981" + css-blank-pseudo "^0.1.4" + css-has-pseudo "^0.10.0" + css-prefers-color-scheme "^3.1.1" + cssdb "^4.4.0" + postcss "^7.0.17" + postcss-attribute-case-insensitive "^4.0.1" + postcss-color-functional-notation "^2.0.1" + postcss-color-gray "^5.0.0" + postcss-color-hex-alpha "^5.0.3" + postcss-color-mod-function "^3.0.3" + postcss-color-rebeccapurple "^4.0.1" + postcss-custom-media "^7.0.8" + postcss-custom-properties "^8.0.11" + postcss-custom-selectors "^5.1.2" + postcss-dir-pseudo-class "^5.0.0" + postcss-double-position-gradients "^1.0.0" + postcss-env-function "^2.0.2" + postcss-focus-visible "^4.0.0" + postcss-focus-within "^3.0.0" + postcss-font-variant "^4.0.0" + postcss-gap-properties "^2.0.0" + postcss-image-set-function "^3.0.1" + postcss-initial "^3.0.0" + postcss-lab-function "^2.0.1" + postcss-logical "^3.0.0" + postcss-media-minmax "^4.0.0" + postcss-nesting "^7.0.0" + postcss-overflow-shorthand "^2.0.0" + postcss-page-break "^2.0.0" + postcss-place "^4.0.1" + postcss-pseudo-class-any-link "^6.0.0" + postcss-replace-overflow-wrap "^3.0.0" + postcss-selector-matches "^4.0.0" + postcss-selector-not "^4.0.0" + +postcss-pseudo-class-any-link@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1" + integrity sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew== + dependencies: + postcss "^7.0.2" + postcss-selector-parser "^5.0.0-rc.3" + +postcss-replace-overflow-wrap@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz#61b360ffdaedca84c7c918d2b0f0d0ea559ab01c" + integrity sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw== + dependencies: + postcss "^7.0.2" + postcss-resolve-nested-selector@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e" @@ -12771,6 +13077,31 @@ postcss-scss@^2.1.1: dependencies: postcss "^7.0.6" +postcss-selector-matches@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz#71c8248f917ba2cc93037c9637ee09c64436fcff" + integrity sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww== + dependencies: + balanced-match "^1.0.0" + postcss "^7.0.2" + +postcss-selector-not@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz#c68ff7ba96527499e832724a2674d65603b645c0" + integrity sha512-W+bkBZRhqJaYN8XAnbbZPLWMvZD1wKTu0UxtFKdhtGjWYmxhkUneoeOhRJKdAE5V7ZTlnbHfCR+6bNwK9e1dTQ== + dependencies: + balanced-match "^1.0.0" + postcss "^7.0.2" + +postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4: + version "5.0.0" + resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c" + integrity sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ== + dependencies: + cssesc "^2.0.0" + indexes-of "^1.0.1" + uniq "^1.0.1" + postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c" @@ -12798,6 +13129,15 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.3, postcss-value-parser@^ resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== +postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f" + integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg== + dependencies: + flatten "^1.0.2" + indexes-of "^1.0.1" + uniq "^1.0.1" + postcss@7.0.21: version "7.0.21" resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.21.tgz#06bb07824c19c2021c5d056d5b10c35b989f7e17" @@ -12854,27 +13194,6 @@ prebuild-install@^5.3.3: tunnel-agent "^0.6.0" which-pm-runs "^1.0.0" -prebuild-install@^5.3.5: - version "5.3.5" - resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.5.tgz#e7e71e425298785ea9d22d4f958dbaccf8bb0e1b" - integrity sha512-YmMO7dph9CYKi5IR/BzjOJlRzpxGGVo1EsLSUZ0mt/Mq0HWZIHOKHHcHdT69yG54C9m6i45GpItwRHpk0Py7Uw== - dependencies: - detect-libc "^1.0.3" - expand-template "^2.0.3" - github-from-package "0.0.0" - minimist "^1.2.3" - mkdirp "^0.5.1" - napi-build-utils "^1.0.1" - node-abi "^2.7.0" - noop-logger "^0.1.1" - npmlog "^4.0.1" - pump "^3.0.0" - rc "^1.2.7" - simple-get "^3.0.3" - tar-fs "^2.0.0" - tunnel-agent "^0.6.0" - which-pm-runs "^1.0.0" - prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -14316,7 +14635,7 @@ semver@7.0.0: resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e" integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A== -semver@7.3.2, semver@^7.1.2, semver@^7.2.1, semver@^7.3.2: +semver@7.3.2, semver@^7.1.2, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2: version "7.3.2" resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938" integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ== @@ -14440,19 +14759,19 @@ shallowequal@^1.1.0: resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== -sharp@0.26.0: - version "0.26.0" - resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.26.0.tgz#ff4c8d3200a7a1f76c69c53fd11879609d2ff062" - integrity sha512-MNldekb9ZnliJAD+qP6uBTf3Wd6HaDVhKYbxXG+SQDvit9fa+2X4wECJvMRF8FLdY4saojrz3BHsnt4OmJw7xg== +sharp@0.25.0: + version "0.25.0" + resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.25.0.tgz#b10f6249e4267ed70f627f702b29b47927fe3891" + integrity sha512-58XANPzzUNcDXdScxqKFzMWuzGTJtsoKQ2Y0v2Gj2ztgIMZCGJjeiErf7eQYwP6r/p9HFMYeaiW5PffTMPXo/Q== dependencies: color "^3.1.2" detect-libc "^1.0.3" - node-addon-api "^3.0.0" + node-addon-api "^2.0.0" npmlog "^4.1.2" - prebuild-install "^5.3.5" - semver "^7.3.2" - simple-get "^4.0.0" - tar-fs "^2.1.0" + prebuild-install "^5.3.3" + semver "^7.1.3" + simple-get "^3.1.0" + tar "^6.0.1" tunnel-agent "^0.6.0" sharp@^0.23.4: @@ -14549,15 +14868,6 @@ simple-get@^3.0.3, simple-get@^3.1.0: once "^1.3.1" simple-concat "^1.0.0" -simple-get@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.0.tgz#73fa628278d21de83dadd5512d2cc1f4872bd675" - integrity sha512-ZalZGexYr3TA0SwySsr5HlgOOinS4Jsa8YB2GJ6lUNAazyAu4KG/VmzMTwAt2YVXzzVj8QmefmAonZIK2BSGcQ== - dependencies: - decompress-response "^6.0.0" - once "^1.3.1" - simple-concat "^1.0.0" - simple-swizzle@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" @@ -15311,6 +15621,17 @@ stylelint-prettier@1.1.2: dependencies: prettier-linter-helpers "^1.0.0" +stylelint-scss@3.17.2: + version "3.17.2" + resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.17.2.tgz#4d849a153f9241834396f5880db2c3c964def4e3" + integrity sha512-e0dmxqsofy/HZj4urcGSJw4S6yHDJxiQdT20/1ciCsd5lomisa7YM4+Qtt1EG4hsqEG1dbEeF855tec1UyqcSA== + dependencies: + lodash "^4.17.15" + postcss-media-query-parser "^0.2.3" + postcss-resolve-nested-selector "^0.1.1" + postcss-selector-parser "^6.0.2" + postcss-value-parser "^4.1.0" + stylelint@13.7.0: version "13.7.0" resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.7.0.tgz#8d7a4233063b2f06e9f28b3405ff189e334547b5" @@ -15483,7 +15804,7 @@ tapable@^1.0.0, tapable@^1.1.3: resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2" integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA== -tar-fs@^2.0.0, tar-fs@^2.1.0: +tar-fs@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.0.tgz#d1cdd121ab465ee0eb9ccde2d35049d3f3daf0d5" integrity sha512-9uW5iDvrIMCVpvasdFHW0wJPez0K4JnMZtsuIeDI7HyMGJNxmDZDOCQROr7lXyS+iL/QMpj07qcjGYTSdRFXUg== @@ -15529,6 +15850,18 @@ tar@^5.0.5: mkdirp "^0.5.0" yallist "^4.0.0" +tar@^6.0.1: + version "6.0.5" + resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.5.tgz#bde815086e10b39f1dcd298e89d596e1535e200f" + integrity sha512-0b4HOimQHj9nXNEAA7zWwMM91Zhhba3pspja6sQbgTpynOJf+bkjBnfybNYzbpLbnwXnbyB4LOREvlyXLkCHSg== + dependencies: + chownr "^2.0.0" + fs-minipass "^2.0.0" + minipass "^3.0.0" + minizlib "^2.1.1" + mkdirp "^1.0.3" + yallist "^4.0.0" + telejson@^3.2.0: version "3.3.0" resolved "https://registry.yarnpkg.com/telejson/-/telejson-3.3.0.tgz#6d814f3c0d254d5c4770085aad063e266b56ad03" @@ -16206,6 +16539,11 @@ use-dark-mode@2.3.1: "@use-it/event-listener" "^0.1.2" use-persisted-state "^0.3.0" +use-media@1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/use-media/-/use-media-1.4.0.tgz#e777bf1f382a7aacabbd1f9ce3da2b62e58b2a98" + integrity sha512-XsgyUAf3nhzZmEfhc5MqLHwyaPjs78bgytpVJ/xDl0TF4Bptf3vEpBNBBT/EIKOmsOc8UbuECq3mrP3mt1QANA== + use-persisted-state@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/use-persisted-state/-/use-persisted-state-0.3.0.tgz#f8e3d2fd8eee67e0c86fd596c3ea3e8121c07402"