Recipes / PostList A2

PostList A2

A Conceptual Look at Theming
2019-08-10
The word theme can mean a lot of different things and invoke a lot of different interpretations, which can be both a blessing and a curse.
Code Literacy
2019-07-25
Ah yes, everyone's favorite question: should designers code? As much as I'd love to pontificate on the matter, I think the framing of this question is fundamentally wrong.
Portability
2019-07-23
In software development, formats help ensure that content and data are portable and can be used in many different applications.
Themeability
2019-07-21
I've been interested in the idea of constraint-based design for a while. By constraining the solution space for a particular problem, new and novel ideas can emerge beyond the initial problem's scope.

<ul
  sx={{
    listStyle: 'none',
    display: 'grid',
    gridGap: 3,
    gridTemplateColumns: 'repeat(auto-fit, minmax(256px, 1fr))',
    m: 0,
    px: 3,
    py: 4,
  }}>
  {posts.map((post) => (
    <li key={post.id} sx={{}}>
      <Themed.h2
        sx={{
          m: 0,
        }}>
        <Link
          to={post.slug}
          sx={{
            color: 'inherit',
            textDecoration: 'none',
            ':hover,:focus': {
              color: 'primary',
              textDecoration: 'underline',
            },
          }}>
          {post.title}
        </Link>
      </Themed.h2>
      <small sx={{ fontWeight: 'bold' }}>{post.date}</small>
      <Themed.p
        sx={{
          m: 0,
        }}>
        {post.excerpt}
      </Themed.p>
    </li>
  ))}
</ul>
<ul
  sx={{
    listStyle: 'none',
    display: 'grid',
    gridGap: 3,
    gridTemplateColumns: 'repeat(auto-fit, minmax(256px, 1fr))',
    m: 0,
    px: 3,
    py: 4,
  }}>
  {posts.map((post) => (
    <li key={post.id} sx={{}}>
      <Themed.h2
        sx={{
          m: 0,
        }}>
        <Link
          to={post.slug}
          sx={{
            color: 'inherit',
            textDecoration: 'none',
            ':hover,:focus': {
              color: 'primary',
              textDecoration: 'underline',
            },
          }}>
          {post.title}
        </Link>
      </Themed.h2>
      <small sx={{ fontWeight: 'bold' }}>{post.date}</small>
      <Themed.p
        sx={{
          m: 0,
        }}>
        {post.excerpt}
      </Themed.p>
    </li>
  ))}
</ul>

Edit the page on GitHub

PostList A1

MDX Table Align

PostList A2

Code Literacy

Portability

Themeability