https://i.sstatic.net/m7Dek.png
I've been struggling to resize this logo without increasing the size of the container. I'm at a loss for what to do next. When I try to modify the logo svg file with inline styling
<svg viewBox="0 0 493.19 493.19" width='400'height='400'> const data: QueryResult = useStaticQuery(query)
return (
<ThemeProvider theme={theme}>
<>
<GlobalStyles />
<Wrapper>
<SideBarInner bg={color} as="aside" p={[6, 6, 8]}>
<Flex
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems={['center', 'center', 'center', 'flex-start']}
justifyContent="space-between"
>
<Box width={['3rem', '4rem', '5rem', '8rem']}>
<Link to="/" aria-label="LekoArts, Back to Home">
<Logo />
</Link>
</Box>
<Nav
color={color}
mt={[0, 0, 0, 10]}
as="nav"
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems="flex-start"
>
{data.navigation.nodes.map((item) => (
<PartialNavLink to={item.link} key={item.name}>
{item.name}
</PartialNavLink>
))}
</Nav>
</Flex>
</SideBarInner>
<Main>{children}</Main>
<Footer color={color}>
<Box p={[6, 6, 8]} fontSize={0}>
little things with love <a href="https://www.lekoarts.de/en">LekoArts</a>.<br />
<a href="https://github.com/LekoArts/gatsby-starter-portfolio-jodie">Source</a>.
</Box>
</Footer>
</Wrapper>
</>
</ThemeProvider>
)
}
export default Layout