Merge pull request #523 from brianlovin/single-col

Refactor site to be more visually simple, add new content

Author: brianlovin

.gitignore

@@ -2,5 +2,7 @@ node_modules
 .next
 .DS_Store
 .env
+.env.build
 .vscode
-yarn-error.log
+yarn-error.log
+.now

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'
-    );
-  });
 });

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"
+    }
   }
 }

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>
   )

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 {

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>

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;