Much ado about widths and paddings

web/components/PT/Inserts/ActorInsert.js

@@ -12,7 +12,7 @@ export default function ActorInsert(props) {
   const { _id, label, shortDescription, memberOf } = props
 
   return (
-    <Container maxW={['xl', null, '2xl', null]} mb="5" px="0">
+    <Container maxW={['md', null, '2xl', null]} mb="5">
       <Flex>
         {/* {image && (
           <Box mr="4">

web/components/PT/PortableTextBlock.js

@@ -36,7 +36,7 @@ export default function PortableTextBlock(props) {
   const {
     blocks,
     fontSize = { base: 'lg', sm: 'xl', md: 'xl', xl: '2xl' },
-    maxW = ['xl', null, '2xl', null],
+    maxW = ['md', null, '2xl', null],
     lineHeight = ['1.25', '1.3'],
     fontWeight = 'normal',
     fontFamily,

web/components/Sections/ActorCollection/Cards.js

@@ -8,7 +8,6 @@ export default function ActorCollectionCards({ children }) {
   return (
     <Container
       maxW="94vw"
-      px="0"
       pt="4"
       borderTopWidth="thin"
       borderBottomWidth="thin"

web/components/Sections/ActorCollection/Profile.js

@@ -8,11 +8,11 @@ import { getNextSanityImage } from '../../../lib/sanity.server'
 
 export default function Profile({ data }) {
   return (
-    <>
+    <Container maxW={['md', null, '2xl', null]}>
       {data.map((item) => (
         <React.Fragment key={item.item._id}>
           {item.image && (
-            <Container maxW={['xl', '2xl', '4xl', '4xl']} mb="5" mt="26">
+            <Container maxW={['md', null, '2xl', null]} mb="5" mt="26" px="0">
               <Image {...getNextSanityImage(item.image)} alt={item.label.no} layout="intrinsic" />
             </Container>
           )}
@@ -20,21 +20,21 @@ export default function Profile({ data }) {
           <Heading
             id={kebabCase(item.label)}
             as="h3"
-            maxW={['xl', null, '2xl', null]}
+            maxW={['md', null, '2xl', null]}
             mx="auto"
-            fontSize={['xl', '2xl', '3xl', null]}
+            fontSize={['2xl', '2xl', '3xl', null]}
           >
             <Link href={`/id/${item.item._id}`}>{item.label}</Link>
           </Heading>
 
           {item.item?.shortDescription && (
-            <Text maxW={['xl', null, '2xl', null]} mx="auto">
+            <Text maxW={['xl', null, '2xl', null]} fontSize={['xl', '2xl', '3xl', null]} mx="auto">
               {item.item.shortDescription}
             </Text>
           )}
           <PortableTextBlock blocks={item.description} />
         </React.Fragment>
       ))}
-    </>
+    </Container>
   )
 }

web/components/Sections/EventSection.js

@@ -15,13 +15,13 @@ export default function EventSection(props) {
   return (
     <Grid
       p="4"
-      maxW={['xl', null, '4xl', null]}
+      maxW={['md', null, '4xl', null]}
       mx="auto"
       templateColumns="auto auto"
       bg="yellow.300"
     >
       {image ? (
-        <Box mb="3" w="20em" position="relative">
+        <Box mb="3" w="40vw" position="relative">
           <Image
             alt={item.label || 'No label'}
             {...getNextSanityImage(image)}

web/components/Sections/Gallery.js

-import { Flex } from '@chakra-ui/react'
+import { Container, Flex } from '@chakra-ui/react'
 import ItemView from './ItemView'
 
 export default function Gallery(props) {
@@ -9,17 +9,21 @@ export default function Gallery(props) {
   const { items } = props
 
   return (
-    <Flex
-      maxW="full"
-      px="12"
-      py="10"
-      my="10"
-      bg="blackAlpha.100"
-      overflowX="scroll"
-      direction="row"
-    >
-      {/* <pre>{JSON.stringify(props, null, 4)}</pre> */}
-      {items && items.map((i) => <ItemView key={i._key} {...i} />)}
-    </Flex>
+    <Container maxW="full" px="0">
+      <Flex
+        maxW="full"
+        px="12"
+        py="10"
+        my="10"
+        mx="0"
+        bg="blackAlpha.100"
+        overflowX="scroll"
+        direction={{ base: 'column', sm: 'row' }}
+        boxSizing="content-box"
+      >
+        {/* <pre>{JSON.stringify(props, null, 4)}</pre> */}
+        {items && items.map((i) => <ItemView key={i._key} {...i} />)}
+      </Flex>
+    </Container>
   )
 }

web/components/Sections/Iframe.js

 import { AspectRatio, Container } from '@chakra-ui/react'
-import Caption from './shared/caption'
+import Caption from './shared/Caption'
 
 export default function Iframe(props) {
   if (!props || props.disabled === true) {
@@ -7,7 +7,7 @@ export default function Iframe(props) {
   }
 
   return (
-    <Container maxW={['xl', 'xl', 'xl', '2xl']} my="10" px="0">
+    <Container maxW={['xl', 'xl', 'xl', '2xl']} my="10">
       <Container maxW="full" backgroundColor="white" px="0" mb="4" position="relative">
         <AspectRatio ratio={4 / 3}>
           <iframe src={props.url} allowFullScreen aria-hidden="false" tabIndex="0" />

web/components/Sections/Quote.js

@@ -7,7 +7,7 @@ export default function Quote(props) {
   }
 
   return (
-    <Box as="figure" maxWidth={['sm', 'lg', 'xl', null]} mx="auto" my="6" px={{ xs: 4, sm: 4 }}>
+    <Box as="figure" maxWidth={['sm', null, 'xl', null]} mx="auto" my="6" px={{ xs: 4, sm: 4 }}>
       <Box as="blockquote">
         <PortableTextBlock
           fontSize={['lg', null, '2xl', null]}

web/components/Sections/SubStory.js

@@ -30,18 +30,17 @@ export default function SubStory(props) {
 
   return (
     <Container
-      maxW={['xl', null, '2xl', null]}
-      p="0"
+      maxW="full"
       my="10"
-      mx="auto"
+      centerContent
       borderTop="1px solid"
       borderBottom="1px solid"
       borderColor="red.200"
       color="gray.500"
     >
       <Flex pt="2" alignItems="baseline" justifyContent="baseline">
-        <Box mr="3">
-          <Icon as={ImEye} w={8} h={8} mt="-1" />
+        <Box mr="3" mt="-3">
+          <Icon as={ImEye} w={8} h={8} />
         </Box>
 
         {/*  <Box pt="2">
@@ -66,7 +65,7 @@ export default function SubStory(props) {
             alt={''}
           />
         )} */}
-        <Button colorScheme="blackAlpha" variant="link" onClick={onOpen} ml="4" mr={{ sm: 4 }}>
+        <Button variant="link" onClick={onOpen} ml="4" mr={{ sm: 4 }}>
           Les mer
         </Button>
       </Flex>

web/components/Sections/WrapperGrid.js

@@ -16,7 +16,7 @@ export default function WrapperGrid({ children }) {
       gridTemplateColumns={{ base: 'auto', xl: '10fr 3fr' }}
       gridTemplateRows="1fr auto"
       mx="auto"
-      px="5"
+      px="4"
     >
       {children}
     </Grid>

web/theme/index.js

@@ -42,6 +42,12 @@ const theme = extendTheme({
         borderBottom: 'solid 2px',
         borderColor: 'red.300',
       },
+      'main > div > div > p, main > div > div > h2, main > div > div > h3': {
+        px: '4',
+      },
+      'main > div > div > figure': {
+        px: { base: '4' },
+      },
     },
   },
 })