Make styles responsive

master
Ian Mancini 4 years ago
parent be82458c0b
commit 81bed207e6

@ -21,18 +21,23 @@ const Team: React.FC<{
<SEO title="work" />
<Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
<Flex wrap="wrap">
<Box w="50%" pr="3rem">
<Box w={['100%', '100%', '50%']} pr="3rem">
<Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
About y cosas que hacemos ;)
</Heading>
</Box>
<Box w="50%" pt="6rem">
<Box
w={['100%', '100%', '50%']}
pt={['2rem', '2rem', '6rem']}
px={['1rem', '1rem', '2rem']}
>
<Text
as={ReactMarkdown}
fontWeight="300"
lineHeight="1.9"
pb="2rem"
sx={{ p: { display: 'block', pb: '2rem' } }}
fontSize={['md', 'md', '2xl']}
>
{about.texto_about}
</Text>

@ -10,12 +10,16 @@ const Contact: React.FC = () => {
<SEO title="Contact" />
<Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
<Flex wrap="wrap">
<Box w="50%" pr="3rem">
<Box w={['100%', '100%', '50%']} pr="3rem">
<Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
¡Trabajemos juntes!
</Heading>
</Box>
<Box w="50%" pt="6rem">
<Box
w={['100%', '100%', '50%']}
pt={['2rem', '2rem', '6rem']}
px={['1rem', '1rem', '2rem']}
>
<Text
as={ReactMarkdown}
fontWeight="300"

@ -10,14 +10,14 @@ const Notas: React.FC<{ notas: INotaWithImage[] }> = ({ notas }) => {
return (
<>
<SEO title="work" />
<Box w={['100%', '100%', '1220px']} pt="2rem" px="2rem" mx="auto">
<Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
<Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
Notas y pensamientos
</Heading>
<Stack wrap="wrap" direction="row" spacing="2rem">
<Stack justify="center" wrap="wrap" direction="row" spacing={['0', '0', '2rem']}>
{notas.map((nota) => (
<Link href={`/notas/${nota.slug}`} passHref key={nota.slug}>
<ChakraLink>
<ChakraLink mb="2rem">
<Flex
w="320px"
h="430px"

@ -20,13 +20,22 @@ const Team: React.FC<{
<SEO title="work" />
<Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
<Flex wrap="wrap">
<Box w="50%">
<Box w={['100%', '100%', '50%']} pr="3rem">
<Heading fontSize={['3xl', '3xl', '7xl']} mb="3rem">
El team
</Heading>
</Box>
<Box w="50%" pt="6rem">
<Text fontWeight="300" lineHeight="1.9" pb="2rem">
<Box
w={['100%', '100%', '50%']}
pt={['2rem', '2rem', '6rem']}
px={['1rem', '1rem', '2rem']}
>
<Text
fontWeight="300"
lineHeight="1.9"
pb="2rem"
fontSize={['md', 'md', '2xl']}
>
{about.texto_team}
</Text>
<Stack wrap="wrap" direction="row" justify="space-between" mb="6rem">
@ -38,14 +47,14 @@ const Team: React.FC<{
alt={`Foto de ${member.nombre}`}
w="100%"
h="100%"
borderRadius="primary"
borderRadius={['primarySmall', 'primarySmall', 'primary']}
mb="1rem"
/>
</Box>
<Heading as="h3" fontSize="xl" mb="1rem">
{member.nombre}
</Heading>
<Text fontSize="md">
<Text fontSize={['sm', 'sm', 'md']}>
<i>{member.cita}</i>
</Text>
</Box>

@ -18,21 +18,25 @@ const WorkPage: React.FC<{ data: IWorkWithImages }> = ({ data }) => {
mb="1rem"
/>
<Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
<Flex pb="4rem">
<Box>
<Flex pb="4rem" direction={['column', 'column', 'row']}>
<Box pb="2rem">
<Heading as="h3" fontSize="xl" pb="0.5rem">
{data.titulo}
</Heading>
<Stack fontSize="md" spacing="1rem" direction="row">
{data.tags.map((tag) => (
<Text fontSize="md" key={tag}>
{tag}
</Text>
))}
</Stack>
<Text
fontSize="md"
sx={{
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
wordSpacing: '0.5rem',
}}
>
{data.tags.map((tag) => `${tag} `)}
</Text>
</Box>
<Spacer />
<Flex direction="column" w="40%">
<Flex direction="column" w={['100%', '100%', '40%']} px={['1rem', '1rem', '0']}>
<Stack
direction="row"
wrap="wrap"
@ -59,14 +63,14 @@ const WorkPage: React.FC<{ data: IWorkWithImages }> = ({ data }) => {
<Text>{data.year}</Text>
</Box>
</Stack>
<Box w="100%" h="8px" mb="calc(2rem + 8px)">
<Box w="100%" h="8px" mb="calc(3rem + 8px)">
<Box display="inline-block" w="60%" h="100%" bg={data.color1} />
<Box display="inline-block" w="15%" h="100%" bg={data.color2} />
</Box>
<Heading as="h4" fontSize="md" pb="1rem">
El proyecto
</Heading>
<Text fontSize="lg">{data.texto_descripcion}</Text>
<Text fontSize={['md', 'md', 'lg']}>{data.texto_descripcion}</Text>
</Flex>
</Flex>
{data.imagenes_files.map((imagen, index) => (

@ -17,23 +17,34 @@ const Work: React.FC<{ data: IWorkWithBanner[] }> = ({ data }) => {
<Flex wrap="wrap">
{data.map((item, index) => (
<Link href={`/work/${item.slug}`} passHref key={item.slug}>
<ChakraLink w={index === 0 ? '100%' : '50%'} pb="4rem" px="1rem">
<ChakraLink
w={['100%', '100%', index === 0 ? '100%' : '50%']}
pb="4rem"
px={['1rem', '1rem', '2rem']}
>
<Box>
<ResponsiveImage
url={`work/${item.banner_file}`}
alt={`Imagen de ${item.titulo}`}
w="100%"
h="100%"
borderRadius="primary"
borderRadius={['primarySmall', 'primarySmall', 'primary']}
mb="1rem"
/>
<Heading as="h3" fontSize="xl" pb="0.5rem">
{item.titulo}
</Heading>
<Stack fontSize="md" spacing="1rem" direction="row">
{item.tags.map((tag) => (
<Text key={tag}>{tag}</Text>
))}
<Text
sx={{
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
wordSpacing: '0.5rem',
}}
>
{item.tags.map((tag) => `${tag} `)}
</Text>
</Stack>
</Box>
</ChakraLink>

@ -8,6 +8,7 @@ const customTheme = extendTheme({
},
radii: {
primary: '64px 64px 64px 0px',
primarySmall: '24px 24px 24px 0px',
},
fonts: {
body: 'IBM Plex Sans, sans-serif',

Loading…
Cancel
Save