Header A3

Home

WorkBlog

AboutContact

<header
  sx={{
    display: 'grid',
    gridGap: 3,
    maxWidth: 768,
    mx: 'auto',
    px: 3,
    py: 3,
    gridAutoFlow: 'row',
    gridTemplateColumns: [
      'repeat(2, 1fr)',
      'repeat(3, 1fr)',
    ],
    variant: 'styles.header',
  }}>
  <div
    sx={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      gridColumnStart: [ 1, 2 ],
      gridColumnEnd: [ 3, 3 ],
      order: [ 0, 1 ],
    }}>
    <Link to='/' title='Home'>
      <img
        alt='UI Logo'
        src='https://contrast.now.sh/cff/40f?size=48&fontSize=2&baseline=2&fontWeight=900&radius=32&text=UI'
      />
      <span
        sx={{
          position: 'absolute',
          width: 1,
          height: 1,
          overflow: 'hidden',
          top: -9999,
        }}>
        Home
      </span>
    </Link>
  </div>
  <div
    sx={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-start',
    }}>
    <Link to='/work'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Work
    </Link>
    <Link to='/blog'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Blog
    </Link>
  </div>
  <div
    sx={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-end',
      order: 2
    }}>
    <Link to='/about'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      About
    </Link>
    <Link to='/contact'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Contact
    </Link>
  </div>
</header>
<header
  sx={{
    display: 'grid',
    gridGap: 3,
    maxWidth: 768,
    mx: 'auto',
    px: 3,
    py: 3,
    gridAutoFlow: 'row',
    gridTemplateColumns: [
      'repeat(2, 1fr)',
      'repeat(3, 1fr)',
    ],
    variant: 'styles.header',
  }}>
  <div
    sx={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      gridColumnStart: [ 1, 2 ],
      gridColumnEnd: [ 3, 3 ],
      order: [ 0, 1 ],
    }}>
    <Link to='/' title='Home'>
      <img
        alt='UI Logo'
        src='https://contrast.now.sh/cff/40f?size=48&fontSize=2&baseline=2&fontWeight=900&radius=32&text=UI'
      />
      <span
        sx={{
          position: 'absolute',
          width: 1,
          height: 1,
          overflow: 'hidden',
          top: -9999,
        }}>
        Home
      </span>
    </Link>
  </div>
  <div
    sx={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-start',
    }}>
    <Link to='/work'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Work
    </Link>
    <Link to='/blog'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Blog
    </Link>
  </div>
  <div
    sx={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-end',
      order: 2
    }}>
    <Link to='/about'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      About
    </Link>
    <Link to='/contact'
      sx={{
        variant: 'styles.navlink',
        p: 2,
      }}>
      Contact
    </Link>
  </div>
</header>