ianmethyst
/
seminario-cms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make styles responsive

Browse Source
master
Ian Mancini 4 years ago
parent be82458c0b
commit 81bed207e6
7 changed files with 63 additions and 29 deletions
Show Stats Download Patch File Download Diff File

9
src/pages/about.tsx
Unescape View File

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

8
src/pages/contact.tsx
Unescape View File

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

6
src/pages/notas/index.tsx
Unescape View File

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

19
src/pages/team.tsx
Unescape View File

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

28
src/pages/work/[slug].tsx
Unescape View File

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

21
src/pages/work/index.tsx
Unescape View File

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

1
src/theme.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save