Improve project template on mobile

Author: sean0x42

content/projects/comet/index.mdx

@@ -25,7 +25,7 @@ alternative platform that emphasized privacy and security.
 
 <Columns>
 
-<Column></Column>
+<ColumnSpacer />
 <TwoColumns>
 
 ## My First Web App
@@ -84,7 +84,7 @@ later.
 
 <Columns>
 
-<Column></Column>
+<ColumnSpacer />
 
 <TwoColumns>
 

content/projects/koi/index.mdx

@@ -30,7 +30,9 @@ resources.
 ---
 
 <Columns>
-<Column></Column>
+
+<ColumnSpacer />
+
 <TwoColumns>
 
 ## Design Mode
@@ -53,7 +55,7 @@ solutions. We're solving two different problems in two different places.
 </Columns>
 
 <Columns>
-<Column></Column>
+<ColumnSpacer />
 <TwoColumns>
 
 ## Content Mode

content/projects/ncmg/index.mdx

@@ -52,7 +52,7 @@ and manage some generic site settings.
 
 <Columns>
 
-<Column></Column>
+<ColumnSpacer />
 
 <TwoColumns>
 

src/components/ContactForm.treat.ts

@@ -1,16 +1,22 @@
 /** @format */
 
-import { style, globalStyle } from 'treat'
+import { style } from 'treat'
 import { snap } from '../app/constants'
 
 export const form = style((theme) => ({
   // Box model
-  padding: '2rem',
+  padding: '1.5rem',
   maxWidth: 410,
 
   // Visuals
   background: theme.grey90,
   borderRadius: 4,
+
+  '@media': {
+    '(min-width: 650px)': {
+      padding: '2rem',
+    },
+  },
 }))
 
 export const field = style((theme) => ({

src/components/Project.treat.ts

@@ -13,11 +13,22 @@ export const project = style((theme) => ({
 }))
 
 globalStyle(`${project} hr`, (theme) => ({
-  margin: '8rem 0',
+  // Box model
+  margin: '4rem 0',
+  
+  // Typography
+  color: theme.grey70,
+
+  // Visuals
   border: 0,
   borderBottom: '4px solid',
   borderBottomColor: 'currentcolor',
-  color: theme.grey70,
+
+  '@media': {
+    '(min-width: 650px)': {
+      margin: '8rem 0',
+    },
+  },
 }))
 
 globalStyle(`${project} a`, (theme) => ({

src/components/Project.tsx

@@ -8,6 +8,7 @@ import { FluidImage } from '../app/types'
 import * as styleRefs from './Project.treat'
 
 import Column from './Project/Column'
+import ColumnSpacer from './Project/ColumnSpacer'
 import Columns from './Project/Columns'
 import Header from './Project/Header'
 import IncompleteWarning from './Project/IncompleteWarning'
@@ -23,6 +24,7 @@ interface ComponentMap {
 }
 
 const components: ComponentMap = {
+  ColumnSpacer,
   Column,
   Columns,
   IncompleteWarning,

src/components/Project/ColumnSpacer.treat.ts

@@ -0,0 +1,14 @@
+/** @format */
+
+import { style } from 'treat'
+
+export const spacer = style({
+  display: 'none',
+
+  '@media': {
+    '(min-width: 650px)': {
+      display: 'block',
+      gridColumn: 'span 1',
+    },
+  },
+})

src/components/Project/ColumnSpacer.tsx

@@ -0,0 +1,10 @@
+/** @format */
+
+import React from 'react'
+import * as styles from './ColumnSpacer.treat'
+
+function ColumnSpacer() {
+  return <div className={styles.spacer} />
+}
+
+export default ColumnSpacer

src/components/Project/Columns.treat.ts

@@ -4,9 +4,19 @@ import { style, globalStyle } from 'treat'
 
 export const columns = style({
   display: 'grid',
-  gridTemplateColumns: 'repeat(3, 1fr)',
+  gridTemplateColumns: '1fr',
   gridGap: '3rem',
   margin: '3rem 0',
+
+  '@media': {
+    '(min-width: 650px)': {
+      gridTemplateColumns: 'repeat(2, 1fr)',
+    },
+
+    '(min-width: 1000px)': {
+      gridTemplateColumns: 'repeat(3, 1fr)',
+    }
+  }
 })
 
 globalStyle(`${columns} > p`, {

src/components/Project/IncompleteWarning.treat.ts

@@ -4,21 +4,31 @@ import { style } from 'treat'
 
 export const wrapper = style((theme) => ({
   // Box model
-  display: 'grid',
-  gridTemplateColumns: '48px 1fr',
-  gridGap: '1.5rem',
+  display: 'block',
   alignItems: 'center',
   padding: '1.5rem 2rem',
   marginTop: '2rem',
 
   // Visuals
   background: theme.grey90,
   borderRadius: 3,
+
+  '@media': {
+    '(min-width: 650px)': {
+      // Box model
+      display: 'grid',
+      gridTemplateColumns: '48px 1fr',
+      gridGap: '1.5rem',
+    },
+  },
 }))
 
 export const icon = style((theme) => ({
   // Box model
   padding: '0.75rem',
+  width: 48,
+  height: 48,
+  marginBottom: '1rem',
 
   // Typography
   color: theme.primary,
@@ -27,6 +37,12 @@ export const icon = style((theme) => ({
   // Visuals
   background: theme.grey80,
   borderRadius: '50%',
+
+  '@media': {
+    '(min-width: 650px)': {
+      marginBottom: 0,
+    }
+  }
 }))
 
 export const iconInner = style({