From 2cc69ff37e6278968e696aa6a8ed5b2dea5f3b01 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 22 May 2020 15:36:55 -0700
Subject: [PATCH 1/2] Add flex primitive, replace all instances of grid

---
 package.json                                  |  2 +
 src/components/AMAQuestions/AskQuestion.tsx   |  6 +-
 src/components/AMAQuestions/EditQuestion.tsx  | 24 ++---
 .../AMAQuestions/PendingQuestions.tsx         |  5 +-
 src/components/AMAQuestions/QuestionItem.tsx  | 22 ++---
 .../AMAQuestions/QuestionReaction.tsx         |  9 +-
 src/components/AMAQuestions/index.tsx         |  9 +-
 src/components/Bookmarks/AddBookmark.tsx      |  6 +-
 src/components/Bookmarks/BookmarkListItem.tsx | 34 ++++---
 src/components/Bookmarks/BookmarkReaction.tsx | 10 +-
 .../Bookmarks/EditingBookmarkListItem.tsx     | 24 ++---
 src/components/Bookmarks/index.tsx            |  6 +-
 src/components/DesignDetailView/index.tsx     | 75 ++++++++-------
 src/components/DesignDetailsGrid/index.tsx    |  6 +-
 src/components/FigmaPlugins/index.tsx         | 26 ++---
 src/components/Flex/index.tsx                 | 40 ++++++++
 src/components/HNPost/Comment.tsx             |  1 -
 src/components/HNPost/index.tsx               | 10 +-
 src/components/HNPosts/Navigation.tsx         |  6 +-
 src/components/HNPosts/PostListItem.tsx       |  6 +-
 src/components/HNPosts/index.tsx              |  6 +-
 src/components/Overthought/List/index.tsx     | 10 +-
 src/components/Overthought/Post/index.tsx     | 35 ++-----
 src/components/Overthought/Post/style.tsx     |  1 -
 src/components/PodcastEpisodesList/index.tsx  | 10 +-
 src/graphql/queries/posts.ts                  |  3 -
 src/pages/about.tsx                           | 21 ++--
 src/pages/ama.tsx                             |  8 +-
 src/pages/bookmarks.tsx                       |  6 +-
 src/pages/design-details/index.tsx            | 33 ++++---
 src/pages/hn/about.tsx                        | 10 +-
 src/pages/hn/best.tsx                         |  6 +-
 src/pages/hn/index.tsx                        |  6 +-
 src/pages/index.tsx                           | 95 ++++++++++---------
 src/pages/overthought/[slug].tsx              |  5 +-
 src/pages/overthought/index.tsx               | 31 +++---
 yarn.lock                                     | 76 ++++++++++++++-
 37 files changed, 390 insertions(+), 299 deletions(-)
 create mode 100644 src/components/Flex/index.tsx

diff --git a/package.json b/package.json
index 528ecc78e..00afd9c56 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "react-markdown": "^4.3.1",
     "react-visibility-sensor": "^5.1.1",
     "rebass": "^4.0.7",
+    "reflexbox": "^4.0.6",
     "rehype-parse": "^6.0.2",
     "rehype-remark": "^8.0.0",
     "remark-stringify": "^8.0.0",
@@ -55,6 +56,7 @@
     "string-replace-to-array": "^1.0.3",
     "styled-components": "^4.4.1",
     "terser": "^4.7.0",
+    "theme-ui": "^0.3.1",
     "throttle-debounce": "^2.1.0",
     "timeago.js": "^4.0.2",
     "twilio": "^3.43.1",
diff --git a/src/components/AMAQuestions/AskQuestion.tsx b/src/components/AMAQuestions/AskQuestion.tsx
index f2b0f65c6..6d1b1d8c6 100644
--- a/src/components/AMAQuestions/AskQuestion.tsx
+++ b/src/components/AMAQuestions/AskQuestion.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { useAddAmaQuestionMutation } from '~/graphql/types.generated'
 import { Small } from '~/components/Typography'
-import Grid from '../Grid'
 import Textarea from '../Textarea'
 import { PrimaryButton } from '../Button'
+import Flex from '../Flex'
 
 export default function AddBookmark() {
   const [question, setQuestion] = React.useState('')
@@ -40,7 +40,7 @@ export default function AddBookmark() {
   }
 
   return (
-    <Grid gap={12} as={'form'} onSubmit={onSubmit}>
+    <Flex flexDirection="column" gap={12} as={'form'} onSubmit={onSubmit}>
       <Textarea
         value={question}
         placeholder="Ask me anything..."
@@ -56,6 +56,6 @@ export default function AddBookmark() {
           Thanks for asking! I’ll reply soon, so feel free to check back 👋
         </Small>
       )}
-    </Grid>
+    </Flex>
   )
 }
diff --git a/src/components/AMAQuestions/EditQuestion.tsx b/src/components/AMAQuestions/EditQuestion.tsx
index 1caa8dec1..750af4512 100644
--- a/src/components/AMAQuestions/EditQuestion.tsx
+++ b/src/components/AMAQuestions/EditQuestion.tsx
@@ -8,7 +8,7 @@ import {
 import { Small } from '~/components/Typography'
 import { GET_AMA_QUESTIONS } from '~/graphql/queries'
 import Textarea from '~/components/Textarea'
-import Grid from '~/components/Grid'
+import Flex from '../Flex'
 
 interface Props {
   question: Ama
@@ -162,7 +162,7 @@ export default function EditQuestion(props: Props) {
   }
 
   return (
-    <Grid gap={12} as={'form'} onSubmit={handleSave}>
+    <Flex flexDirection="column" gap={12} as={'form'} onSubmit={handleSave}>
       <Textarea
         placeholder="Question"
         value={state.question}
@@ -183,13 +183,15 @@ export default function EditQuestion(props: Props) {
         <Small style={{ color: 'var(--accent-red)' }}>{state.error}</Small>
       )}
 
-      <Grid gap={12} columns={'min-content 1fr min-content'}>
-        <Small style={{ cursor: 'pointer' }} onClick={handleSave}>
-          Save
-        </Small>
-        <Small style={{ cursor: 'pointer' }} onClick={onDone}>
-          Cancel
-        </Small>
+      <Flex justifyContent="space-between">
+        <Flex gap={12}>
+          <Small style={{ cursor: 'pointer' }} onClick={handleSave}>
+            Save
+          </Small>
+          <Small style={{ cursor: 'pointer' }} onClick={onDone}>
+            Cancel
+          </Small>
+        </Flex>
         <Small
           onClick={handleDelete}
           style={{
@@ -199,7 +201,7 @@ export default function EditQuestion(props: Props) {
         >
           Delete
         </Small>
-      </Grid>
-    </Grid>
+      </Flex>
+    </Flex>
   )
 }
diff --git a/src/components/AMAQuestions/PendingQuestions.tsx b/src/components/AMAQuestions/PendingQuestions.tsx
index d8e4d80c9..61e43e3f9 100644
--- a/src/components/AMAQuestions/PendingQuestions.tsx
+++ b/src/components/AMAQuestions/PendingQuestions.tsx
@@ -3,6 +3,7 @@ import Divider from '../Divider'
 import { QuestionItem } from './QuestionItem'
 import { useGetAmaQuestionsQuery, AmaStatus } from '~/graphql/types.generated'
 import LoadingSpinner from '../LoadingSpinner'
+import Flex from '../Flex'
 
 export default function PendingQuestion() {
   const { data, loading } = useGetAmaQuestionsQuery({
@@ -18,12 +19,12 @@ export default function PendingQuestion() {
   if (!data || !data.amaQuestions) return null
 
   return (
-    <React.Fragment>
+    <Flex flexDirection="column" gap={32}>
       {data.amaQuestions.map((question) => (
         <QuestionItem editable={true} key={question.id} question={question} />
       ))}
 
       <Divider />
-    </React.Fragment>
+    </Flex>
   )
 }
diff --git a/src/components/AMAQuestions/QuestionItem.tsx b/src/components/AMAQuestions/QuestionItem.tsx
index b4a60feb4..584f8c9e0 100644
--- a/src/components/AMAQuestions/QuestionItem.tsx
+++ b/src/components/AMAQuestions/QuestionItem.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react'
 import { Ama } from '~/graphql/types.generated'
 import { Small, P } from '~/components/Typography'
-import Grid from '~/components/Grid'
 import { format } from 'timeago.js'
 import QuestionReaction from './QuestionReaction'
 import EditQuestion from './EditQuestion'
 import MarkdownRenderer from '../MarkdownRenderer'
+import Flex from '../Flex'
 
 interface Props {
   editable: boolean
@@ -30,17 +30,15 @@ export const QuestionItem = React.memo((props: Props) => {
   }
 
   return (
-    <Grid gap={8}>
+    <Flex flexDirection="column" gap={question.answer ? 8 : 4}>
       <P style={{ fontWeight: '700' }}>{question.question}</P>
       {question.answer && (
-        <Grid style={{ alignItems: 'start' }}>
-          <Grid className={'markdown'}>
-            <MarkdownRenderer>{question.answer}</MarkdownRenderer>
-          </Grid>
-        </Grid>
+        <Flex className={'markdown'}>
+          <MarkdownRenderer>{question.answer}</MarkdownRenderer>
+        </Flex>
       )}
 
-      <Grid columns={'repeat(5, max-content)'} gap={12}>
+      <Flex gap={12} alignItems="center">
         <QuestionReaction question={question} />
 
         <Small style={{ color: 'var(--text-placeholder)' }}>/</Small>
@@ -56,7 +54,7 @@ export const QuestionItem = React.memo((props: Props) => {
         </Small>
 
         {editable && (
-          <React.Fragment>
+          <Flex gap={8}>
             <Small style={{ color: 'var(--text-placeholder)' }}>/</Small>
             <Small
               style={{ cursor: 'pointer' }}
@@ -64,9 +62,9 @@ export const QuestionItem = React.memo((props: Props) => {
             >
               Edit
             </Small>
-          </React.Fragment>
+          </Flex>
         )}
-      </Grid>
-    </Grid>
+      </Flex>
+    </Flex>
   )
 })
diff --git a/src/components/AMAQuestions/QuestionReaction.tsx b/src/components/AMAQuestions/QuestionReaction.tsx
index 2f9ac1df0..276172489 100644
--- a/src/components/AMAQuestions/QuestionReaction.tsx
+++ b/src/components/AMAQuestions/QuestionReaction.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Ama, useAddAmaReactionMutation } from '~/graphql/types.generated'
 import { Small } from '~/components/Typography'
-import Grid from '~/components/Grid'
+import Flex from '../Flex'
 
 interface Props {
   question: Ama
@@ -29,11 +29,10 @@ export default function QuestionReaction(props: Props) {
   }
 
   return (
-    <Grid
+    <Flex
       onClick={handleReaction}
       style={{ alignItems: 'center', cursor: 'pointer' }}
-      gap={2}
-      columns={'16px auto'}
+      gap={8}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -54,6 +53,6 @@ export default function QuestionReaction(props: Props) {
         ></path>
       </svg>
       <Small>{question.reactions.toLocaleString()}</Small>
-    </Grid>
+    </Flex>
   )
 }
diff --git a/src/components/AMAQuestions/index.tsx b/src/components/AMAQuestions/index.tsx
index 50687b787..fff1dfe37 100644
--- a/src/components/AMAQuestions/index.tsx
+++ b/src/components/AMAQuestions/index.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { useGetAmaQuestionsQuery, AmaStatus } from '~/graphql/types.generated'
 import { useAuth } from '~/hooks/useAuth'
-import Grid from '~/components/Grid'
 import { Small } from '~/components/Typography'
 import Divider from '~/components/Divider'
 import { Button } from '~/components/Button'
@@ -11,7 +10,7 @@ import { QuestionItem } from './QuestionItem'
 import AskQuestion from './AskQuestion'
 import PendingQuestions from './PendingQuestions'
 import FullscreenLoading from '../FullscreenLoading'
-import GlobalMarkdownStyles from '../GlobalStyles/markdown'
+import Flex from '../Flex'
 
 export default function QuestionsList() {
   const { isMe } = useAuth()
@@ -66,9 +65,7 @@ export default function QuestionsList() {
   }
 
   return (
-    <Grid gap={32}>
-      <GlobalMarkdownStyles />
-
+    <Flex flexDirection="column" gap={32}>
       <AskQuestion />
 
       <Divider />
@@ -86,6 +83,6 @@ export default function QuestionsList() {
           {loading ? <LoadingSpinner size={16} /> : 'Show me more'}
         </Button>
       )}
-    </Grid>
+    </Flex>
   )
 }
diff --git a/src/components/Bookmarks/AddBookmark.tsx b/src/components/Bookmarks/AddBookmark.tsx
index bba4d20c1..5040bdcf4 100644
--- a/src/components/Bookmarks/AddBookmark.tsx
+++ b/src/components/Bookmarks/AddBookmark.tsx
@@ -3,8 +3,8 @@ import { useAddBookmarkMutation } from '~/graphql/types.generated'
 import { GET_BOOKMARKS } from '~/graphql/queries'
 import { Small } from '~/components/Typography'
 import Input from '~/components/Input'
-import Grid from '../Grid'
 import Textarea from '../Textarea'
+import Flex from '../Flex'
 
 export default function AddBookmark() {
   const [url, setUrl] = React.useState('')
@@ -66,7 +66,7 @@ export default function AddBookmark() {
   }
 
   return (
-    <Grid gap={12} as={'form'} onSubmit={onSubmit}>
+    <Flex flexDirection="column" gap={12} as={'form'} onSubmit={onSubmit}>
       <Input
         autoFocus
         type="text"
@@ -89,6 +89,6 @@ export default function AddBookmark() {
         </React.Fragment>
       )}
       {error && <Small style={{ color: 'var(--accent-red)' }}>{error}</Small>}
-    </Grid>
+    </Flex>
   )
 }
diff --git a/src/components/Bookmarks/BookmarkListItem.tsx b/src/components/Bookmarks/BookmarkListItem.tsx
index a1b7c30cc..aeadfba54 100644
--- a/src/components/Bookmarks/BookmarkListItem.tsx
+++ b/src/components/Bookmarks/BookmarkListItem.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { Bookmark } from '~/graphql/types.generated'
 import { Small, A } from '~/components/Typography'
-import Grid from '~/components/Grid'
 import Linkify from '~/components/Linkify'
 import EditingBookmarkListItem from './EditingBookmarkListItem'
 import BookmarkReaction from './BookmarkReaction'
+import Flex from '../Flex'
 
 interface Props {
   editable: boolean
@@ -25,7 +25,7 @@ export const BookmarkListItem = React.memo((props: Props) => {
   }
 
   return (
-    <Grid gap={bookmark.notes ? 8 : 4}>
+    <Flex flexDirection="column" gap={bookmark.notes ? 8 : 4}>
       <A
         href={`${bookmark.url}?ref=brianlovin.com`}
         target="_blank"
@@ -34,19 +34,17 @@ export const BookmarkListItem = React.memo((props: Props) => {
         {bookmark.title || bookmark.url}
       </A>
       {bookmark.notes && (
-        <Grid style={{ alignItems: 'start' }} columns={'1fr'}>
-          <Small
-            style={{
-              borderLeft: '2px solid var(--border-primary)',
-              paddingLeft: '12px',
-              whiteSpace: 'pre-wrap',
-            }}
-          >
-            <Linkify>{bookmark.notes}</Linkify>
-          </Small>
-        </Grid>
+        <Small
+          style={{
+            borderLeft: '2px solid var(--border-primary)',
+            paddingLeft: '12px',
+            whiteSpace: 'pre-wrap',
+          }}
+        >
+          <Linkify>{bookmark.notes}</Linkify>
+        </Small>
       )}
-      <Grid columns={`repeat(5, min-content)`} gap={12}>
+      <Flex gap={12} alignItems="center">
         <BookmarkReaction bookmark={bookmark} />
 
         <Small style={{ color: 'var(--text-placeholder)' }}>/</Small>
@@ -60,7 +58,7 @@ export const BookmarkListItem = React.memo((props: Props) => {
         </A>
 
         {editable && (
-          <React.Fragment>
+          <Flex gap={8} alignItems="center">
             <Small style={{ color: 'var(--text-placeholder)' }}>/</Small>
 
             <Small
@@ -69,9 +67,9 @@ export const BookmarkListItem = React.memo((props: Props) => {
             >
               Edit
             </Small>
-          </React.Fragment>
+          </Flex>
         )}
-      </Grid>
-    </Grid>
+      </Flex>
+    </Flex>
   )
 })
diff --git a/src/components/Bookmarks/BookmarkReaction.tsx b/src/components/Bookmarks/BookmarkReaction.tsx
index 9370951d9..5fcfdaebe 100644
--- a/src/components/Bookmarks/BookmarkReaction.tsx
+++ b/src/components/Bookmarks/BookmarkReaction.tsx
@@ -4,7 +4,7 @@ import {
   useAddBookmarkReactionMutation,
 } from '~/graphql/types.generated'
 import { Small } from '~/components/Typography'
-import Grid from '~/components/Grid'
+import Flex from '~/components/Flex'
 
 interface Props {
   bookmark: Bookmark
@@ -32,11 +32,11 @@ export default function BookmarkReaction(props: Props) {
   }
 
   return (
-    <Grid
+    <Flex
       onClick={handleReaction}
       style={{ alignItems: 'center', cursor: 'pointer' }}
-      gap={2}
-      columns={'16px auto'}
+      gap={8}
+      alignItems="center"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -57,6 +57,6 @@ export default function BookmarkReaction(props: Props) {
         ></path>
       </svg>
       <Small>{bookmark.reactions.toLocaleString()}</Small>
-    </Grid>
+    </Flex>
   )
 }
diff --git a/src/components/Bookmarks/EditingBookmarkListItem.tsx b/src/components/Bookmarks/EditingBookmarkListItem.tsx
index e92ce6979..8b228de9b 100644
--- a/src/components/Bookmarks/EditingBookmarkListItem.tsx
+++ b/src/components/Bookmarks/EditingBookmarkListItem.tsx
@@ -8,7 +8,7 @@ import { Small } from '~/components/Typography'
 import { GET_BOOKMARKS } from '~/graphql/queries'
 import Input from '~/components/Input'
 import Textarea from '~/components/Textarea'
-import Grid from '~/components/Grid'
+import Flex from '../Flex'
 
 interface Props {
   bookmark: Bookmark
@@ -111,7 +111,7 @@ export default function EditingBookmarkListItem(props: Props) {
   }
 
   return (
-    <Grid gap={12} as={'form'} onSubmit={handleSave}>
+    <Flex flexDirection="column" gap={12} as={'form'} onSubmit={handleSave}>
       <Input
         autoFocus
         placeholder="Title"
@@ -130,13 +130,15 @@ export default function EditingBookmarkListItem(props: Props) {
         <Small style={{ color: 'var(--accent-red)' }}>{state.error}</Small>
       )}
 
-      <Grid gap={12} columns={'min-content 1fr min-content'}>
-        <Small style={{ cursor: 'pointer' }} onClick={handleSave}>
-          Save
-        </Small>
-        <Small style={{ cursor: 'pointer' }} onClick={onDone}>
-          Cancel
-        </Small>
+      <Flex justifyContent="space-between">
+        <Flex gap={12}>
+          <Small style={{ cursor: 'pointer' }} onClick={handleSave}>
+            Save
+          </Small>
+          <Small style={{ cursor: 'pointer' }} onClick={onDone}>
+            Cancel
+          </Small>
+        </Flex>
         <Small
           onClick={handleDelete}
           style={{
@@ -146,7 +148,7 @@ export default function EditingBookmarkListItem(props: Props) {
         >
           Delete
         </Small>
-      </Grid>
-    </Grid>
+      </Flex>
+    </Flex>
   )
 }
diff --git a/src/components/Bookmarks/index.tsx b/src/components/Bookmarks/index.tsx
index e6fa0962e..92a77ef64 100644
--- a/src/components/Bookmarks/index.tsx
+++ b/src/components/Bookmarks/index.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { useGetBookmarksQuery } from '~/graphql/types.generated'
 import { useAuth } from '~/hooks/useAuth'
-import Grid from '~/components/Grid'
 import { BookmarkListItem } from './BookmarkListItem'
 import { PAGINATION_AMOUNT } from '~/graphql/constants'
 import { Button } from '../Button'
 import LoadingSpinner from '../LoadingSpinner'
 import FullscreenLoading from '../FullscreenLoading'
+import Flex from '../Flex'
 
 export default function BookmarksList() {
   const { isMe } = useAuth()
@@ -57,7 +57,7 @@ export default function BookmarksList() {
   }
 
   return (
-    <Grid gap={24}>
+    <Flex flexDirection="column" gap={24}>
       {bookmarks.map((bookmark, index) => (
         <BookmarkListItem
           editable={isMe}
@@ -71,6 +71,6 @@ export default function BookmarksList() {
           {loading ? <LoadingSpinner size={16} /> : 'Show me more'}
         </Button>
       )}
-    </Grid>
+    </Flex>
   )
 }
diff --git a/src/components/DesignDetailView/index.tsx b/src/components/DesignDetailView/index.tsx
index d45a0d417..2f6ec26d3 100644
--- a/src/components/DesignDetailView/index.tsx
+++ b/src/components/DesignDetailView/index.tsx
@@ -4,9 +4,10 @@ import { H3, Subheading, A, Rarr } from '~/components/Typography'
 import DesignDetailMedia from '~/components/DesignDetailMedia'
 import Markdown from '~/components/MarkdownRenderer'
 import Picture from '../Picture'
-import Grid from '../Grid'
 import { format } from 'timeago.js'
 import { DesignDetailsPost } from '~/data/appDissections'
+import { CenteredColumn } from '../Layouts'
+import Flex from '../Flex'
 
 interface Props {
   post: DesignDetailsPost
@@ -20,43 +21,41 @@ export default function DesignDetailView(props: Props) {
   } details`
 
   return (
-    <Grid
-      gap={48}
-      columns={'fit-content(640px)'}
-      style={{ justifyContent: 'center' }}
-    >
-      <Grid gap={32}>
-        <Picture
-          width={'64px'}
-          height={'64px'}
-          style={{
-            borderRadius: '16px',
-            overflow: 'hidden',
-          }}
-          srcset={[
-            `/static/img/design-details/${post.slug}.webp`,
-            `/static/img/design-details/${post.slug}.jpeg`,
-          ]}
-          alt={post.title}
-        />
-        <Grid gap={16}>
-          <H3>{post.title}</H3>
-          <Subheading>{subheading}</Subheading>
-        </Grid>
-        <Markdown>{post.description}</Markdown>
-        {post.details.map((detail, i) => (
-          <DesignDetailMedia detail={detail} key={`${detail.title}-${i}`} />
-        ))}
-      </Grid>
+    <CenteredColumn>
+      <Flex flexDirection="column" gap={48}>
+        <Flex flexDirection="column" gap={32}>
+          <Picture
+            width={'64px'}
+            height={'64px'}
+            style={{
+              borderRadius: '16px',
+              overflow: 'hidden',
+            }}
+            srcset={[
+              `/static/img/design-details/${post.slug}.webp`,
+              `/static/img/design-details/${post.slug}.jpeg`,
+            ]}
+            alt={post.title}
+          />
+          <Flex flexDirection="column" gap={16}>
+            <H3>{post.title}</H3>
+            <Subheading>{subheading}</Subheading>
+          </Flex>
+          <Markdown>{post.description}</Markdown>
+          {post.details.map((detail, i) => (
+            <DesignDetailMedia detail={detail} key={`${detail.title}-${i}`} />
+          ))}
+        </Flex>
 
-      <Grid gap={16}>
-        <H3>App Dissection</H3>
-        <Link href="/design-details" passHref>
-          <A>
-            See all posts <Rarr />
-          </A>
-        </Link>
-      </Grid>
-    </Grid>
+        <Flex flexDirection="column" gap={16}>
+          <H3>App Dissection</H3>
+          <Link href="/design-details" passHref>
+            <A>
+              See all posts <Rarr />
+            </A>
+          </Link>
+        </Flex>
+      </Flex>
+    </CenteredColumn>
   )
 }
diff --git a/src/components/DesignDetailsGrid/index.tsx b/src/components/DesignDetailsGrid/index.tsx
index 6bebad5fd..57932555b 100644
--- a/src/components/DesignDetailsGrid/index.tsx
+++ b/src/components/DesignDetailsGrid/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import DesignDetailsCard from '~/components/DesignDetailsCard'
-import Grid from '~/components/Grid'
 import { DesignDetailsPostSummary } from '~/data/appDissections'
+import Flex from '../Flex'
 
 interface Props {
   summaries: DesignDetailsPostSummary[]
@@ -9,10 +9,10 @@ interface Props {
 
 export default function DesignDetailsGrid({ summaries }: Props) {
   return (
-    <Grid gap={16}>
+    <Flex flexDirection="column" gap={16}>
       {summaries.map((summary) => (
         <DesignDetailsCard key={summary.slug} summary={summary} />
       ))}
-    </Grid>
+    </Flex>
   )
 }
diff --git a/src/components/FigmaPlugins/index.tsx b/src/components/FigmaPlugins/index.tsx
index 1f1b2de05..c8d89ac2a 100644
--- a/src/components/FigmaPlugins/index.tsx
+++ b/src/components/FigmaPlugins/index.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react'
 import { A, P } from '~/components/Typography'
-import Grid from '~/components/Grid'
+import Flex from '../Flex'
 
 export default function FigmaPlugins() {
   return (
-    <Grid gap={16}>
-      <Grid gap={4}>
+    <Flex flexDirection="column" gap={16}>
+      <Flex flexDirection="column" gap={4}>
         <A
           href="https://www.figma.com/c/plugin/744725347356614754/Dominant-Color-Toolkit-🎨"
           target="_blank"
@@ -16,9 +16,9 @@ export default function FigmaPlugins() {
         <P>
           Generate a palette from an image to magically populate your designs.
         </P>
-      </Grid>
+      </Flex>
 
-      <Grid>
+      <Flex flexDirection="column">
         <A
           href="https://www.figma.com/c/plugin/743654854885744527/Responsify-⚡%EF%B8%8F"
           target="_blank"
@@ -27,9 +27,9 @@ export default function FigmaPlugins() {
           Responsify
         </A>
         <P>Quickly test your designs across multiple device sizes.</P>
-      </Grid>
+      </Flex>
 
-      <Grid>
+      <Flex flexDirection="column">
         <A
           href="https://www.figma.com/c/plugin/747172434405306948/iOS-Export-Settings"
           target="_blank"
@@ -41,9 +41,9 @@ export default function FigmaPlugins() {
           Applies the correct export settings for every required iOS App Icon
           size and density.
         </P>
-      </Grid>
+      </Flex>
 
-      <Grid>
+      <Flex flexDirection="column">
         <A
           href="https://www.figma.com/c/plugin/747228167548695118/Export-.zip"
           target="_blank"
@@ -52,9 +52,9 @@ export default function FigmaPlugins() {
           Export .zip
         </A>
         <P>Easily export assets from Figma directly into a .zip file.</P>
-      </Grid>
+      </Flex>
 
-      <Grid>
+      <Flex flexDirection="column">
         <A
           href="https://github.com/brianlovin/figma-github-data"
           target="_blank"
@@ -63,7 +63,7 @@ export default function FigmaPlugins() {
           GitHub Data
         </A>
         <P>Populate data from GitHub into Figma mocks</P>
-      </Grid>
-    </Grid>
+      </Flex>
+    </Flex>
   )
 }
diff --git a/src/components/Flex/index.tsx b/src/components/Flex/index.tsx
new file mode 100644
index 000000000..f14cab859
--- /dev/null
+++ b/src/components/Flex/index.tsx
@@ -0,0 +1,40 @@
+/* @jsx jsx */
+import React from 'react'
+import { jsx } from 'theme-ui'
+import { Flex as Reflex, BoxProps } from 'reflexbox'
+
+type Props = BoxProps & {
+  gap?: number
+  children: React.ReactChildren | React.ReactChildren[]
+}
+
+export default function Flex(props: Props) {
+  // eslint-disable-next-line
+  let { children, ...rest } = props
+
+  if (typeof props.gap === 'number' && props.gap !== 0) {
+    children = React.Children.map(children, (child, index) => {
+      // a child might be rendered conditionally, in which case it will return
+      // undefined. We don't want to wrap undefined in a div, so we just skip
+      // the element wrapping step early
+      if (!child) return
+
+      return jsx(
+        'div',
+        {
+          style:
+            index !== 0
+              ? {
+                  [props.flexDirection === 'column'
+                    ? 'marginTop'
+                    : 'marginLeft']: `${props.gap}px`,
+                }
+              : {},
+        },
+        child
+      )
+    })
+  }
+
+  return jsx(Reflex, rest, children)
+}
diff --git a/src/components/HNPost/Comment.tsx b/src/components/HNPost/Comment.tsx
index b4e7fee97..7a5b619b6 100644
--- a/src/components/HNPost/Comment.tsx
+++ b/src/components/HNPost/Comment.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import Grid from '~/components/Grid'
 import { Small } from '../Typography'
 import { LeftDivider } from './style'
 
diff --git a/src/components/HNPost/index.tsx b/src/components/HNPost/index.tsx
index 5fe5648cc..bb403c129 100644
--- a/src/components/HNPost/index.tsx
+++ b/src/components/HNPost/index.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import Link from 'next/link'
 import { H3, Small } from '~/components/Typography'
-import Grid from '~/components/Grid'
 import { Comment } from './Comment'
 import GlobalMarkdownStyles from '../GlobalStyles/markdown'
 import Divider from '../Divider'
@@ -9,6 +8,7 @@ import { CenteredColumn } from '../Layouts'
 import Byline from './Byline'
 import { HNPost as HNPostType } from '~/pages/hn'
 import HNSubscribeBox from '../HNSubscribe'
+import Flex from '../Flex'
 
 interface Props {
   post: HNPostType
@@ -28,8 +28,8 @@ export function HNPost(props: Props) {
     <React.Fragment>
       <GlobalMarkdownStyles />
       <CenteredColumn gap={32} data-cy="bookmarks">
-        <Grid gap={32}>
-          <Grid gap={16}>
+        <Flex flexDirection="column" gap={32}>
+          <Flex flexDirection="column" gap={16}>
             <Link href={'/hn'}>
               <a>
                 <Small>&larr; Back</Small>
@@ -39,8 +39,8 @@ export function HNPost(props: Props) {
               <H3>{post.title}</H3>
             </a>
             <Byline post={post} />
-          </Grid>
-        </Grid>
+          </Flex>
+        </Flex>
 
         <Divider />
 
diff --git a/src/components/HNPosts/Navigation.tsx b/src/components/HNPosts/Navigation.tsx
index 3c223b7f7..1d8220ef8 100644
--- a/src/components/HNPosts/Navigation.tsx
+++ b/src/components/HNPosts/Navigation.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import Link from 'next/link'
-import Grid from '~/components/Grid'
 import { StyledA } from './style'
+import Flex from '../Flex'
 
 interface Props {
   active: string
@@ -11,7 +11,7 @@ export default function Navigation(props: Props) {
   const { active } = props
 
   return (
-    <Grid gap={8} columns={'repeat(3, max-content)'}>
+    <Flex gap={8} columns={'repeat(3, max-content)'}>
       <Link href="/hn">
         <StyledA active={active === 'top'}>Top</StyledA>
       </Link>
@@ -21,6 +21,6 @@ export default function Navigation(props: Props) {
       <Link href="/hn/about">
         <StyledA active={active === 'about'}>About</StyledA>
       </Link>
-    </Grid>
+    </Flex>
   )
 }
diff --git a/src/components/HNPosts/PostListItem.tsx b/src/components/HNPosts/PostListItem.tsx
index 3bae962a0..f362bb388 100644
--- a/src/components/HNPosts/PostListItem.tsx
+++ b/src/components/HNPosts/PostListItem.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { A } from '~/components/Typography'
-import Grid from '~/components/Grid'
 import Byline from '../HNPost/Byline'
 import { HNPost } from '~/pages/hn'
+import Flex from '../Flex'
 
 interface Props {
   post: HNPost
@@ -12,12 +12,12 @@ export const PostListItem = React.memo((props: Props) => {
   const { post } = props
 
   return (
-    <Grid gap={4}>
+    <Flex flexDirection="column" gap={4}>
       <A href={post.url} target="_blank" rel="noopener noreferrer">
         {post.title}
       </A>
 
       <Byline post={post} />
-    </Grid>
+    </Flex>
   )
 })
diff --git a/src/components/HNPosts/index.tsx b/src/components/HNPosts/index.tsx
index ecc885f14..ea9853a5e 100644
--- a/src/components/HNPosts/index.tsx
+++ b/src/components/HNPosts/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import Grid from '~/components/Grid'
 import { PostListItem } from './PostListItem'
 import { HNPost } from '~/pages/hn'
+import Flex from '../Flex'
 
 interface Props {
   posts: HNPost[]
@@ -11,11 +11,11 @@ const PostList = React.memo((props: Props) => {
   const { posts } = props
 
   return (
-    <Grid gap={24}>
+    <Flex flexDirection="column" gap={24}>
       {posts.map((post) => (
         <PostListItem key={post.id} post={post} />
       ))}
-    </Grid>
+    </Flex>
   )
 })
 
diff --git a/src/components/Overthought/List/index.tsx b/src/components/Overthought/List/index.tsx
index a3cbac59f..55f4a7082 100644
--- a/src/components/Overthought/List/index.tsx
+++ b/src/components/Overthought/List/index.tsx
@@ -3,7 +3,7 @@ import { format } from 'timeago.js'
 import { Post } from '~/graphql/types.generated'
 import Link from 'next/link'
 import { A, Small, LineClamp } from '~/components/Typography'
-import Grid from '~/components/Grid'
+import Flex from '~/components/Flex'
 
 interface Props {
   posts: Post[]
@@ -12,9 +12,9 @@ interface Props {
 export default function OverthoughtList({ posts }: Props) {
   if (!posts || posts.length === 0) return null
   return (
-    <Grid gap={16}>
+    <Flex flexDirection="column" gap={16}>
       {posts.map((post) => (
-        <Grid gap={4} key={post.id}>
+        <Flex flexDirection="column" gap={4} key={post.id}>
           <Link
             href="/overthought/[slug]"
             as={`/overthought/${post.slug}`}
@@ -24,8 +24,8 @@ export default function OverthoughtList({ posts }: Props) {
           </Link>
           {post.excerpt && <LineClamp lines={2}>{post.excerpt}</LineClamp>}
           <Small>Updated {format(post.updated_at)}</Small>
-        </Grid>
+        </Flex>
       ))}
-    </Grid>
+    </Flex>
   )
 }
diff --git a/src/components/Overthought/Post/index.tsx b/src/components/Overthought/Post/index.tsx
index ea6a232a4..9bff9ddc6 100644
--- a/src/components/Overthought/Post/index.tsx
+++ b/src/components/Overthought/Post/index.tsx
@@ -1,28 +1,22 @@
 import * as React from 'react'
-import Link from 'next/link'
 import { Post } from '~/graphql/types.generated'
-import { ContentContainer, SectionHeading } from '~/components/Page'
-import { H3, A, Rarr, Small } from '~/components/Typography'
+import { ContentContainer } from '~/components/Page'
+import { H3, Small } from '~/components/Typography'
 import OverthoughtSubscribeBox from '~/components/Overthought/Subscribe'
 import SyntaxHighlighter from '~/components/SyntaxHighlighter'
 import SEO from './SEO'
-import List from '../List'
 import Feedback from '../Feedback'
 import { FeaturedImage } from './style'
-import Grid from '~/components/Grid'
 import GlobalPrismStyles from '~/components/GlobalStyles/prism'
 import GlobalMarkdownStyles from '~/components/GlobalStyles/markdown'
 import { format } from 'timeago.js'
+import Flex from '~/components/Flex'
 
 interface Props {
   post: Post
-  posts: Post[]
 }
 
-export default function PostView({ post, posts }: Props) {
-  const filtered =
-    posts && posts.length > 0 ? posts.filter((p) => p.slug !== post.slug) : []
-
+export default function PostView({ post }: Props) {
   return (
     <React.Fragment>
       <SyntaxHighlighter data={post} />
@@ -31,7 +25,7 @@ export default function PostView({ post, posts }: Props) {
       <SEO post={post} />
 
       <ContentContainer data-cy="overthought-post">
-        <Grid gap={32}>
+        <Flex flexDirection="column" gap={32}>
           {post.feature_image && (
             <FeaturedImage
               alt={post.title}
@@ -39,11 +33,11 @@ export default function PostView({ post, posts }: Props) {
               src={post.feature_image}
             />
           )}
-          <Grid gap={16}>
+          <Flex flexDirection="column" gap={16}>
             <H3>{post.title}</H3>
             <Small>Updated {format(post.updated_at)}</Small>
-          </Grid>
-        </Grid>
+          </Flex>
+        </Flex>
 
         <div
           style={{ marginTop: '16px' }}
@@ -51,21 +45,12 @@ export default function PostView({ post, posts }: Props) {
           dangerouslySetInnerHTML={{ __html: post.html }}
         />
 
-        <Grid gap={32}>
+        <Flex flexDirection="column" gap={32}>
           <div />
           <div />
           <Feedback post={post} />
           <OverthoughtSubscribeBox />
-          <Grid gap={24}>
-            <H3>More from Overthought</H3>
-            {filtered && <List posts={filtered} />}
-            <Link href="/overthought" as="/overthought" passHref>
-              <A>
-                See all posts <Rarr />
-              </A>
-            </Link>
-          </Grid>
-        </Grid>
+        </Flex>
       </ContentContainer>
     </React.Fragment>
   )
diff --git a/src/components/Overthought/Post/style.tsx b/src/components/Overthought/Post/style.tsx
index e42c37fb1..54fd0cdcd 100644
--- a/src/components/Overthought/Post/style.tsx
+++ b/src/components/Overthought/Post/style.tsx
@@ -6,7 +6,6 @@ export const FeaturedImage = styled.img`
   margin-left: -24px;
   margin-right: -24px;
   border-radius: 8px;
-  margin-bottom: 32px;
 
   @media (max-width: 768px) {
     width: 100%;
diff --git a/src/components/PodcastEpisodesList/index.tsx b/src/components/PodcastEpisodesList/index.tsx
index e02b27b53..c89350997 100644
--- a/src/components/PodcastEpisodesList/index.tsx
+++ b/src/components/PodcastEpisodesList/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { A, LineClamp, Small } from '~/components/Typography'
 import { Episode } from '~/graphql/types.generated'
-import Grid from '../Grid'
 import { format } from 'timeago.js'
+import Flex from '../Flex'
 
 interface Props {
   episodes: Episode[]
@@ -10,9 +10,9 @@ interface Props {
 
 export default function PodcastEpisodesList({ episodes }: Props) {
   return (
-    <Grid gap={16}>
+    <Flex flexDirection="column" gap={16}>
       {episodes.map((ep) => (
-        <Grid gap={4} key={ep.id}>
+        <Flex flexDirection="column" gap={4} key={ep.id}>
           <A
             target="_blank"
             rel="noopener noreferrer"
@@ -22,8 +22,8 @@ export default function PodcastEpisodesList({ episodes }: Props) {
           </A>
           <LineClamp lines={2}>{ep.description}</LineClamp>
           <Small>Released {format(ep.published_at)}</Small>
-        </Grid>
+        </Flex>
       ))}
-    </Grid>
+    </Flex>
   )
 }
diff --git a/src/graphql/queries/posts.ts b/src/graphql/queries/posts.ts
index adef407ea..e1134d8e9 100644
--- a/src/graphql/queries/posts.ts
+++ b/src/graphql/queries/posts.ts
@@ -15,9 +15,6 @@ export const GET_POST = gql`
     post(slug: $slug) {
       ...PostInfo
     }
-    posts(first: $first) {
-      ...PostInfo
-    }
   }
   ${PostInfoFragment}
 `
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index b2f3f7cee..010f991bd 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -4,11 +4,13 @@ import Page from '~/components/Page'
 import { P, H5 } from '~/components/Typography'
 import theme from '~/components/Theme'
 import Picture from '~/components/Picture'
-import Grid from '~/components/Grid'
 import { withApollo } from '~/components/withApollo'
 import { initApolloClient } from '~/graphql/services/apollo'
 import { GET_AMA_QUESTIONS } from '~/graphql/queries/ama'
 import AMAQuestions from '~/components/AMAQuestions'
+import Flex from '~/components/Flex'
+import { CenteredColumn } from '~/components/Layouts'
+import GlobalMarkdownStyles from '~/components/GlobalStyles/markdown'
 
 const Container = styled.div`
   width: calc(100% + 32px);
@@ -44,8 +46,9 @@ const Container = styled.div`
 function About() {
   return (
     <Page withHeader>
-      <Grid columns={'fit-content(640px)'} style={{ justifyContent: 'center' }}>
-        <Grid gap={48}>
+      <GlobalMarkdownStyles />
+      <CenteredColumn>
+        <Flex flexDirection="column" gap={48}>
           <Container data-cy="about-page">
             <Picture
               srcset={['/static/img/about.webp', '/static/img/about.jpg']}
@@ -55,7 +58,7 @@ function About() {
               lazy={false}
             />
           </Container>
-          <Grid gap={16}>
+          <Flex flexDirection="column" gap={16}>
             <P>
               👋 I’m a product designer, podcaster, and writer, currently living
               in San Francisco. Let’s grab a coffee.
@@ -162,14 +165,14 @@ function About() {
                 </a>
               </em>
             </P>
-          </Grid>
-          <Grid gap={16}>
+          </Flex>
+          <Flex flexDirection="column" gap={16}>
             <H5>Ask Me Anything</H5>
             <P>Just for fun! Questions will be visible after I’ve answered.</P>
             <AMAQuestions />
-          </Grid>
-        </Grid>
-      </Grid>
+          </Flex>
+        </Flex>
+      </CenteredColumn>
     </Page>
   )
 }
diff --git a/src/pages/ama.tsx b/src/pages/ama.tsx
index d21f957a3..47cac49af 100644
--- a/src/pages/ama.tsx
+++ b/src/pages/ama.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import Page from '~/components/Page'
 import { P, H3 } from '~/components/Typography'
-import Grid from '~/components/Grid'
 import { withApollo } from '~/components/withApollo'
 import { initApolloClient } from '~/graphql/services/apollo'
 import { GET_AMA_QUESTIONS } from '~/graphql/queries/ama'
@@ -9,10 +8,13 @@ import AMAQuestions from '~/components/AMAQuestions'
 import { CenteredColumn } from '~/components/Layouts'
 import { NextSeo } from 'next-seo'
 import { AmaStatus } from '~/graphql/types.generated'
+import GlobalMarkdownStyles from '~/components/GlobalStyles/markdown'
+import Flex from '~/components/Flex'
 
 function About() {
   return (
     <Page withHeader>
+      <GlobalMarkdownStyles />
       <NextSeo
         title={'Ask Me Anything'}
         description={'Answering questions, just for fun.'}
@@ -29,11 +31,11 @@ function About() {
         }}
       />
       <CenteredColumn>
-        <Grid gap={16}>
+        <Flex flexDirection="column" gap={16}>
           <H3>Ask Me Anything</H3>
           <P>Just for fun! Questions will be visible after I’ve answered.</P>
           <AMAQuestions />
-        </Grid>
+        </Flex>
       </CenteredColumn>
     </Page>
   )
diff --git a/src/pages/bookmarks.tsx b/src/pages/bookmarks.tsx
index f7003c5ea..bd6220b52 100644
--- a/src/pages/bookmarks.tsx
+++ b/src/pages/bookmarks.tsx
@@ -8,8 +8,8 @@ import { useAuth } from '~/hooks/useAuth'
 import AddBookmark from '~/components/Bookmarks/AddBookmark'
 import { initApolloClient } from '~/graphql/services/apollo'
 import { withApollo } from '~/components/withApollo'
-import Grid from '~/components/Grid'
 import { CenteredColumn } from '~/components/Layouts'
+import Flex from '~/components/Flex'
 
 function Bookmarks() {
   const { isMe } = useAuth()
@@ -32,11 +32,11 @@ function Bookmarks() {
         }}
       />
       <CenteredColumn data-cy="bookmarks">
-        <Grid gap={32}>
+        <Flex flexDirection="column" gap={32}>
           <H3>Bookmarks</H3>
           {isMe && <AddBookmark />}
           <BookmarksList />
-        </Grid>
+        </Flex>
       </CenteredColumn>
     </Page>
   )
diff --git a/src/pages/design-details/index.tsx b/src/pages/design-details/index.tsx
index 627733318..f8fb4f467 100644
--- a/src/pages/design-details/index.tsx
+++ b/src/pages/design-details/index.tsx
@@ -3,8 +3,9 @@ import { NextSeo } from 'next-seo'
 import Page from '~/components/Page'
 import { H3, Subheading } from '~/components/Typography'
 import DesignDetailsGrid from '~/components/DesignDetailsGrid'
-import Grid from '~/components/Grid'
 import { summaries } from '~/data/appDissections'
+import { CenteredColumn } from '~/components/Layouts'
+import Flex from '~/components/Flex'
 
 export default function DesignDetails() {
   return (
@@ -26,23 +27,21 @@ export default function DesignDetails() {
         }}
       />
 
-      <Grid
-        columns={'fit-content(640px)'}
-        style={{ justifyContent: 'center' }}
-        gap={32}
-      >
-        <Grid gap={24}>
-          <H3>App Dissection</H3>
-          <Subheading>
-            This collection of posts explores some of the best interaction
-            patterns, visual styles, and design decisions of well-known apps.
-            Each detail features a video and my commentary on the functionality
-            and effectiveness of the interface.
-          </Subheading>
-        </Grid>
+      <CenteredColumn>
+        <Flex flexDirection="column" gap={32}>
+          <Flex flexDirection="column" gap={24}>
+            <H3>App Dissection</H3>
+            <Subheading>
+              This collection of posts explores some of the best interaction
+              patterns, visual styles, and design decisions of well-known apps.
+              Each detail features a video and my commentary on the
+              functionality and effectiveness of the interface.
+            </Subheading>
+          </Flex>
 
-        <DesignDetailsGrid summaries={summaries} />
-      </Grid>
+          <DesignDetailsGrid summaries={summaries} />
+        </Flex>
+      </CenteredColumn>
     </Page>
   )
 }
diff --git a/src/pages/hn/about.tsx b/src/pages/hn/about.tsx
index d2cb00cd2..e11cea8af 100644
--- a/src/pages/hn/about.tsx
+++ b/src/pages/hn/about.tsx
@@ -2,11 +2,11 @@ import * as React from 'react'
 import Page from '~/components/Page'
 import { NextSeo } from 'next-seo'
 import { CenteredColumn } from '~/components/Layouts'
-import Grid from '~/components/Grid'
 import { H3, P, H5 } from '~/components/Typography'
 import Navigation from '~/components/HNPosts/Navigation'
 import GlobalMarkdownStyles from '~/components/GlobalStyles/markdown'
 import HNSubscribeBox from '~/components/HNSubscribe'
+import Flex from '~/components/Flex'
 
 export default function HNAbout() {
   return (
@@ -30,11 +30,11 @@ export default function HNAbout() {
       />
 
       <CenteredColumn data-cy="hn">
-        <Grid gap={32}>
+        <Flex flexDirection="column" gap={32}>
           <H3>Hacker News</H3>
           <Navigation active={'about'} />
 
-          <Grid className={'markdown'}>
+          <Flex flexDirection="column" className={'markdown'}>
             <P>
               <a href="https://news.ycombinator.com">Hacker News</a> is a
               fantastic way to stay up to date on technology and software news.
@@ -125,8 +125,8 @@ export default function HNAbout() {
               incrementally. But I don’t plan to add support for other content
               types like polls or jobs, which I never visit on HN anyways.
             </P>
-          </Grid>
-        </Grid>
+          </Flex>
+        </Flex>
         <HNSubscribeBox />
       </CenteredColumn>
     </Page>
diff --git a/src/pages/hn/best.tsx b/src/pages/hn/best.tsx
index 393c12a0a..f94dc04c6 100644
--- a/src/pages/hn/best.tsx
+++ b/src/pages/hn/best.tsx
@@ -3,12 +3,12 @@ import Page from '~/components/Page'
 import { NextSeo } from 'next-seo'
 import { CenteredColumn } from '~/components/Layouts'
 import HNPosts from '~/components/HNPosts'
-import Grid from '~/components/Grid'
 import { H3 } from '~/components/Typography'
 import Navigation from '~/components/HNPosts/Navigation'
 import { getHNPosts } from '~/graphql/services/hn'
 import { HNPost } from '.'
 import HNSubscribeBox from '~/components/HNSubscribe'
+import Flex from '~/components/Flex'
 
 interface Props {
   posts: HNPost[]
@@ -35,12 +35,12 @@ export default function HNBest(props: Props) {
       />
 
       <CenteredColumn data-cy="hn">
-        <Grid gap={32}>
+        <Flex flexDirection="column" gap={32}>
           <H3>Hacker News</H3>
           <Navigation active={'best'} />
           <HNPosts posts={posts} />
           <HNSubscribeBox />
-        </Grid>
+        </Flex>
       </CenteredColumn>
     </Page>
   )
diff --git a/src/pages/hn/index.tsx b/src/pages/hn/index.tsx
index e0f436f13..0dd2731a1 100644
--- a/src/pages/hn/index.tsx
+++ b/src/pages/hn/index.tsx
@@ -4,11 +4,11 @@ import { NextSeo } from 'next-seo'
 import { CenteredColumn } from '~/components/Layouts'
 import HNPosts from '~/components/HNPosts'
 import { HNComment } from '~/components/HNPost/Comment'
-import Grid from '~/components/Grid'
 import { H3 } from '~/components/Typography'
 import Navigation from '~/components/HNPosts/Navigation'
 import { getHNPosts } from '~/graphql/services/hn'
 import HNSubscribeBox from '~/components/HNSubscribe'
+import Flex from '~/components/Flex'
 
 export interface HNPost {
   id: string
@@ -48,12 +48,12 @@ export default function HNTop(props: Props) {
       />
 
       <CenteredColumn data-cy="hn">
-        <Grid gap={32}>
+        <Flex flexDirection="column" gap={32}>
           <H3>Hacker News</H3>
           <Navigation active={'top'} />
           <HNPosts posts={posts} />
           <HNSubscribeBox />
-        </Grid>
+        </Flex>
       </CenteredColumn>
     </Page>
   )
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1cfa19d5b..c9407a8ab 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -9,9 +9,10 @@ import FigmaPlugins from '~/components/FigmaPlugins'
 import { GET_HOME } from '~/graphql/queries'
 import { Post, Episode, Repo } from '~/graphql/types.generated'
 import { initApolloClient } from '~/graphql/services/apollo'
-import Grid from '~/components/Grid'
 import { summaries } from '~/data/appDissections'
 import { DesignDetailsPostSummary } from '~/data/appDissections'
+import { CenteredColumn } from '~/components/Layouts'
+import Flex from '~/components/Flex'
 
 interface Props {
   data: {
@@ -25,9 +26,9 @@ interface Props {
 function Home({ data, summaries }: Props) {
   return (
     <Page>
-      <Grid columns={'fit-content(640px)'} style={{ justifyContent: 'center' }}>
-        <Grid gap={56}>
-          <Grid gap={16}>
+      <CenteredColumn>
+        <Flex flexDirection="column" gap={56}>
+          <Flex flexDirection="column" gap={16}>
             <H2>👾</H2>
             <H5>Hey, I’m Brian.</H5>
             <P>
@@ -36,7 +37,7 @@ function Home({ data, summaries }: Props) {
               GitHub. Let’s grab a coffee.
             </P>
 
-            <Grid gap={4}>
+            <Flex flexDirection="column" gap={4}>
               <Link href="/about" as="/about" passHref>
                 <A>
                   More about me <Rarr />
@@ -49,10 +50,10 @@ function Home({ data, summaries }: Props) {
               >
                 @brian_lovin on Twitter <Rarr />
               </A>
-            </Grid>
-          </Grid>
+            </Flex>
+          </Flex>
 
-          <Grid gap={16}>
+          <Flex flexDirection="column" gap={16}>
             <H5>Writing</H5>
 
             <P>
@@ -62,7 +63,7 @@ function Home({ data, summaries }: Props) {
 
             {data && data.posts && <OverthoughtList posts={data.posts} />}
 
-            <Grid gap={4}>
+            <Flex flexDirection="column" gap={4}>
               <Link href="/overthought" as="/overthought" passHref>
                 <A>
                   See all posts <Rarr />
@@ -76,10 +77,10 @@ function Home({ data, summaries }: Props) {
               >
                 Subscribe via RSS <Rarr />
               </A>
-            </Grid>
-          </Grid>
+            </Flex>
+          </Flex>
 
-          <Grid gap={16}>
+          <Flex flexDirection="column" gap={16}>
             <H5>Design Details Podcast</H5>
             <P>
               Design Details is a weekly conversation about design process and
@@ -95,9 +96,9 @@ function Home({ data, summaries }: Props) {
             >
               See all episodes <Rarr />
             </A>
-          </Grid>
+          </Flex>
 
-          <Grid gap={16}>
+          <Flex flexDirection="column" gap={16}>
             <H5>Figma plugins</H5>
             <P>
               There’s a lot of work in the design process that is boring,
@@ -112,11 +113,11 @@ function Home({ data, summaries }: Props) {
             >
               See my Figma profile <Rarr />
             </A>
-          </Grid>
+          </Flex>
 
-          <Grid gap={16}>
+          <Flex flexDirection="column" gap={16}>
             <H5>Open source work</H5>
-            <Grid gap={4}>
+            <Flex flexDirection="column" gap={4}>
               <A
                 href="https://github.com/specfm/design-details"
                 target="_blank"
@@ -125,9 +126,9 @@ function Home({ data, summaries }: Props) {
                 specfm / design-details
               </A>
               <P>The code that powers designdetails.fm.</P>
-            </Grid>
+            </Flex>
 
-            <Grid gap={4}>
+            <Flex flexDirection="column" gap={4}>
               <A
                 href="https://github.com/brianlovin/brian-lovin-next"
                 target="_blank"
@@ -136,9 +137,9 @@ function Home({ data, summaries }: Props) {
                 brian-lovin-next
               </A>
               <P>The code that powers this website you’re looking at.</P>
-            </Grid>
+            </Flex>
 
-            <Grid gap={4}>
+            <Flex flexDirection="column" gap={4}>
               <A
                 href="https://github.com/brianlovin/security-checklist"
                 target="_blank"
@@ -147,9 +148,9 @@ function Home({ data, summaries }: Props) {
                 security-checklist
               </A>
               <P>A checklist for staying safe on the internet.</P>
-            </Grid>
+            </Flex>
 
-            <Grid gap={4}>
+            <Flex flexDirection="column" gap={4}>
               <A
                 href="https://github.com/withspectrum/spectrum"
                 target="_blank"
@@ -158,9 +159,9 @@ function Home({ data, summaries }: Props) {
                 withspectrum / spectrum
               </A>
               <P>Simple, powerful online communities.</P>
-            </Grid>
+            </Flex>
 
-            <Grid gap={4}>
+            <Flex flexDirection="column" gap={4}>
               <A
                 href="https://github.com/specfm/spec-next"
                 target="_blank"
@@ -171,7 +172,7 @@ function Home({ data, summaries }: Props) {
               <P>
                 A podcast network to help designers and developers level up.
               </P>
-            </Grid>
+            </Flex>
 
             <A
               href="https://github.com/brianlovin"
@@ -180,12 +181,12 @@ function Home({ data, summaries }: Props) {
             >
               Follow me on GitHub <Rarr />
             </A>
-          </Grid>
+          </Flex>
 
-          <Grid gap={16}>
+          <Flex flexDirection="column" gap={16}>
             <H5>Speaking and interviews</H5>
-            <Grid gap={16}>
-              <Grid Grid gap={4}>
+            <Flex flexDirection="column" gap={16}>
+              <Flex flexDirection="column" gap={4}>
                 <A
                   href="https://www.swiftbysundell.com/podcast/67/"
                   target="_blank"
@@ -197,9 +198,9 @@ function Home({ data, summaries }: Props) {
                   Ryan Nystrom and I talk about designing and building the
                   mobile apps at GitHub.
                 </P>
-              </Grid>
+              </Flex>
 
-              <Grid Grid gap={4}>
+              <Flex flexDirection="column" gap={4}>
                 <A
                   href="https://www.youtube.com/watch?v=SyS3h3kmBnY"
                   target="_blank"
@@ -211,9 +212,9 @@ function Home({ data, summaries }: Props) {
                   An exploration into the plugins I built to automate the
                   tedious parts of designing mobile apps at GitHub.
                 </P>
-              </Grid>
+              </Flex>
 
-              <Grid Grid gap={4}>
+              <Flex flexDirection="column" gap={4}>
                 <A
                   href="https://www.youtube.com/watch?v=6MBBTdu8v6E"
                   target="_blank"
@@ -225,9 +226,9 @@ function Home({ data, summaries }: Props) {
                   Exploring the possibilities that open up when designers and
                   developers can speak the same language.
                 </P>
-              </Grid>
+              </Flex>
 
-              <Grid Grid gap={4}>
+              <Flex flexDirection="column" gap={4}>
                 <A
                   href="https://interfacelovers.com/interviews/brian-lovin"
                   target="_blank"
@@ -239,9 +240,9 @@ function Home({ data, summaries }: Props) {
                   An interview about how I got into design, my process, and past
                   work.
                 </P>
-              </Grid>
+              </Flex>
 
-              <Grid Grid gap={4}>
+              <Flex flexDirection="column" gap={4}>
                 <A
                   href="https://spec.fm/podcasts/design-details/79352"
                   target="_blank"
@@ -252,12 +253,12 @@ function Home({ data, summaries }: Props) {
                 <P>
                   Bryn Jackson and I interviewed each other. Totally humble.
                 </P>
-              </Grid>
-            </Grid>
-          </Grid>
+              </Flex>
+            </Flex>
+          </Flex>
 
-          <Grid gap={24}>
-            <Grid gap={16}>
+          <Flex flexDirection="column" gap={24}>
+            <Flex flexDirection="column" gap={16}>
               <H5>App Dissection</H5>
               <P>
                 In-depth explorations of visual and interaction design in
@@ -268,11 +269,11 @@ function Home({ data, summaries }: Props) {
                   See all posts <Rarr />
                 </A>
               </Link>
-            </Grid>
+            </Flex>
             <DesignDetailsGrid summaries={summaries} />
-          </Grid>
-        </Grid>
-      </Grid>
+          </Flex>
+        </Flex>
+      </CenteredColumn>
     </Page>
   )
 }
diff --git a/src/pages/overthought/[slug].tsx b/src/pages/overthought/[slug].tsx
index bd7fa0111..b6c3fa8f4 100644
--- a/src/pages/overthought/[slug].tsx
+++ b/src/pages/overthought/[slug].tsx
@@ -10,19 +10,17 @@ interface Props {
   slug: string
   data: {
     post: Post
-    posts: Post[]
   }
 }
 
 function OverthoughtPost({ data }: Props) {
   const post = data?.post
-  const posts = data?.posts
 
   if (!post) return <NotFound />
 
   return (
     <Page withHeader>
-      <PostContainer post={post} posts={posts} />
+      <PostContainer post={post} />
     </Page>
   )
 }
@@ -54,7 +52,6 @@ export async function getStaticProps({ params: { slug } }) {
       slug,
       data: {
         post: data.post,
-        posts: data.posts,
       },
     },
   }
diff --git a/src/pages/overthought/index.tsx b/src/pages/overthought/index.tsx
index 4eba4ccea..4be733d10 100644
--- a/src/pages/overthought/index.tsx
+++ b/src/pages/overthought/index.tsx
@@ -7,7 +7,8 @@ import SEO from '~/components/Overthought/SEO'
 import OverthoughtList from '~/components/Overthought/List'
 import { GET_POSTS } from '~/graphql/queries'
 import { initApolloClient } from '~/graphql/services/apollo'
-import Grid from '~/components/Grid'
+import { CenteredColumn } from '~/components/Layouts'
+import Flex from '~/components/Flex'
 
 interface Props {
   data: {
@@ -20,23 +21,21 @@ function Overthought({ data }: Props) {
     <Page withHeader>
       <SEO />
 
-      <Grid
-        columns={'fit-content(640px)'}
-        gap={32}
-        style={{ justifyContent: 'center' }}
-      >
-        <Grid gap={16} data-cy="overthought">
-          <H3>Overthought</H3>
-          <LargeSubheading>
-            Overthinking out loud about design, development, and building
-            products.
-          </LargeSubheading>
-        </Grid>
+      <CenteredColumn>
+        <Flex flexDirection="column" gap={32}>
+          <Flex flexDirection="column" gap={16} data-cy="overthought">
+            <H3>Overthought</H3>
+            <LargeSubheading>
+              Overthinking out loud about design, development, and building
+              products.
+            </LargeSubheading>
+          </Flex>
 
-        {data && data.posts && <OverthoughtList posts={data.posts} />}
+          {data && data.posts && <OverthoughtList posts={data.posts} />}
 
-        <OverthoughtSubscribeBox />
-      </Grid>
+          <OverthoughtSubscribeBox />
+        </Flex>
+      </CenteredColumn>
     </Page>
   )
 }
diff --git a/yarn.lock b/yarn.lock
index 864930626..d3a8fd46f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1966,6 +1966,11 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
+"@mdx-js/react@^1.0.0":
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.4.tgz#5e867921a1f0cfcf4ee756630115f1565845b628"
+  integrity sha512-3SwDgbr2Fc3i5LrOQnahRUTvx0x/wRf+i8+fJM1caGTeq1XwVb6OHztJzaYt3DSizJVzRsBZznReY+l39up5Pg==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -2163,7 +2168,7 @@
   dependencies:
     "@styled-system/core" "^5.1.2"
 
-"@styled-system/should-forward-prop@^5.0.0":
+"@styled-system/should-forward-prop@^5.0.0", "@styled-system/should-forward-prop@^5.1.2":
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz#c392008c6ae14a6eb78bf1932733594f7f7e5c76"
   integrity sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q==
@@ -2214,6 +2219,61 @@
     dom-accessibility-api "^0.3.0"
     pretty-format "^25.1.0"
 
+"@theme-ui/color-modes@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.3.1.tgz#8c2b18fb170e6c998287b7381240a8b9cca8b0d1"
+  integrity sha512-WuZGgFW7M5wOWSse1PVZCEfM0OZip15/D6U3bB3B9KmWax7qiSnAm1yAMLRQKC+QYhndrjq3xU+WAQm11KnhIw==
+  dependencies:
+    "@emotion/core" "^10.0.0"
+    "@theme-ui/core" "^0.3.1"
+    "@theme-ui/css" "^0.3.1"
+    deepmerge "^4.2.2"
+
+"@theme-ui/components@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@theme-ui/components/-/components-0.3.1.tgz#fe023e156c1e1c076d5f2258466426e94adc2765"
+  integrity sha512-uG4dUM61s4tWv6N34uxs5VIh24bJyA/7TrYJ75WDiI+s72zbcNG7aGRpvX/hSZnAhxjdXpuskdEM3eEgOabdEg==
+  dependencies:
+    "@emotion/core" "^10.0.0"
+    "@emotion/styled" "^10.0.0"
+    "@styled-system/color" "^5.1.2"
+    "@styled-system/should-forward-prop" "^5.1.2"
+    "@styled-system/space" "^5.1.2"
+    "@theme-ui/css" "^0.3.1"
+
+"@theme-ui/core@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@theme-ui/core/-/core-0.3.1.tgz#dbe9800b9d6e923e1a7417e6adebce21524f8c02"
+  integrity sha512-cK6EVSOx0Kyx1Xpi4qb0JTLIxywx0DRh+53Ln1foXMplF2qKaDsFi3vD6duHIlT331E3CNOa9dftHHNM7y4rbA==
+  dependencies:
+    "@emotion/core" "^10.0.0"
+    "@theme-ui/css" "^0.3.1"
+    deepmerge "^4.2.2"
+
+"@theme-ui/css@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.3.1.tgz#b85c7e8fae948dc0de65aa30b853368993e25cb3"
+  integrity sha512-QB2/fZBpo4inaLHL3OrB8NOBgNfwnj8GtHzXWHb9iQSRjmtNX8zPXBe32jLT7qQP0+y8JxPT4YChZIkm5ZyIdg==
+
+"@theme-ui/mdx@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@theme-ui/mdx/-/mdx-0.3.0.tgz#8bb1342204acfaa69914d6b6567c5c49d9a8c1e6"
+  integrity sha512-/GHBNKqmUptWwkmF+zIASVQtjYs81XMEwtqPCHnHuaaCzhZxcXrtCwvcAgmCXF8hpRttCXVVxw1X3Gt0mhzaTQ==
+  dependencies:
+    "@emotion/core" "^10.0.0"
+    "@emotion/styled" "^10.0.0"
+    "@mdx-js/react" "^1.0.0"
+
+"@theme-ui/theme-provider@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@theme-ui/theme-provider/-/theme-provider-0.3.1.tgz#910bc43454fd61b1047d7bb0dce05e36ffb6b44b"
+  integrity sha512-Sjj6lD0gPxBi+hcGCkawcGZECeESV/mW2YfmPqjNgmc296x5tulfNc+0/N5CJwLVOmnkn8zR5KNWZ8BjndfeTg==
+  dependencies:
+    "@emotion/core" "^10.0.0"
+    "@theme-ui/color-modes" "^0.3.1"
+    "@theme-ui/core" "^0.3.1"
+    "@theme-ui/mdx" "^0.3.0"
+
 "@tootallnate/once@1":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.0.0.tgz#9c13c2574c92d4503b005feca8f2e16cc1611506"
@@ -4938,7 +4998,7 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
-deepmerge@4.2.2:
+deepmerge@4.2.2, deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
@@ -11592,6 +11652,18 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+theme-ui@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.3.1.tgz#b00ee2c03eb3d820536af8b121c64d13b3777cf0"
+  integrity sha512-My/TSALqp7Dst5Ez7nJA+94Q8zJhc26Z0qGo8kEWyoqHHJ5TU8xdhjLPBltTdQck3T32cSq5USIeSKU3JtxYUQ==
+  dependencies:
+    "@theme-ui/color-modes" "^0.3.1"
+    "@theme-ui/components" "^0.3.1"
+    "@theme-ui/core" "^0.3.1"
+    "@theme-ui/css" "^0.3.1"
+    "@theme-ui/mdx" "^0.3.0"
+    "@theme-ui/theme-provider" "^0.3.1"
+
 throttle-debounce@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.1.0.tgz#257e648f0a56bd9e54fe0f132c4ab8611df4e1d5"

From 6ab8f04428d54504fa49dc8e478e5d0d6b83c637 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 22 May 2020 15:44:04 -0700
Subject: [PATCH 2/2] Cleaner import

---
 src/components/AMAQuestions/AskQuestion.tsx          | 2 +-
 src/components/AMAQuestions/EditQuestion.tsx         | 2 +-
 src/components/AMAQuestions/PendingQuestions.tsx     | 2 +-
 src/components/AMAQuestions/QuestionItem.tsx         | 2 +-
 src/components/AMAQuestions/QuestionReaction.tsx     | 2 +-
 src/components/AMAQuestions/index.tsx                | 2 +-
 src/components/Bookmarks/AddBookmark.tsx             | 2 +-
 src/components/Bookmarks/BookmarkListItem.tsx        | 2 +-
 src/components/Bookmarks/EditingBookmarkListItem.tsx | 2 +-
 src/components/Bookmarks/index.tsx                   | 2 +-
 src/components/DesignDetailView/index.tsx            | 2 +-
 src/components/DesignDetailsGrid/index.tsx           | 2 +-
 src/components/FigmaPlugins/index.tsx                | 2 +-
 src/components/HNPost/index.tsx                      | 2 +-
 src/components/HNPosts/Navigation.tsx                | 2 +-
 src/components/HNPosts/PostListItem.tsx              | 2 +-
 src/components/HNPosts/index.tsx                     | 2 +-
 src/components/PodcastEpisodesList/index.tsx         | 2 +-
 18 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/AMAQuestions/AskQuestion.tsx b/src/components/AMAQuestions/AskQuestion.tsx
index 6d1b1d8c6..73f3794f3 100644
--- a/src/components/AMAQuestions/AskQuestion.tsx
+++ b/src/components/AMAQuestions/AskQuestion.tsx
@@ -3,7 +3,7 @@ import { useAddAmaQuestionMutation } from '~/graphql/types.generated'
 import { Small } from '~/components/Typography'
 import Textarea from '../Textarea'
 import { PrimaryButton } from '../Button'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 export default function AddBookmark() {
   const [question, setQuestion] = React.useState('')
diff --git a/src/components/AMAQuestions/EditQuestion.tsx b/src/components/AMAQuestions/EditQuestion.tsx
index 750af4512..34da4c231 100644
--- a/src/components/AMAQuestions/EditQuestion.tsx
+++ b/src/components/AMAQuestions/EditQuestion.tsx
@@ -8,7 +8,7 @@ import {
 import { Small } from '~/components/Typography'
 import { GET_AMA_QUESTIONS } from '~/graphql/queries'
 import Textarea from '~/components/Textarea'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 interface Props {
   question: Ama
diff --git a/src/components/AMAQuestions/PendingQuestions.tsx b/src/components/AMAQuestions/PendingQuestions.tsx
index 61e43e3f9..d7603f553 100644
--- a/src/components/AMAQuestions/PendingQuestions.tsx
+++ b/src/components/AMAQuestions/PendingQuestions.tsx
@@ -3,7 +3,7 @@ import Divider from '../Divider'
 import { QuestionItem } from './QuestionItem'
 import { useGetAmaQuestionsQuery, AmaStatus } from '~/graphql/types.generated'
 import LoadingSpinner from '../LoadingSpinner'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 export default function PendingQuestion() {
   const { data, loading } = useGetAmaQuestionsQuery({
diff --git a/src/components/AMAQuestions/QuestionItem.tsx b/src/components/AMAQuestions/QuestionItem.tsx
index 584f8c9e0..0eaa663e5 100644
--- a/src/components/AMAQuestions/QuestionItem.tsx
+++ b/src/components/AMAQuestions/QuestionItem.tsx
@@ -5,7 +5,7 @@ import { format } from 'timeago.js'
 import QuestionReaction from './QuestionReaction'
 import EditQuestion from './EditQuestion'
 import MarkdownRenderer from '../MarkdownRenderer'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 interface Props {
   editable: boolean
diff --git a/src/components/AMAQuestions/QuestionReaction.tsx b/src/components/AMAQuestions/QuestionReaction.tsx
index 276172489..300f511e7 100644
--- a/src/components/AMAQuestions/QuestionReaction.tsx
+++ b/src/components/AMAQuestions/QuestionReaction.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Ama, useAddAmaReactionMutation } from '~/graphql/types.generated'
 import { Small } from '~/components/Typography'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 interface Props {
   question: Ama
diff --git a/src/components/AMAQuestions/index.tsx b/src/components/AMAQuestions/index.tsx
index fff1dfe37..742cd189c 100644
--- a/src/components/AMAQuestions/index.tsx
+++ b/src/components/AMAQuestions/index.tsx
@@ -10,7 +10,7 @@ import { QuestionItem } from './QuestionItem'
 import AskQuestion from './AskQuestion'
 import PendingQuestions from './PendingQuestions'
 import FullscreenLoading from '../FullscreenLoading'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 export default function QuestionsList() {
   const { isMe } = useAuth()
diff --git a/src/components/Bookmarks/AddBookmark.tsx b/src/components/Bookmarks/AddBookmark.tsx
index 5040bdcf4..3ef00f79f 100644
--- a/src/components/Bookmarks/AddBookmark.tsx
+++ b/src/components/Bookmarks/AddBookmark.tsx
@@ -4,7 +4,7 @@ import { GET_BOOKMARKS } from '~/graphql/queries'
 import { Small } from '~/components/Typography'
 import Input from '~/components/Input'
 import Textarea from '../Textarea'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 export default function AddBookmark() {
   const [url, setUrl] = React.useState('')
diff --git a/src/components/Bookmarks/BookmarkListItem.tsx b/src/components/Bookmarks/BookmarkListItem.tsx
index aeadfba54..bf114c4a6 100644
--- a/src/components/Bookmarks/BookmarkListItem.tsx
+++ b/src/components/Bookmarks/BookmarkListItem.tsx
@@ -4,7 +4,7 @@ import { Small, A } from '~/components/Typography'
 import Linkify from '~/components/Linkify'
 import EditingBookmarkListItem from './EditingBookmarkListItem'
 import BookmarkReaction from './BookmarkReaction'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 interface Props {
   editable: boolean
diff --git a/src/components/Bookmarks/EditingBookmarkListItem.tsx b/src/components/Bookmarks/EditingBookmarkListItem.tsx
index 8b228de9b..b79c78202 100644
--- a/src/components/Bookmarks/EditingBookmarkListItem.tsx
+++ b/src/components/Bookmarks/EditingBookmarkListItem.tsx
@@ -8,7 +8,7 @@ import { Small } from '~/components/Typography'
 import { GET_BOOKMARKS } from '~/graphql/queries'
 import Input from '~/components/Input'
 import Textarea from '~/components/Textarea'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 interface Props {
   bookmark: Bookmark
diff --git a/src/components/Bookmarks/index.tsx b/src/components/Bookmarks/index.tsx
index 92a77ef64..d7dcd21d0 100644
--- a/src/components/Bookmarks/index.tsx
+++ b/src/components/Bookmarks/index.tsx
@@ -6,7 +6,7 @@ import { PAGINATION_AMOUNT } from '~/graphql/constants'
 import { Button } from '../Button'
 import LoadingSpinner from '../LoadingSpinner'
 import FullscreenLoading from '../FullscreenLoading'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 export default function BookmarksList() {
   const { isMe } = useAuth()
diff --git a/src/components/DesignDetailView/index.tsx b/src/components/DesignDetailView/index.tsx
index 2f6ec26d3..2ac2443dd 100644
--- a/src/components/DesignDetailView/index.tsx
+++ b/src/components/DesignDetailView/index.tsx
@@ -7,7 +7,7 @@ import Picture from '../Picture'
 import { format } from 'timeago.js'
 import { DesignDetailsPost } from '~/data/appDissections'
 import { CenteredColumn } from '../Layouts'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 interface Props {
   post: DesignDetailsPost
diff --git a/src/components/DesignDetailsGrid/index.tsx b/src/components/DesignDetailsGrid/index.tsx
index 57932555b..75dcf8541 100644
--- a/src/components/DesignDetailsGrid/index.tsx
+++ b/src/components/DesignDetailsGrid/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import DesignDetailsCard from '~/components/DesignDetailsCard'
 import { DesignDetailsPostSummary } from '~/data/appDissections'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 interface Props {
   summaries: DesignDetailsPostSummary[]
diff --git a/src/components/FigmaPlugins/index.tsx b/src/components/FigmaPlugins/index.tsx
index c8d89ac2a..3ce1dc7f2 100644
--- a/src/components/FigmaPlugins/index.tsx
+++ b/src/components/FigmaPlugins/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { A, P } from '~/components/Typography'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 export default function FigmaPlugins() {
   return (
diff --git a/src/components/HNPost/index.tsx b/src/components/HNPost/index.tsx
index bb403c129..fefaf3c56 100644
--- a/src/components/HNPost/index.tsx
+++ b/src/components/HNPost/index.tsx
@@ -8,7 +8,7 @@ import { CenteredColumn } from '../Layouts'
 import Byline from './Byline'
 import { HNPost as HNPostType } from '~/pages/hn'
 import HNSubscribeBox from '../HNSubscribe'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 interface Props {
   post: HNPostType
diff --git a/src/components/HNPosts/Navigation.tsx b/src/components/HNPosts/Navigation.tsx
index 1d8220ef8..97776409f 100644
--- a/src/components/HNPosts/Navigation.tsx
+++ b/src/components/HNPosts/Navigation.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import Link from 'next/link'
 import { StyledA } from './style'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 interface Props {
   active: string
diff --git a/src/components/HNPosts/PostListItem.tsx b/src/components/HNPosts/PostListItem.tsx
index f362bb388..2bba24843 100644
--- a/src/components/HNPosts/PostListItem.tsx
+++ b/src/components/HNPosts/PostListItem.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { A } from '~/components/Typography'
 import Byline from '../HNPost/Byline'
 import { HNPost } from '~/pages/hn'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 interface Props {
   post: HNPost
diff --git a/src/components/HNPosts/index.tsx b/src/components/HNPosts/index.tsx
index ea9853a5e..824067602 100644
--- a/src/components/HNPosts/index.tsx
+++ b/src/components/HNPosts/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { PostListItem } from './PostListItem'
 import { HNPost } from '~/pages/hn'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 interface Props {
   posts: HNPost[]
diff --git a/src/components/PodcastEpisodesList/index.tsx b/src/components/PodcastEpisodesList/index.tsx
index c89350997..7a5f40c5d 100644
--- a/src/components/PodcastEpisodesList/index.tsx
+++ b/src/components/PodcastEpisodesList/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { A, LineClamp, Small } from '~/components/Typography'
 import { Episode } from '~/graphql/types.generated'
 import { format } from 'timeago.js'
-import Flex from '../Flex'
+import Flex from '~/components/Flex'
 
 interface Props {
   episodes: Episode[]