From ac2453d561312852d66d8eaa65a7d5fcf6982996 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 6 Mar 2020 18:47:36 -0800
Subject: [PATCH 1/2] Refactor site to be more visually simple, add new content

---
 .gitignore                                    |   4 +-
 now.json                                      |  36 ++--
 src/components/Bookmarks/index.tsx            |   4 -
 src/components/Bookmarks/style.tsx            |  18 +-
 src/components/DesignDetailView/index.tsx     |   2 +-
 src/components/DesignDetailsCard/style.tsx    |  23 +--
 src/components/DesignDetailsPlayer/index.tsx  |  98 ---------
 src/components/DesignDetailsPlayer/style.tsx  | 102 ----------
 src/components/FigmaPlugins/index.tsx         |  67 ++++---
 src/components/FigmaPlugins/style.tsx         |  31 ---
 src/components/GlobalStyles/index.tsx         |  19 +-
 src/components/GlobalStyles/markdown.tsx      |   8 -
 src/components/GlobalStyles/reset.tsx         |   6 -
 src/components/Overthought/Grid/index.tsx     |  23 ---
 src/components/Overthought/List/ListItem.tsx  |  26 ---
 src/components/Overthought/List/index.tsx     |  26 ++-
 src/components/Overthought/List/style.tsx     |  76 -------
 src/components/Overthought/Post/index.tsx     |  37 ++--
 .../Overthought/PreviewCard/index.tsx         |  18 +-
 .../Overthought/PreviewCard/style.tsx         |   3 -
 src/components/Page/style.tsx                 |  10 +-
 src/components/PodcastEpisodesList/index.tsx  |  55 +++++
 src/components/Theme/index.ts                 |   4 +-
 src/components/Typography/index.tsx           |  11 +-
 src/pages/about.tsx                           |   4 +-
 src/pages/api/bookmarks/get.ts                |   1 -
 src/pages/api/newsletter.ts                   |   1 -
 src/pages/bookmarks.tsx                       |   5 +-
 src/pages/design-details/index.tsx            |   4 +-
 src/pages/index.tsx                           | 189 +++++++++++++-----
 src/pages/overthought/index.tsx               |  11 +-
 31 files changed, 350 insertions(+), 572 deletions(-)
 delete mode 100644 src/components/DesignDetailsPlayer/index.tsx
 delete mode 100644 src/components/DesignDetailsPlayer/style.tsx
 delete mode 100644 src/components/FigmaPlugins/style.tsx
 delete mode 100644 src/components/Overthought/Grid/index.tsx
 delete mode 100644 src/components/Overthought/List/ListItem.tsx
 delete mode 100644 src/components/Overthought/List/style.tsx
 create mode 100644 src/components/PodcastEpisodesList/index.tsx

diff --git a/.gitignore b/.gitignore
index 29c76dde2..d466ab9e2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,5 +2,7 @@ node_modules
 .next
 .DS_Store
 .env
+.env.build
 .vscode
-yarn-error.log
\ No newline at end of file
+yarn-error.log
+.now
\ No newline at end of file
diff --git a/now.json b/now.json
index d9cc60a37..9fd431567 100644
--- a/now.json
+++ b/now.json
@@ -3,22 +3,24 @@
   "github": {
     "silent": true
   },
-  "env": {
-    "MAILCHIMP_API_KEY": "@mailchimp-api-key",
-    "MAILCHIMP_LIST_ID": "@mailchimp-list-id",
-    "TWILIO_ACCOUNT_SID": "@twilio-account-sid",
-    "TWILIO_AUTH_TOKEN": "@twilio-auth-token",
-    "TWILIO_PHONE_NUMBER": "@twilio-phone-number",
-    "MY_PHONE_NUMBER": "@my-phone-number",
-    "FIREBASE_TYPE": "@firebase-type",
-    "FIREBASE_PROJECT_ID": "@firebase-project-id",
-    "FIREBASE_PRIVATE_KEY_ID": "@firebase-private-key-id",
-    "FIREBASE_PRIVATE_KEY": "@firebase-private-key",
-    "FIREBASE_CLIENT_EMAIL": "@firebase-client-email",
-    "FIREBASE_CLIENT_ID": "@firebase-client-id",
-    "FIREBASE_AUTH_URI": "@firebase-auth-uri",
-    "FIREBASE_TOKEN_URI": "@firebase-token-uri",
-    "FIREBASE_AUTH_PROVIDER_X509_CERT_URL": "@firebase-auth-provider-x509-cert-url",
-    "FIREBASE_CLIENT_X509_CERT_URL": "@firebase-client-x509-cert-url"
+  "build": {
+    "env": {
+      "MAILCHIMP_API_KEY": "@mailchimp-api-key",
+      "MAILCHIMP_LIST_ID": "@mailchimp-list-id",
+      "TWILIO_ACCOUNT_SID": "@twilio-account-sid",
+      "TWILIO_AUTH_TOKEN": "@twilio-auth-token",
+      "TWILIO_PHONE_NUMBER": "@twilio-phone-number",
+      "MY_PHONE_NUMBER": "@my-phone-number",
+      "FIREBASE_TYPE": "@firebase-type",
+      "FIREBASE_PROJECT_ID": "@firebase-project-id",
+      "FIREBASE_PRIVATE_KEY_ID": "@firebase-private-key-id",
+      "FIREBASE_PRIVATE_KEY": "@firebase-private-key",
+      "FIREBASE_CLIENT_EMAIL": "@firebase-client-email",
+      "FIREBASE_CLIENT_ID": "@firebase-client-id",
+      "FIREBASE_AUTH_URI": "@firebase-auth-uri",
+      "FIREBASE_TOKEN_URI": "@firebase-token-uri",
+      "FIREBASE_AUTH_PROVIDER_X509_CERT_URL": "@firebase-auth-provider-x509-cert-url",
+      "FIREBASE_CLIENT_X509_CERT_URL": "@firebase-client-x509-cert-url"
+    }
   }
 }
\ No newline at end of file
diff --git a/src/components/Bookmarks/index.tsx b/src/components/Bookmarks/index.tsx
index 05f47bb47..872f34d68 100644
--- a/src/components/Bookmarks/index.tsx
+++ b/src/components/Bookmarks/index.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Bookmark } from '~/types'
-import { P } from '../Typography';
 import { ListItem, Grid, Url, Title } from './style'
 
 interface Props {
@@ -11,11 +10,8 @@ function BookmarkListItem({ bookmark }: { bookmark: Bookmark }) {
   return (
     <ListItem href={bookmark.url} target="_blank" rel="noopener noreferrer">
       <Title>
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" ><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
-
         {bookmark.title || bookmark.url}
       </Title>
-      {bookmark.description && <P>{bookmark.description.slice(0, 140)}...</P>}
       <Url>{bookmark.host || bookmark.url}</Url>
     </ListItem>
   )
diff --git a/src/components/Bookmarks/style.tsx b/src/components/Bookmarks/style.tsx
index 572278406..028bf107f 100644
--- a/src/components/Bookmarks/style.tsx
+++ b/src/components/Bookmarks/style.tsx
@@ -4,9 +4,10 @@ import { p } from '../Typography'
 
 export const Grid = styled.div`
   display: grid;
-  max-width: ${defaultTheme.breakpoints[3]};
-  margin-top: ${defaultTheme.space[7]};
-  grid-gap: ${defaultTheme.space[6]};
+  width: 100%;
+  max-width: ${defaultTheme.breakpoints[4]};
+  margin-top: ${defaultTheme.space[5]};
+  grid-gap: ${defaultTheme.space[3]};
   grid-template-columns: 1fr;
 
   @media (max-width: ${defaultTheme.breakpoints[4]}) {
@@ -17,23 +18,14 @@ export const Grid = styled.div`
 
 export const Title = styled.p`
   ${p};
-  font-size: 1.1rem;
   font-weight: 700;
   display: grid;
   align-items: center;
-  grid-gap: ${defaultTheme.space[3]};
-  grid-template-columns: 16px 1fr;
-
-  @media (max-width: ${defaultTheme.breakpoints[4]}) {
-    grid-template-columns: 1fr;
-
-    svg { display: none }
-  }
 `
 
 export const ListItem = styled.a`
   display: grid;
-  grid-gap: ${defaultTheme.space[2]};
+  grid-gap: ${defaultTheme.space[0]};
   grid-template-columns: 1fr;
 
   &:hover {
diff --git a/src/components/DesignDetailView/index.tsx b/src/components/DesignDetailView/index.tsx
index 493f2a5ec..b4896411c 100644
--- a/src/components/DesignDetailView/index.tsx
+++ b/src/components/DesignDetailView/index.tsx
@@ -49,7 +49,7 @@ export default function DesignDetailView(props: Props) {
           <LargeSubheading>A visual exploration of digital products</LargeSubheading>
           <Subheading style={{ marginTop: '24px' }}>
             <Link href="/design-details">
-              <A>View all posts <Rarr /></A>
+              <A>See all posts <Rarr /></A>
             </Link>
           </Subheading>
         </SectionHeading>
diff --git a/src/components/DesignDetailsCard/style.tsx b/src/components/DesignDetailsCard/style.tsx
index 8e8824c34..37c619a22 100644
--- a/src/components/DesignDetailsCard/style.tsx
+++ b/src/components/DesignDetailsCard/style.tsx
@@ -33,7 +33,7 @@ export const Container = styled.div`
   border-radius: 8px;
   transition: ${defaultTheme.animations.default};
   align-items: flex-start;
-  height: 400px;
+  height: 360px;
   overflow: hidden;
   z-index: 3;
 
@@ -101,26 +101,7 @@ export const VideoPlayer = styled.video`
   min-height: 600px;
   border-radius: 4px;
   clip-path: padding-box;
-
-  @media (min-width: 1440px) {
-    right: -48px;
-  }
-
-  @media (max-width: 1440px) {
-    right: -24%;
-  }
-
-  @media (max-width: 1256px) {
-    right: -18%;
-  }
-
-  @media (max-width: 1024px) {
-    right: -15%;
-  }
-
-  @media (max-width: 968px) {
-    right: -20px;
-  }
+  right: -3%;
 
   @media (max-width: 968px) {
     display: none;
diff --git a/src/components/DesignDetailsPlayer/index.tsx b/src/components/DesignDetailsPlayer/index.tsx
deleted file mode 100644
index 0205e78c5..000000000
--- a/src/components/DesignDetailsPlayer/index.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import VisibilitySensor from 'react-visibility-sensor';
-import useDarkMode from 'use-dark-mode'
-import { getDateObject } from '~/lib/getDateObject'
-import { podcast } from '~/data';
-import LoadingSpinner from '~/components/LoadingSpinner';
-import SubscriptionButtons from '~/components/SubscriptionButtons'
-import { H5, P, Rarr } from '~/components/Typography'
-import { OuterContainer, PlayerContainer, ContentContainer, EpisodeCard, CardContent, Date } from './style'
-import { PreviewContentGrid } from '../Page';
-
-interface Props {
-  showMoreEpisodes: boolean
-}
-
-export default function LatestEpisode({ showMoreEpisodes }: Props) {
-  const [episodes, setEpisodes] = React.useState(null)
-  const [loading, setLoading] = React.useState(false)
-  const { value } = useDarkMode(false, { storageKey: null, onChange: null })
-
-  async function fetchEpisode() {
-    setLoading(true)
-    return await fetch('https://spec.fm/api/podcasts/1034/episodes')
-      .then(res => {
-        return res.json();
-      })
-      .then(res => {
-        const episodes = res.filter(ep => !!ep.published);
-        setLoading(false)
-        setEpisodes(episodes)
-      })
-      .catch(() => {
-        setLoading(false)
-      });
-  }
-
-  if (!episodes || loading) {
-    return (
-      <VisibilitySensor partialVisibility onChange={(visible) => visible && fetchEpisode()}>
-        <OuterContainer>
-          <PlayerContainer data-cy="design-details-player">
-            <ContentContainer>
-              <LoadingSpinner />
-            </ContentContainer>
-          </PlayerContainer>
-          <SubscriptionButtons podcast={podcast} />
-        </OuterContainer>
-      </VisibilitySensor>
-    );
-  }
-
-  const [featured, ...allEpisodes] = episodes
-  const { sharing_url } = featured;
-  const [, id] = sharing_url.split('s/');
-
-  if (!id) return null;
-
-  return (
-    <OuterContainer>
-      <PlayerContainer data-cy="design-details-player">
-        <ContentContainer>
-          <iframe
-            frameBorder="0"
-            height="200px"
-            scrolling="no"
-            seamless
-            src={`https://embed.simplecast.com/${id}?color=${value ? '3d3d3d' : 'f5f5f5'}`}
-            width="100%"
-            data-cy="latest-episode"
-          />
-        </ContentContainer>
-      </PlayerContainer>
-
-      <SubscriptionButtons podcast={podcast} />
-
-      {showMoreEpisodes && (
-        <PreviewContentGrid>
-          {allEpisodes.slice(0, 4).map(ep => {
-            const { month, year, day } = getDateObject(ep.published_at);
-            const datestring = `${month} ${day}, ${year}`;
-            return (
-              <a target="_blank" rel="noopener noreferrer" key={ep.id} href={`https://spec.fm/podcasts/design-details/${ep.id}`}>
-                <EpisodeCard>
-                  <CardContent>
-                    <H5>{ep.title}</H5>
-                    <P>{ep.description.split('.')[0].substring(0, 200).trim() + '...'}</P>
-                    <Date>Listen <Rarr /></Date>
-                  </CardContent>
-                </EpisodeCard>
-              </a>
-            )
-          }
-          )}
-        </PreviewContentGrid>
-      )}
-    </OuterContainer>
-  );
-}
\ No newline at end of file
diff --git a/src/components/DesignDetailsPlayer/style.tsx b/src/components/DesignDetailsPlayer/style.tsx
deleted file mode 100644
index dd10a611a..000000000
--- a/src/components/DesignDetailsPlayer/style.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import styled from 'styled-components';
-import defaultTheme from '~/components/Theme';
-import { H6 } from '~/components/Typography'
-
-export const OuterContainer = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  position: relative;
-  max-width: ${defaultTheme.breakpoints[0]};
-
-  @media (max-width: ${defaultTheme.breakpoints[4]}) {
-    padding: 0;
-  }
-`
-
-export const PlayerContainer = styled.div`
-  background: ${props => props.theme.bg.secondary};
-  border-radius: 10px;
-  width: 100%;
-  padding: ${defaultTheme.space[4]};
-  display: flex;
-  margin-top: ${defaultTheme.space[5]};
-  align-items: center;
-
-  &:hover {
-    box-shadow: ${defaultTheme.shadows.largeHover};
-    transition: ${defaultTheme.animations.hover};
-  }
-
-  > a {
-    min-width: 114px;
-    min-height: 114px;
-    width: 114px;
-    height: 114px;
-  }
-
-  @media (max-width: ${defaultTheme.breakpoints[4]}) {
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    padding: ${defaultTheme.space[1]};
-
-    > a {
-      width: 100%;
-      height: 100%;
-    }
-  }
-`;
-
-export const ContentContainer = styled.div`
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  height: 200px;
-  align-items: center;
-
-  @media (max-width: 440px) {
-    margin-top: 8px;
-    margin-left: 8px;
-    padding-bottom: 8px;
-    width: calc(100% - 16px);
-    height: 208px;
-  }
-`;
-
-export const Date = styled(H6)`
-  color: ${props => props.theme.text.link};
-  margin-top: ${defaultTheme.space[5]};
-  font-weight: ${defaultTheme.fontWeights.link};
-`;
-
-export const Title = styled.span`
-  font-size: ${defaultTheme.fontSizes[4]};
-  color: ${props => props.theme.text.primary};
-  font-weight: ${defaultTheme.fontWeights.heading};
-`;
-
-export const EpisodeCard = styled.div`
-  background: ${props => props.theme.bg.secondary};
-  display: flex;
-  position: relative;
-  padding: 24px;
-  border-radius: 8px;
-  transition: ${defaultTheme.animations.default};
-  align-items: flex-start;
-  min-height: 300px;
-  height: 100%;
-  z-index: 3;
-  overflow: hidden;
-`
-
-export const CardContent = styled.div`
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: auto  3fr 1fr;
-  grid-gap: ${defaultTheme.space[3]};
-  height: 100%;
-  position: relative;
-  z-index: 2;
-`;
\ No newline at end of file
diff --git a/src/components/FigmaPlugins/index.tsx b/src/components/FigmaPlugins/index.tsx
index 6bdf03d88..91b9dedbf 100644
--- a/src/components/FigmaPlugins/index.tsx
+++ b/src/components/FigmaPlugins/index.tsx
@@ -1,42 +1,43 @@
 import * as React from 'react'
-import { ContentGrid } from '~/components/Page'
-import { H5, P, Rarr } from '~/components/Typography'
-import { Card, ReadingTime } from './style'
+import { Ul, Li } from '~/components/Typography'
 
 export default function FigmaPlugins() {
   return (
-    <ContentGrid defaultColumns={4}>
-      <a href="https://www.figma.com/c/plugin/744725347356614754/Dominant-Color-Toolkit-🎨" target="_blank" rel="noopener noreferrer">
-        <Card style={{ height: '100%' }}>
-          <H5 style={{ marginTop: 0 }}>Dominant Color Toolkit</H5>
-          <P>Generate a palette from an image to magically populate your designs.</P>
-          <ReadingTime>Install <Rarr /></ReadingTime>
-        </Card>
-      </a>
+    <Ul>
+      <Li>
+        <a href="https://www.figma.com/c/plugin/744725347356614754/Dominant-Color-Toolkit-🎨" target="_blank" rel="noopener noreferrer">
+            Dominant Color Toolkit
+        </a>
+        <div>Generate a palette from an image to magically populate your designs.</div>
+      </Li>
 
-      <a href="https://www.figma.com/c/plugin/743654854885744527/Responsify-⚡%EF%B8%8F" target="_blank" rel="noopener noreferrer">
-        <Card style={{ height: '100%' }}>
-          <H5 style={{ marginTop: 0 }}>Responsify</H5>
-          <P>Quickly test your designs across multiple device sizes.</P>
-          <ReadingTime>Install <Rarr /></ReadingTime>
-        </Card>
-      </a>
+      <Li>
+        <a href="https://www.figma.com/c/plugin/743654854885744527/Responsify-⚡%EF%B8%8F" target="_blank" rel="noopener noreferrer">
+            Responsify
+        </a>
+        <div>Quickly test your designs across multiple device sizes.</div>
+      </Li>
 
-      <a href="https://www.figma.com/c/plugin/747172434405306948/iOS-Export-Settings" target="_blank" rel="noopener noreferrer">
-        <Card style={{ height: '100%' }}>
-          <H5 style={{ marginTop: 0 }}>iOS Export Settings</H5>
-          <P>Applies the correct export settings for every required iOS App Icon size and density.</P>
-          <ReadingTime>Install <Rarr /></ReadingTime>
-        </Card>
-      </a>
+      <Li>
+        <a href="https://www.figma.com/c/plugin/747172434405306948/iOS-Export-Settings" target="_blank" rel="noopener noreferrer">
+            iOS Export Settings
+        </a>
+        <div>Applies the correct export settings for every required iOS App Icon size and density.</div>
+      </Li>
 
-      <a href="https://www.figma.com/c/plugin/747228167548695118/Export-.zip" target="_blank" rel="noopener noreferrer">
-        <Card style={{ height: '100%' }}>
-          <H5 style={{ marginTop: 0 }}>Export .zip</H5>
-          <P>Easily export assets from Figma directly into a .zip file.</P>
-          <ReadingTime>Install <Rarr /></ReadingTime>
-        </Card>
-      </a>
-    </ContentGrid>
+      <Li>
+        <a href="https://www.figma.com/c/plugin/747228167548695118/Export-.zip" target="_blank" rel="noopener noreferrer">
+            Export .zip
+        </a>
+        <div>Easily export assets from Figma directly into a .zip file.</div>
+      </Li>
+
+      <Li>
+        <a href="https://github.com/brianlovin/figma-github-data" target="_blank" rel="noopener noreferrer">
+            GitHub Data
+        </a>
+        <div>Populate data from GitHub into Figma mocks</div>
+      </Li>
+    </Ul>
   )
 }
\ No newline at end of file
diff --git a/src/components/FigmaPlugins/style.tsx b/src/components/FigmaPlugins/style.tsx
deleted file mode 100644
index d92a1712c..000000000
--- a/src/components/FigmaPlugins/style.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import styled from 'styled-components'
-import defaultTheme from '~/components/Theme'
-import { H6 } from '~/components/Typography'
-
-
-export const ReadingTime = styled(H6)`
-  color: ${props => props.theme.text.link};
-  margin-top: ${defaultTheme.space[5]};
-  font-weight: ${defaultTheme.fontWeights.link};
-`
-
-export const Card = styled.div`
-  padding: ${defaultTheme.space[4]};
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr auto;
-  position: relative;
-  border-radius: 8px;
-  background: ${props => props.theme.bg.secondary};
-  transition: box-shadow ${props => props.theme.animations.default};
-
-  &:hover {
-    ${ReadingTime} {
-      color: ${props => props.theme.text.link};
-    }
-  }
-
-  p {
-    margin-top: ${defaultTheme.space[2]};
-  }
-`
\ No newline at end of file
diff --git a/src/components/GlobalStyles/index.tsx b/src/components/GlobalStyles/index.tsx
index dd53bd581..a7ad84c95 100644
--- a/src/components/GlobalStyles/index.tsx
+++ b/src/components/GlobalStyles/index.tsx
@@ -1,9 +1,26 @@
+import React from 'react'
 import ResetStyles from './reset'
 import MarkdownStyles from './markdown'
 import PrismStyles from './prism'
 
+export const WithPrismStyles = ({ children }) => (
+  <React.Fragment>
+    <PrismStyles />
+    {children}
+  </React.Fragment>
+)
+
+export const WithMarkdownStyles = ({ children }) => (
+  <React.Fragment>
+    <MarkdownStyles />
+    {children}
+  </React.Fragment>
+)
+
 export default {
   ResetStyles,
   MarkdownStyles,
-  PrismStyles
+  PrismStyles,
+  WithMarkdownStyles,
+  WithPrismStyles
 }
\ No newline at end of file
diff --git a/src/components/GlobalStyles/markdown.tsx b/src/components/GlobalStyles/markdown.tsx
index 957f0868c..99af0be26 100644
--- a/src/components/GlobalStyles/markdown.tsx
+++ b/src/components/GlobalStyles/markdown.tsx
@@ -39,14 +39,6 @@ const GlobalMarkdownStyles = createGlobalStyle`
     ${p};
     margin-top: ${defaultTheme.space[3]};
 
-    a {
-      text-decoration: underline;
-    }
-
-    a:hover {
-      text-decoration: underline;
-    }
-
     img {
       ${img};
     }
diff --git a/src/components/GlobalStyles/reset.tsx b/src/components/GlobalStyles/reset.tsx
index d9ec4682d..b323aa9da 100644
--- a/src/components/GlobalStyles/reset.tsx
+++ b/src/components/GlobalStyles/reset.tsx
@@ -2,12 +2,6 @@ import { createGlobalStyle } from 'styled-components';
 import defaultTheme from '~/components/Theme';
 
 const ResetStyles = createGlobalStyle`
-  @import url('https://rsms.me/inter/inter.css');
-
-  @supports (font-variation-settings: normal) {
-    html { font-family: 'Inter var', sans-serif; }
-  }
-
   * {
     border: 0;
     box-sizing: inherit;
diff --git a/src/components/Overthought/Grid/index.tsx b/src/components/Overthought/Grid/index.tsx
deleted file mode 100644
index d8e83ef61..000000000
--- a/src/components/Overthought/Grid/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react'
-import OverthoughtPreviewCard from '~/components/Overthought/PreviewCard'
-import { ContentGrid, PreviewContentGrid } from '~/components/Page'
-import { BlogPost } from '~/types'
-
-interface Props {
-  truncate: boolean;
-  posts: Array<BlogPost>;
-}
-
-export default function OverthoughtGrid({ truncate, ...props }: Props) {
-  const posts = truncate ? props.posts.slice(0, 4) : props.posts
-  const Grid = truncate ? PreviewContentGrid : ContentGrid
-  return (
-    <Grid>
-      {
-        posts.map(post => (
-          <OverthoughtPreviewCard key={post.id} post={post} />
-        ))
-      }
-    </Grid>
-  )
-}
\ No newline at end of file
diff --git a/src/components/Overthought/List/ListItem.tsx b/src/components/Overthought/List/ListItem.tsx
deleted file mode 100644
index 7d5b56f84..000000000
--- a/src/components/Overthought/List/ListItem.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react'
-import Link from 'next/link'
-import { H4, P } from '~/components/Typography'
-import { Card, PreviewImage, Content } from './style'
-import { BlogPost } from '~/types';
-
-interface Props {
-  post: BlogPost
-}
-
-export default function OverthoughtListItem({ post }: Props) {
-
-  return (
-    <Link href="/overthought/[slug]" as={`/overthought/${post.slug}`}>
-      <a>
-        <Card>
-          {post.feature_image && <PreviewImage loading="lazy" src={post.feature_image} />}
-          <Content>
-            <H4 style={{ marginTop: 0 }}>{post.title}</H4>
-            <P>{post.custom_excerpt || post.excerpt}</P>
-          </Content>
-        </Card>
-      </a>
-    </Link>
-  )
-}
\ No newline at end of file
diff --git a/src/components/Overthought/List/index.tsx b/src/components/Overthought/List/index.tsx
index 2c80c2582..39f52c5fc 100644
--- a/src/components/Overthought/List/index.tsx
+++ b/src/components/Overthought/List/index.tsx
@@ -1,20 +1,34 @@
 import * as React from 'react'
 import { BlogPost } from '~/types'
-import OverthoughtPreviewListItem from './ListItem'
-import { ListGrid } from './style'
+import Link from 'next/link'
+import { Li, Ul, P } from '~/components/Typography'
 
 interface Props {
   posts: Array<BlogPost>;
+  truncated: Boolean;
 }
 
-export default function OverthoughtList({ posts }: Props) {
+export default function OverthoughtList({ posts, truncated }: Props) {
+  if (!posts || posts.length === 0) return null
+  
+  if (truncated) {
+    posts = posts.slice(0, 5)
+  }
+  
   return (
-    <ListGrid>
+    <Ul>
       {
         posts.map(post => (
-          <OverthoughtPreviewListItem key={post.id} post={post} />
+          <Li key={post.id}>
+            <Link href="/overthought/[slug]" as={`/overthought/${post.slug}`}>
+              <a>
+                {post.title}
+              </a>
+            </Link>
+            {post.excerpt && <div>{post.excerpt}</div>}
+          </Li>
         ))
       }
-    </ListGrid>
+    </Ul>
   )
 }
\ No newline at end of file
diff --git a/src/components/Overthought/List/style.tsx b/src/components/Overthought/List/style.tsx
deleted file mode 100644
index d78738fef..000000000
--- a/src/components/Overthought/List/style.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import styled from 'styled-components'
-import { hexa } from '~/components/utils'
-import defaultTheme from '~/components/Theme'
-import { H6 } from '~/components/Typography'
-
-export const ListGrid = styled.div`
-  display: grid;
-  width: calc(100% + 32px);
-  margin-left: -16px;
-  margin-right: -16px;
-  max-width: ${defaultTheme.breakpoints[3]};
-  margin-top: ${defaultTheme.space[3]};
-
-  @media (max-width: ${defaultTheme.breakpoints[4]}) {
-    margin-top: 0;
-  }
-`
-
-export const PreviewImage = styled.img`
-  border-radius: 8px;
-  user-select: none;
-  width: 100%;
-  transition: box-shadow ${defaultTheme.animations.active};
-`
-
-export const Card = styled.div`
-  display: grid;
-  grid-gap: ${defaultTheme.space[4]};
-  grid-template-columns: 2fr 3fr;
-  grid-template-rows: auto;
-  position: relative;
-  padding: 16px 0;
-
-  &:hover {
-    h4 {
-      color: ${props => props.theme.text.link};
-    }
-
-    ${PreviewImage} {
-      transition: box-shadow ${defaultTheme.animations.hover};
-      box-shadow: ${defaultTheme.shadows.largeHover};
-    }
-  }
-
-  @media (max-width: ${defaultTheme.breakpoints[2]}) {
-    padding: 16px;
-  }
-
-  @media (max-width: ${defaultTheme.breakpoints[4]}) {
-    grid-gap: ${defaultTheme.space[2]};
-    grid-template-columns: 1fr;
-    padding: 32px 16px;
-    border-bottom: 1px solid ${props => props.theme.border.default};
-  }
-
-  p {
-    margin-top: ${defaultTheme.space[2]};
-  }
-`
-
-export const Content = styled.div`
-  padding: ${defaultTheme.space[3]} 0;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: auto auto 1fr;
-  transition: box-shadow ${defaultTheme.animations.active};
-
-  @media (max-width: ${defaultTheme.breakpoints[3]}) {
-    padding-top: 0;
-  }
-
-  @media (max-width: ${defaultTheme.breakpoints[4]}) {
-    padding: ${defaultTheme.space[3]} ${defaultTheme.space[2]} 0;
-    grid-template-rows: auto;
-  }
-`
\ No newline at end of file
diff --git a/src/components/Overthought/Post/index.tsx b/src/components/Overthought/Post/index.tsx
index 13bca5e19..c9446fe1c 100644
--- a/src/components/Overthought/Post/index.tsx
+++ b/src/components/Overthought/Post/index.tsx
@@ -5,13 +5,12 @@ import useSWR from 'swr'
 import { getFeaturedPosts } from '~/data/ghost'
 import { BlogPost } from '~/types';
 import { ContentContainer, SectionHeading } from '~/components/Page';
-import { H2, H3, A, Rarr, Subheading, LargeSubheading } from '~/components/Typography'
+import { H3, P, A, Rarr, H5 } from '~/components/Typography'
 import OverthoughtSubscribeBox from '~/components/Overthought/Subscribe'
-import GlobalStyles from '~/components/GlobalStyles';
+import { WithPrismStyles, WithMarkdownStyles }from '~/components/GlobalStyles';
 import SyntaxHighlighter from '~/components/SyntaxHighlighter';
-import { getDateObject } from '~/lib/getDateObject'
 import SEO from './SEO'
-import Grid from '../Grid'
+import List from '../List'
 import Feedback from '../Feedback'
 import { FeaturedImage } from './style'
 
@@ -23,24 +22,23 @@ export default function Post({ post }) {
   // fetch posts for the bottom of the view to show recent posts from the blog
   const { data: posts } = useSWR('/api/getFeaturedPosts', getFeaturedPosts)
   const filtered = posts ? posts.filter(p => p.slug !== post.slug) : []
-  const { month, year, day } = getDateObject(post.published_at);
-  const datestring = `${month.slice(0, 3)} ${day}, ${year}`;
 
   return (
     <React.Fragment>
       <SyntaxHighlighter data={post} />
-      <GlobalStyles.PrismStyles />
-      <GlobalStyles.MarkdownStyles />
-
       <ContentContainer data-cy="overthought-post">
         <SEO post={post} />
         <SectionHeading style={{ marginTop: '32px' }}>
           {post.feature_image && <FeaturedImage loading="lazy" src={post.feature_image} />}
-          <H2 style={{ marginTop: 0 }}>{post.title}</H2>
+          <H3 style={{ marginTop: 0 }}>{post.title}</H3>
           <div style={{ padding: '4px 0' }} />
         </SectionHeading>
 
-        <div className="markdown" dangerouslySetInnerHTML={{ __html: post.html }} />
+        <WithMarkdownStyles>
+          <WithPrismStyles>
+            <div className="markdown" dangerouslySetInnerHTML={{ __html: post.html }} />
+          </WithPrismStyles>
+        </WithMarkdownStyles>
 
         <SectionHeading style={{ marginTop: '32px' }}>
           <Feedback post={post} />
@@ -48,17 +46,18 @@ export default function Post({ post }) {
         </SectionHeading>
 
         <SectionHeading style={{ marginTop: '32px' }}>
-          <H3>More from Overthought</H3>
-          <LargeSubheading>Overthinking out loud about design, development, and building products.</LargeSubheading>
-          <Subheading style={{ marginTop: '24px' }}>
-            <Link href="/overthought">
-              <A>View all posts <Rarr /></A>
-            </Link>
-          </Subheading>
+          <H5>More from Overthought</H5>
+          {filtered && <List truncated={true} posts={filtered} />}
         </SectionHeading>
+
+        <P>
+          <Link href="/overthought" as="/overthought">
+            <A>See all {posts && posts.length} posts <Rarr /></A>
+          </Link>
+        </P>
+        
       </ContentContainer>
 
-      {filtered && <Grid truncate={true} posts={filtered} />}
     </React.Fragment>
   )
 }
\ No newline at end of file
diff --git a/src/components/Overthought/PreviewCard/index.tsx b/src/components/Overthought/PreviewCard/index.tsx
index 111e7c50b..8472e7857 100644
--- a/src/components/Overthought/PreviewCard/index.tsx
+++ b/src/components/Overthought/PreviewCard/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import Link from 'next/link'
 import { getDateObject } from '~/lib/getDateObject'
-import { H5, P } from '~/components/Typography'
+import { H5, P, LargeSubheading } from '~/components/Typography'
 import { Card, PreviewImage } from './style'
 import { BlogPost } from '~/types';
 
@@ -11,14 +11,12 @@ interface Props {
 
 export default function OverthoughtPreviewCard({ post }: Props) {
   return (
-    <Link href="/overthought/[slug]" as={`/overthought/${post.slug}`}>
-      <a>
-        <Card style={{ height: '100%' }}>
-          {post.feature_image && <PreviewImage loading="lazy" src={post.feature_image} />}
-          <H5 style={{ marginTop: 0 }}>{post.title}</H5>
-          <P>{post.custom_excerpt || post.excerpt}</P>
-        </Card>
-      </a>
-    </Link >
+    <LargeSubheading style={{ marginTop: 0 }}>
+      <Link href="/overthought/[slug]" as={`/overthought/${post.slug}`}>
+        <a>
+          {post.title}
+        </a>
+      </Link >
+    </LargeSubheading>
   )
 }
\ No newline at end of file
diff --git a/src/components/Overthought/PreviewCard/style.tsx b/src/components/Overthought/PreviewCard/style.tsx
index 4d929ea70..eff827964 100644
--- a/src/components/Overthought/PreviewCard/style.tsx
+++ b/src/components/Overthought/PreviewCard/style.tsx
@@ -3,13 +3,10 @@ import defaultTheme from '~/components/Theme'
 import { H6 } from '~/components/Typography'
 
 export const Card = styled.div`
-  padding: ${defaultTheme.space[4]};
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto auto 1fr auto;
   position: relative;
-  border-radius: 8px;
-  background: ${props => props.theme.bg.secondary};
   transition: box-shadow ${props => props.theme.animations.default};
 
   p {
diff --git a/src/components/Page/style.tsx b/src/components/Page/style.tsx
index 83c372f7f..a7f56269a 100644
--- a/src/components/Page/style.tsx
+++ b/src/components/Page/style.tsx
@@ -12,16 +12,15 @@ export const PageContainer = styled.div`
 
 export const ContentContainer = styled.div`
   width: 100%;
-  max-width: 600px;
+  max-width: ${defaultTheme.breakpoints[4]};
 `
 
 export const ContentGrid = styled.div`
   display: grid;
-  grid-template-columns: repeat(${props => props.defaultColumns || 3}, 1fr);
+  grid-template-columns: 1fr;
   grid-gap: ${defaultTheme.space[3]};
-  grid-auto-rows: auto;
   width: 100%;
-  max-width: ${defaultTheme.breakpoints[0]};
+  max-width: ${defaultTheme.breakpoints[4]};
   margin-top: ${defaultTheme.space[5]};
 
   a {
@@ -54,7 +53,6 @@ export const PreviewContentGrid = styled(ContentGrid)`
   }
 
   @media (max-width: ${defaultTheme.breakpoints[1]}) {
-    grid-template-columns: repeat(2, 1fr);
     a:last-of-type {
       display: inline-block;
     }
@@ -93,7 +91,7 @@ export const SectionHeading = styled.div`
   align-items: flex-start;
   margin-top: ${defaultTheme.space[9]};
   width: 100%;
-  max-width: ${defaultTheme.breakpoints[3]};
+  max-width: ${defaultTheme.breakpoints[4]};
 
   @media (max-width: ${defaultTheme.breakpoints[4]}) {
     max-width: 100%;
diff --git a/src/components/PodcastEpisodesList/index.tsx b/src/components/PodcastEpisodesList/index.tsx
new file mode 100644
index 000000000..e904f2072
--- /dev/null
+++ b/src/components/PodcastEpisodesList/index.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Ul, Li, LineClamp, P } from '~/components/Typography'
+import LoadingSpinner from '../LoadingSpinner';
+import defaultTheme from '../Theme';
+
+export default function LatestEpisode() {
+  const [episodes, setEpisodes] = React.useState(null)
+  const [loading, setLoading] = React.useState(false)
+  
+  async function fetchEpisode() {
+    setLoading(true)
+    return await fetch('https://spec.fm/api/podcasts/1034/episodes')
+      .then(res => {
+        return res.json();
+      })
+      .then(res => {
+        const episodes = res.filter(ep => !!ep.published);
+        setLoading(false)
+        setEpisodes(episodes)
+      })
+      .catch(() => {
+        setLoading(false)
+      });
+  }
+
+  React.useEffect(() => {
+    fetchEpisode()
+  }, [])
+
+  if (!episodes || loading) {
+    return (
+      <div style={{ padding: `${defaultTheme.space[4]} 0`}}>
+        <LoadingSpinner />
+      </div>
+    )
+  }
+
+  return (
+    <Ul>
+      {episodes.slice(0, 4).map(ep => {
+          return (
+            <Li key={ep.id}>
+              <a target="_blank" rel="noopener noreferrer" href={`https://spec.fm/podcasts/design-details/${ep.id}`}>
+                {ep.title}
+              </a>
+              <LineClamp lines={2}>
+                {ep.description}
+              </LineClamp>
+            </Li>
+          )
+        }
+      )}
+    </Ul>
+  );
+}
\ No newline at end of file
diff --git a/src/components/Theme/index.ts b/src/components/Theme/index.ts
index 14d32cb1e..5c6a34d1e 100644
--- a/src/components/Theme/index.ts
+++ b/src/components/Theme/index.ts
@@ -37,7 +37,7 @@ const defaultTheme = {
     '2.75rem'  // 6
   ],
   fonts: {
-    body: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+    body: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
     monospace: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace',
   },
   fontWeights: {
@@ -57,7 +57,7 @@ const defaultTheme = {
     hover: '0 8px 24px rgba(0,0,0,0.10)',
     active: '0 6px 20px rgba(0,0,0,0.09)',
     button: '0 4px 12px rgba(0,0,0,0.08)',
-    largeHover: "0 1px 0.4px rgba(0, 0, 0, 0),0 1.7px 0.8px rgba(0, 0, 0, 0.001),0 2.3px 1.3px rgba(0, 0, 0, 0.002),0 2.8px 2px rgba(0, 0, 0, 0.004),0 3.3px 2.9px rgba(0, 0, 0, 0.007),0 4px 4.1px rgba(0, 0, 0, 0.012),0 4.9px 5.8px rgba(0, 0, 0, 0.018),0 6.3px 8.4px rgba(0, 0, 0, 0.029),0 8.8px 12.9px rgba(0, 0, 0, 0.05),0 15px 23px rgba(0, 0, 0, 0.11)"
+    largeHover: "0 4px 4.1px rgba(0, 0, 0, 0.012),0 4.9px 5.8px rgba(0, 0, 0, 0.018),0 6.3px 8.4px rgba(0, 0, 0, 0.029),0 8.8px 12.9px rgba(0, 0, 0, 0.05),0 15px 23px rgba(0, 0, 0, 0.11)"
   },
   animations: {
     default: '0.15s ease-out',
diff --git a/src/components/Typography/index.tsx b/src/components/Typography/index.tsx
index f23092c75..52e0cebf9 100644
--- a/src/components/Typography/index.tsx
+++ b/src/components/Typography/index.tsx
@@ -170,7 +170,7 @@ export const Blockquote = styled.blockquote`
 
 export const list = css`
   ${p};
-  margin: ${defaultTheme.space[4]};
+  margin: ${defaultTheme.space[3]};
   margin-left: ${defaultTheme.space[4]};
   margin-right: 0;
   font-weight: ${defaultTheme.fontWeights.body};
@@ -286,7 +286,7 @@ export const Subheading = styled(P)`
   }
 `;
 
-export const LargeSubheading = styled.h2`
+export const LargeSubheading = styled(P)`
   font-size: ${defaultTheme.fontSizes[2]};
   font-weight: ${defaultTheme.fontWeights.subheading};
   margin-top: ${defaultTheme.space[3]};
@@ -310,4 +310,11 @@ export const LargeSubheading = styled.h2`
 export const img = css`
   max-width: 100%;
   border-radius: 4px;
+`
+
+export const LineClamp = styled.span`
+  -webkit-line-clamp: ${props => props.lines || 1};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  display: -webkit-box;
 `
\ No newline at end of file
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 86ea71949..78a0d3603 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -30,8 +30,8 @@ export default function About() {
       </Container>
       <ContentContainer>
         <SectionHeading style={{ marginTop: '48px' }}>
-          <P>👋 I'm a product designer, podcaster, and writer, living in New York City.</P>
-          <P>I'm currently designing <a href="https://github.com/mobile" target="_blank" rel="noopener noreferrer">native mobile apps</a> at <a href="https://github.com/brianlovin" target="_blank" rel="noopener noreferrer">GitHub</a>. Before GitHub, I co-founded <a href="https://spectrum.chat" target="_blank" rel="noopener noreferrer">Spectrum</a>, a platform for large-scale communities to have better public conversations. Spectrum was acquired by GitHub in November, 2018.</P>
+          <P>👋 I'm a product designer, podcaster, and writer, currently living in San Francisco.</P>
+          <P>Right now I'm designing <a href="https://github.com/mobile" target="_blank" rel="noopener noreferrer">native mobile apps</a> at <a href="https://github.com/brianlovin" target="_blank" rel="noopener noreferrer">GitHub</a>. Before GitHub, I co-founded <a href="https://spectrum.chat" target="_blank" rel="noopener noreferrer">Spectrum</a>, a platform for large-scale communities to have better public conversations. Spectrum was acquired by GitHub in November, 2018.</P>
           <P>Before Spectrum I designed payments experiences at Facebook, working across Facebook, Messenger, WhatsApp, and Instagram. I originally cut my teeth as the first product designer at <a href="https://buffer.com" target="_blank" rel="noopener noreferrer">Buffer</a>.</P>
           <P>I also co-host the <a href="https://designdetails.fm" target="_blank" rel="noopener noreferrer">Design Details Podcast</a>, a weekly conversation about design process and culture. Design Details is part of <a href="https://spec.fm" target="_blank" rel="noopener noreferrer">Spec.fm</a>, a podcast network for designers and developers, which I co-founded in 2015.</P>
           <P>You can find me on <a href="https://twitter.com/brian_lovin" target="_blank" rel="noopener noreferrer">Twitter</a> where I talk about design and development, or on <a href="https://github.com/brianlovin" target="_blank" rel="noopener noreferrer">GitHub</a> where I'm building in the open, or on <a href="https://figma.com/@brian" target="_blank" rel="noopener noreferrer">Figma</a> where I'm exploring how plugins can automate the tedious parts of interface design.</P>
diff --git a/src/pages/api/bookmarks/get.ts b/src/pages/api/bookmarks/get.ts
index 6c282ab68..8cd3c3754 100644
--- a/src/pages/api/bookmarks/get.ts
+++ b/src/pages/api/bookmarks/get.ts
@@ -21,5 +21,4 @@ export default async (_, res) => {
   } catch (error) {
     return res.status(200).json({ data, error })
   }
-
 };
\ No newline at end of file
diff --git a/src/pages/api/newsletter.ts b/src/pages/api/newsletter.ts
index 46a7b67b8..36ce7f6e2 100644
--- a/src/pages/api/newsletter.ts
+++ b/src/pages/api/newsletter.ts
@@ -28,7 +28,6 @@ export default async (req, res) => {
     .then(res => res.json())
 
     if (response.status >= 400) {
-      console.log({ response })
       return res.status(400).json({ error: 'Hm, couldn’t add you to the newsletter - ping me directly at hi@brianlovin.com and I’ll add you to this list!' });
     }
 
diff --git a/src/pages/bookmarks.tsx b/src/pages/bookmarks.tsx
index 0f74eb924..360e9c672 100644
--- a/src/pages/bookmarks.tsx
+++ b/src/pages/bookmarks.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import useSWR from 'swr'
 import { getBookmarks } from '~/data/bookmarks'
 import Page, { SectionHeading } from '~/components/Page';
-import { H1, LargeSubheading } from '~/components/Typography'
+import { H4 } from '~/components/Typography'
 import { Bookmark } from '~/types'
 import cacheSsrRes from '~/lib/cacheSsr';
 import BookmarksList from '~/components/Bookmarks'
@@ -18,8 +18,7 @@ function Bookmarks(props: Props) {
   return (
     <Page withHeader>
       <SectionHeading data-cy="bookmarks">
-        <H1>Bookmarks</H1>
-        <LargeSubheading>Internet things, saved for later</LargeSubheading>
+        <H4>Bookmarks</H4>
       </SectionHeading>
 
       <BookmarksList bookmarks={bookmarks} />
diff --git a/src/pages/design-details/index.tsx b/src/pages/design-details/index.tsx
index d7640cf7a..e47b63156 100644
--- a/src/pages/design-details/index.tsx
+++ b/src/pages/design-details/index.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { NextSeo } from 'next-seo'
 import Page, { SectionHeading } from '~/components/Page';
-import { H1, LargeSubheading } from '~/components/Typography'
+import { H3, LargeSubheading } from '~/components/Typography'
 import DesignDetailsGrid from '~/components/DesignDetailsGrid';
 
 export default function DesignDetails() {
@@ -26,7 +26,7 @@ export default function DesignDetails() {
       />
 
       <SectionHeading>
-        <H1>App Dissection</H1>
+        <H3>App Dissection</H3>
         <LargeSubheading style={{ marginTop: '24px' }}>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.</LargeSubheading>
       </SectionHeading>
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d03dec0dc..7500cbca6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,14 +3,15 @@ import * as React from 'react';
 import Link from 'next/link';
 import useSWR from 'swr'
 import Page, { SectionHeading } from '~/components/Page';
-import { H1, H3, A, Rarr, Subheading, LargeSubheading } from '~/components/Typography'
-import OverthoughtGrid from '~/components/Overthought/Grid'
+import { H2, A, Rarr, P, H5, Ul, Li } from '~/components/Typography'
+import OverthoughtList from '~/components/Overthought/List'
 import DesignDetailsGrid from '~/components/DesignDetailsGrid';
-import DesignDetailsPlayer from '~/components/DesignDetailsPlayer';
+import PodcastEpisodesList from '~/components/PodcastEpisodesList';
 import FigmaPlugins from '~/components/FigmaPlugins';
 import { getFeaturedPosts } from '~/data/ghost'
 import { BlogPost } from '~/types'
 import cacheSsrRes from '~/lib/cacheSsr';
+import defaultTheme from '~/components/Theme';
 
 interface Props {
   posts?: Array<BlogPost>
@@ -19,66 +20,156 @@ interface Props {
 function Home(props: Props) {
   const initialData = props.posts
   const { data: posts } = useSWR('/api/getFeaturedPosts', getFeaturedPosts, { initialData })
+  
+  const greetings = ["👋", "🤔", "🤓", "🤙", "🙋‍♂️", "🐵", "🎙", "🎨", "⌨️", "🖱", "📝", "👨‍💻", "📱"]
+  const greeting = greetings[Math.floor(Math.random() * greetings.length)]
 
   return (
     <Page>
       <SectionHeading>
-        <H1>Brian Lovin</H1>
-        <LargeSubheading>I'm a product designer, podcaster, and writer, living in San Francisco. I'm currently building native mobile apps at GitHub.</LargeSubheading>
-        <Subheading><Link href="/about" as="/about"><a>More about me <Rarr /></a></Link></Subheading>
-      </SectionHeading>
+        <H2 style={{ marginBottom: defaultTheme.space[4] }}>{greeting}</H2>
+        
+        <P>I'm a product designer, podcaster, and writer, currently living in San Francisco. Right now I'm building native mobile apps at GitHub.</P>
+        
+        <P>
+          <Link href="/about" as="/about">
+            <A>More about me <Rarr /></A>
+          </Link>
+          <div>
+            <A href="https://twitter.com/brian_lovin" target="_blank" rel="noopener noreferrer">@brian_lovin on Twitter <Rarr /></A>
+          </div>
+        </P>
 
-      {posts && posts.length > 0 && (
-        <React.Fragment>
-          <SectionHeading data-cy="overthought">
-            <H3>Overthought</H3>
-            <LargeSubheading>Thinking out loud about design, development, and building products.</LargeSubheading>
-            <Subheading>
-              <Link href="/overthought" as="/overthought">
-                <a>View all posts <Rarr /></a>
-              </Link>
-            </Subheading>
-          </SectionHeading>
-
-          <OverthoughtGrid truncate={true} posts={posts} />
-        </React.Fragment>
-      )}
+        <H5 style={{ marginTop: defaultTheme.space[6], marginBottom: defaultTheme.space[2] }}>Writing</H5>
 
-      <SectionHeading>
-        <H3>Design Details Podcast</H3>
-        <LargeSubheading>
-          A weekly conversation about design process and culture.
-        </LargeSubheading>
-        <Subheading>
+        <P>I like to think out loud about design, development, and building products.</P>
+
+        <OverthoughtList truncated={true} posts={posts} />
+
+        <P>
+          <Link href="/overthought" as="/overthought">
+            <A>See all {posts && posts.length} posts <Rarr /></A>
+          </Link>
+          
+          <div>
+            <A href="https://overthought.ghost.io/rss/" target="_blank" rel="noopener noreferrer">Subscribe via RSS <Rarr /></A>
+          </div>
+        </P>
+
+
+        <H5 style={{ marginTop: defaultTheme.space[6], marginBottom: defaultTheme.space[2] }}>Design Details Podcast</H5>
+        <P>Design Details is a weekly conversation about design process and culture. I've been a co-host on the show for over five years.</P>
+        
+        <PodcastEpisodesList />
+
+        <P>
           <A href="https://designdetails.fm" target="_blank" rel="noopener noreferrer">See all episodes <Rarr /></A>
-        </Subheading>
-      </SectionHeading>
+        </P>
 
-      <DesignDetailsPlayer showMoreEpisodes />
+        <H5 style={{ marginTop: defaultTheme.space[6], marginBottom: defaultTheme.space[2] }}>Figma plugins</H5>
+        <P>
+          There's a lot of work in the design process that is boring, tedious, and repetitive. I like to make plugins to help automate it away.
+        </P>
 
-      <SectionHeading>
-        <H3>Figma Plugins</H3>
-        <LargeSubheading>
-          Plugins I'm using to make product design a tiny bit less tedious.
-        </LargeSubheading>
-        <Subheading>
-          <A href="https://figma.com/@brian" target="_blank" rel="noopener noreferrer">View on Figma <Rarr /></A>
-        </Subheading>
-      </SectionHeading>
+        <FigmaPlugins />
+        
+        <P>
+          <A href="https://figma.com/@brian" target="_blank" rel="noopener noreferrer">See my Figma profile <Rarr /></A>
+        </P>
 
-      <FigmaPlugins />
+        <H5 style={{ marginTop: defaultTheme.space[6] }}>Open source work</H5>
 
-      <SectionHeading>
-        <H3>App Dissection</H3>
-        <LargeSubheading>An in-depth exploration of visual and interaction design in well-known apps.</LargeSubheading>
-        <Subheading>
+        <Ul>
+          <Li>
+            <A href="https://github.com/specfm/design-details" target="_blank" rel="noopener noreferrer">
+              specfm / design-details
+            </A>
+            <div>The code that powers designdetails.fm.</div>
+          </Li>
+
+          <Li>
+            <A href="https://github.com/brianlovin/brian-lovin-next" target="_blank" rel="noopener noreferrer">
+              brian-lovin-next
+            </A>
+            <div>The code that powers this website you’re looking at.</div>
+          </Li>
+
+          <Li>
+            <A href="https://github.com/brianlovin/security-checklist" target="_blank" rel="noopener noreferrer">
+              security-checklist
+            </A>
+            <div>A checklist for staying safe on the internet.</div>
+          </Li>
+
+          <Li>
+            <A href="https://github.com/withspectrum/spectrum" target="_blank" rel="noopener noreferrer">
+              withspectrum / spectrum
+            </A>
+            <div>Simple, powerful online communities.</div>
+          </Li>
+
+          <Li>
+            <A href="https://github.com/specfm/spec-next" target="_blank" rel="noopener noreferrer">
+              specfm / spec-next
+            </A>
+            <div>A podcast network to help designers and developers level up.</div>
+          </Li>
+        </Ul>
+
+        <P>
+          <A href="https://github.com/brianlovin" target="_blank" rel="noopener noreferrer">Follow me on GitHub <Rarr /></A>
+        </P>
+
+        <H5 style={{ marginTop: defaultTheme.space[6] }}>Speaking and interviews</H5>
+
+        <Ul>
+          <Li>
+            <A href="https://www.swiftbysundell.com/podcast/67/" target="_blank" rel="noopener noreferrer">
+              Building for open source
+            </A>
+            <div>Ryan Nystrom and I talk about designing and building the mobile apps at GitHub.</div>
+          </Li>
+          
+          <Li>
+            <A href="https://www.youtube.com/watch?v=SyS3h3kmBnY" target="_blank" rel="noopener noreferrer">
+              Extend what's possible with Figma Plugins - Figma Config
+            </A>
+            <div>An exploration into the plugins I built to automate the tedious parts of designing mobile apps at GitHub.</div>
+          </Li>
+
+          <Li>
+            <A href="https://www.youtube.com/watch?v=6MBBTdu8v6E" target="_blank" rel="noopener noreferrer">
+              Designing with GraphQL - GraphQL Summit
+            </A>
+            <div>Exploring the possibilities that open up when designers and developers can speak the same language.</div>
+          </Li>
+
+          <Li>
+            <A href="https://interfacelovers.com/interviews/brian-lovin" target="_blank" rel="noopener noreferrer">
+              Interface Lovers Interview
+            </A>
+            <div>An interview about how I got into design, my process, and past work.</div>
+          </Li>
+
+          <Li>
+            <A href="hhttps://spec.fm/podcasts/design-details/79352" target="_blank" rel="noopener noreferrer">
+              Charmander++ – Interviewing ourselves on Design Details
+            </A>
+            <div>Bryn Jackson and I interviewed each other. Totally humble.</div>
+          </Li>
+        </Ul>
+
+        <H5 style={{ marginTop: defaultTheme.space[6], marginBottom: defaultTheme.space[2] }}>App Dissection</H5>
+        <P>In-depth explorations of visual and interaction design in well-known apps.</P>
+        
+        <P>
           <Link href="/design-details">
-            <a>View all posts <Rarr /></a>
+            <A>See all posts <Rarr /></A>
           </Link>
-        </Subheading>
-      </SectionHeading>
+        </P>
 
-      <DesignDetailsGrid truncate={true} />
+        <DesignDetailsGrid truncate={true} />
+      </SectionHeading>
     </Page>
   );
 }
diff --git a/src/pages/overthought/index.tsx b/src/pages/overthought/index.tsx
index c2416e216..24e08156e 100644
--- a/src/pages/overthought/index.tsx
+++ b/src/pages/overthought/index.tsx
@@ -2,12 +2,13 @@ import * as React from 'react';
 import useSWR from 'swr'
 import { getFeaturedPosts } from '~/data/ghost'
 import Page, { SectionHeading } from '~/components/Page';
-import { H1, LargeSubheading } from '~/components/Typography'
+import { H4, P } from '~/components/Typography'
 import { BlogPost } from '~/types'
 import OverthoughtSubscribeBox from '~/components/Overthought/Subscribe';
 import cacheSsrRes from '~/lib/cacheSsr';
 import SEO from '~/components/Overthought/SEO';
 import OverthoughtList from '~/components/Overthought/List';
+import defaultTheme from '~/components/Theme';
 
 interface Props {
   posts?: Array<BlogPost>
@@ -22,14 +23,14 @@ function Overthought(props: Props) {
       <SEO />
 
       <SectionHeading data-cy="overthought">
-        <H1>Overthought</H1>
-        <LargeSubheading>Overthinking out loud about design, development, and building products.</LargeSubheading>
+        <H4 style={{ marginBottom: defaultTheme.space[2] }}>Overthought</H4>
+        <P style={{ fontWeight: 500 }}>Overthinking out loud about design, development, and building products.</P>
 
+        <OverthoughtList truncated={false} posts={posts} />
+        
         <OverthoughtSubscribeBox />
 
       </SectionHeading>
-
-      <OverthoughtList posts={posts} />
     </Page>
   );
 }

From b504116b77603950cf92cbc430561d776a38a833 Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Fri, 6 Mar 2020 18:49:25 -0800
Subject: [PATCH 2/2] Fix tests

---
 cypress/integration/home_spec.ts | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/cypress/integration/home_spec.ts b/cypress/integration/home_spec.ts
index 20a1fb201..dd92a507b 100644
--- a/cypress/integration/home_spec.ts
+++ b/cypress/integration/home_spec.ts
@@ -19,14 +19,4 @@ describe('Home', () => {
       .scrollIntoView()
       .should('be.visible');
   });
-
-  it('should render podcast player', () => {
-    cy.get('[data-cy="design-details-player"]')
-      .scrollIntoView()
-      .should('be.visible');
-
-    cy.get(`[href="https://designdetails.fm"]`).should(
-      'be.visible'
-    );
-  });
 });