Commit 8964f49

committed

fix: mobile layout

1 parent 441f2c6 commit 8964f49Copy full SHA for 8964f49

File tree

+29

-4

lines changed

+29

-4

lines changed

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,7 @@ const NavLinks = ({ saveBlob }) => {`
`53`	`53`	`<Button`
`54`	`54`	`href="/page-2/"`
`55`	`55`	`as={GatbsyLink}`
	`56`	`+ to="/page-2"`
`56`	`57`	`variant="heavy"`
`57`	`58`	`leftIcon={<SavedIcon fontSize="18px" />}`
`58`	`59`	`aria-label="Saved blobs"`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -68,6 +68,7 @@ const PatternSetter = ({ type, pattern, switchToPattern }) => {`
`68`	`68`	`<Box p="3">`
`69`	`69`	`{Object.keys(Patterns).map((name) => (`
`70`	`70`	`<PatternBox`
	`71`	`+ key={name}`
`71`	`72`	`meta={Patterns[name]}`
`72`	`73`	`clickHandler={switchToPattern}`
`73`	`74`	`isSelected={pattern === name}`

Lines changed: 5 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,11 @@ import ThemeSwitch from './theme-switch';`
`18`	`18`
`19`	`19`	`const Footer = ({ toggleSound, playSound }) => (`
`20`	`20`	`<Center my="6">`
`21`		`- <HStack spacing="10px" fontSize="sm">`
	`21`	`+ <HStack`
	`22`	`+ spacing="10px"`
	`23`	`+ fontSize="sm"`
	`24`	`+ flexDirection={{ base: 'column-reverse', lg: 'row' }}`
	`25`	`+ >`
`22`	`26`	`<Button`
`23`	`27`	`variant="silent"`
`24`	`28`	`leftIcon={<CopyrightIcon fontSize="lg" />}`

Lines changed: 22 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -15,14 +15,27 @@ const IndexPage = () => (`
`15`	`15`	`description="Customizable blobs as SVG and Flutter Widget. Create random or fixed blobs, loop, animate, clip them with ease"`
`16`	`16`	`/>`
`17`	`17`	`<Flex wrap="wrap" flex="1">`
	`18`	`+ <Flex`
	`19`	`+ align="center"`
	`20`	`+ justify="center"`
	`21`	`+ direction="column"`
	`22`	`+ my="4"`
	`23`	`+ w="full"`
	`24`	`+ display={{ base: 'flex', lg: 'none' }}`
	`25`	`+ >`
	`26`	`+ <Logo />`
	`27`	`+ <Heading fontSize="3xl" variant="main">`
	`28`	`+ Generate blobs`
	`29`	`+ </Heading>`
	`30`	`+ </Flex>`
`18`	`31`	`<Box`
`19`		`- w={{ sm: '100%', lg: 8 / 12 }}`
	`32`	`+ w={{ base: '100%', lg: 8 / 12 }}`
`20`	`33`	`justifyContent="center"`
`21`	`34`	`alignItems="center"`
`22`	`35`	`display="flex"`
`23`	`36`	`flexDirection="column"`
`24`	`37`	`>`
`25`		`- <Box w={{ sm: '100%', lg: 500 }} h={{ lg: 500 }}>`
	`38`	`+ <Box w={{ base: '100%', lg: 500 }} h={{ lg: 500 }}>`
`26`	`39`	`<BlobContainer />`
`27`	`40`	`</Box>`
`28`	`41`	`<Actions />`
`@@ -35,7 +48,13 @@ const IndexPage = () => (`
`35`	`48`	`w={{ sm: '100%', lg: 4 / 12 }}`
`36`	`49`	`>`
`37`	`50`	`<Box w="full">`
`38`		`- <Flex align="center" justify="center" direction="column" mb="8">`
	`51`	`+ <Flex`
	`52`	`+ align="center"`
	`53`	`+ justify="center"`
	`54`	`+ direction="column"`
	`55`	`+ mb="8"`
	`56`	`+ display={{ base: 'none', lg: 'flex' }}`
	`57`	`+ >`
`39`	`58`	`<Logo />`
`40`	`59`	`<Heading fontSize="3xl" variant="main">`
`41`	`60`	`Generate blobs`

Comments

(0)