Merge pull request #175 from satsummit/feature/responsive-text

Improve text responsiveness
satsummit · Nov 24, 2023 · da3fc36 · da3fc36
2 parents c32ec56 + 06804ba
commit da3fc36
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 113 deletions.
diff --git a/src/@chakra-ui/gatsby-plugin/theme.ts b/src/@chakra-ui/gatsby-plugin/theme.ts
@@ -16,20 +16,40 @@ const theme = {
     body: 'Barlow, sans-serif',
     heading: 'Barlow Condensed, serif'
   },
+  fontSizes: {
+    xs: '0.75rem',
+    sm: '1rem',
+    md: '1.25rem',
+    lg: '1.5rem',
+    xl: '1.75rem',
+    '2xl': '2rem',
+    '3xl': '2.25rem',
+    '4xl': '2.5rem',
+    '5xl': '2.75rem',
+    '6xl': '3rem',
+    '7xl': '3.25rem',
+    '8xl': '3.5rem',
+    '9xl': '3.75rem',
+    '10xl': '4rem'
+  },
   styles: {
     global: {
       body: {
+        fontSize: ['sm', null, null, 'md'],
         color: 'base.500'
+      },
+      '*': {
+        lineHeight: 'calc(0.5rem + 1em)'
       }
     }
   },
   textStyles: {
     lead: {
       sm: {
-        fontSize: '1.25rem'
+        fontSize: 'md'
       },
       lg: {
-        fontSize: '1.5rem'
+        fontSize: 'lg'
       }
     }
   },
@@ -40,37 +60,37 @@ const theme = {
         textTransform: 'uppercase'
       },
       sizes: {
-        xxs: {
-          fontSize: '1rem',
-          lineHeight: '1.5rem'
-        },
         xs: {
-          fontSize: '1.25rem',
-          lineHeight: '1.75rem'
+          fontSize: ['xs', null, null, 'sm'],
+          lineHeight: 'calc(0.5rem + 1em)'
         },
         sm: {
-          fontSize: '1.5rem',
-          lineHeight: '2rem'
+          fontSize: ['sm', null, null, 'md'],
+          lineHeight: 'calc(0.5rem + 1em)'
         },
         md: {
-          fontSize: '1.75rem',
-          lineHeight: '2.25rem'
+          fontSize: ['md', null, null, 'lg'],
+          lineHeight: 'calc(0.5rem + 1em)'
         },
         lg: {
-          fontSize: '2rem',
-          lineHeight: '2.5rem'
+          fontSize: ['lg', null, null, 'xl'],
+          lineHeight: 'calc(0.5rem + 1em)'
         },
         xl: {
-          fontSize: '2.25rem',
-          lineHeight: '2.75rem'
+          fontSize: ['xl', null, null, '2xl'],
+          lineHeight: 'calc(0.5rem + 1em)'
+        },
+        '2xl': {
+          fontSize: ['2xl', null, null, '3xl'],
+          lineHeight: 'calc(0.5rem + 1em)'
         },
-        xxl: {
-          fontSize: '2.5rem',
-          lineHeight: '3rem'
+        '3xl': {
+          fontSize: ['3xl', null, null, '4xl'],
+          lineHeight: 'calc(0.5rem + 1em)'
         },
-        jumbo: {
-          fontSize: '3.25rem',
-          lineHeight: '3.75rem'
+        '4xl': {
+          fontSize: ['4xl', null, null, '5xl'],
+          lineHeight: 'calc(0.5rem + 1em)'
         }
       }
     },

diff --git a/src/components/brand.tsx b/src/components/brand.tsx
@@ -1,9 +1,15 @@
 import React from 'react';
 import { useStaticQuery, graphql, Link } from 'gatsby';
-import { Text, Link as ChLink } from '@chakra-ui/react';
-import LogoIcon from './logo-icon';
+import { Heading, Text, Link as ChLink } from '@chakra-ui/react';
+import LogoMark from './logo-mark';
+
+interface BrandProps {
+  variation?: 'positive' | 'negative';
+}
+
+export default function Brand(props: BrandProps) {
+  const { variation = 'positive' } = props;
 
-export default function Brand() {
   const data = useStaticQuery(graphql`
     query {
       site {
@@ -16,41 +22,51 @@ export default function Brand() {
   `);
 
   return (
-    <Text as='strong'>
+    <Heading
+      as='strong'
+      size='md'
+      display='inline-flex'
+      color={variation === 'positive' ? 'base.500' : 'surface.500'}
+    >
       <ChLink
         as={Link}
         to='/'
         display='inline-flex'
         alignItems='center'
-        gap='2'
+        gap='3'
         textDecoration='none'
-        textTransform='uppercase'
-        fontSize='2xl'
+        transition='opacity 0.24s ease 0s'
         _hover={{
-          textDecoration: 'none'
+          opacity: '0.64'
         }}
       >
-        <LogoIcon color='white' />
-        <Text as='span'>
-          <span>{data.site.siteMetadata.title}</span>{' '}
+        <LogoMark color='currentColor' />
+        <Text
+          as='span'
+          display='inline-flex'
+          alignItems='center'
+          gap='1'
+        >
+          <Text as='span'>{data.site.siteMetadata.title}</Text>{' '}
           <Text
             as='span'
             position='relative'
             zIndex='1'
             _before={{
               content: '""',
-              backgroundColor: 'base.500',
+              backgroundColor:
+                variation === 'positive' ? 'base.200a' : 'base.400a',
               position: 'absolute',
               width: '100%',
-              height: '3',
-              bottom: '4px',
+              height: '0.5em',
+              bottom: '0.25em',
               zIndex: '-1'
             }}
           >
             {data.site.siteMetadata.edition}
           </Text>
         </Text>
       </ChLink>
-    </Text>
+    </Heading>
   );
 }
diff --git a/src/components/logo-icon.tsx → src/components/logo-mark.tsx b/src/components/logo-icon.tsx → src/components/logo-mark.tsx
@@ -1,13 +1,13 @@
-import { useToken } from '@chakra-ui/react';
+import { chakra, useToken } from '@chakra-ui/react';
 import React from 'react';
 
 export default function LogoIcon({ color }: { color: string }) {
   const [userColor, fallbackColor] = useToken('colors', [color, 'primary.500']);
 
   return (
-    <svg
-      width='32'
-      height='32'
+    <chakra.svg
+      width={{ base: '24px', lg: '32px' }}
+      height={{ base: '15px', lg: '20px' }}
       viewBox='0 0 128 80'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
@@ -16,6 +16,6 @@ export default function LogoIcon({ color }: { color: string }) {
         d='M88 16L72 32V8L64 0L56 8V32L40 16H0V64H40L56 48V80H72V48L88 64H128V16H88ZM16 56H8V24H16V56ZM32 56H24V24H32V56ZM104 56H96V24H104V56ZM120 56H112V24H120V56Z'
         fill={userColor ?? fallbackColor}
       />
-    </svg>
+    </chakra.svg>
   );
 }
diff --git a/src/components/menu-link.tsx b/src/components/menu-link.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { LinkProps } from '@chakra-ui/react';
+import SmartLink from './smart-link';
+
+export interface SmartLinkProps extends LinkProps {
+  to: string;
+}
+
+export default React.forwardRef<HTMLLinkElement, SmartLinkProps>(
+  function MenuLink(props, ref) {
+    return (
+      <SmartLink
+        ref={ref}
+        display='inline-flex'
+        alignItems='center'
+        fontFamily='Barlow Condensed, serif'
+        fontWeight='600'
+        fontSize='sm'
+        textTransform='uppercase'
+        transition='opacity 0.24s ease 0s'
+        _hover={{
+          opacity: '0.64',
+          textDecoration: 'none'
+        }}
+        {...props}
+      />
+    );
+  }
+);