Make styles responsive

src/pages/about.tsx

@@ -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>

src/pages/contact.tsx

@@ -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"

src/pages/notas/index.tsx

@@ -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"

src/pages/team.tsx

@@ -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>

src/pages/work/[slug].tsx

@@ -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
+              fontSize="md"
+              sx={{
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+                wordSpacing: '0.5rem',
+              }}
+            >
+              {data.tags.map((tag) => `${tag} `)}
             </Text>
-              ))}
-            </Stack>
           </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) => (

src/pages/work/index.tsx

@@ -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>

src/theme.ts

@@ -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',