mobile optimizin'

Author: tobyab

components/slack/arrows.js

@@ -17,7 +17,7 @@ export function LeftArrow() {
         placeItems: 'center',
         display: 'flex',
         mr: 2,
-        ml: [0, 'calc(50vw - 36rem)']
+        ml: [3, 3, 3, 'calc(50vw - 36rem)']
       }}
     >
       <Icon glyph="view-back" size={32} color="white" />

components/slack/catchall.js components/slack/join.js

@@ -11,12 +11,12 @@ export default function Join() {
         overflowX: 'hidden',
         height: ['', '30rem'],
         paddingTop: ['2rem', 0],
-        display: ['grid', 'flex']
+        display: ['grid', 'grid', 'flex']
       }}
     >
       <Box
         sx={{
-          width: ['100%', '50%'],
+          width: ['100%', '100%', '50%'],
           paddingX: '32px',
           display: 'flex',
           alignItems: 'center',
@@ -50,8 +50,8 @@ export default function Join() {
       <Image
         src="https://cloud-j0p07nviw-hack-club-bot.vercel.app/0image.png"
         sx={{
-          width: ['100%', '50%'],
-          height: ['100%', '30rem'],
+          width: ['100%', '100%', '50%'],
+          height: ['100%', '100%', '30rem'],
           objectFit: 'cover',
           position: 'relative',
           top: 0

components/slack/project.js

@@ -21,17 +21,17 @@ export default function Project({ title, description, color, img, itemId }) {
         transition: '700ms cubic-bezier(0.075, 0.02, 0.165, 1)',
         transformOrigin: 'center',
         mx: 16,
-        ml: [0, `${itemId === 0 && 'calc(50vw - 36rem)'}`]
+        ml: [3, 3, 3, `${itemId === 0 && 'calc(50vw - 36rem)'}`]
       }}
       itemId={itemId}
     >
       <Box
         sx={{
-          paddingX: '16px',
+          paddingX: '8px',
           display: 'flex',
           flexDirection: 'column',
           placeItems: 'center',
-          height: ['12.5rem', '20rem'],
+          height: ['full', '12.5rem', '20rem'],
           placeSelf: 'center',
           placeContent: 'end'
         }}
@@ -58,8 +58,8 @@ export default function Project({ title, description, color, img, itemId }) {
       <Image
         src={`/slack/${img}.png`}
         sx={{
-          visibility: ['hidden', 'visible'],
-          height: '100%',
+          visibility: ['visible'],
+          height: ['100%'],
           objectFit: 'cover'
         }}
       />

pages/slack.js

@@ -8,7 +8,7 @@ import 'react-horizontal-scrolling-menu/dist/styles.css'
 import { thousands } from '../lib/members'
 import projects from '../components/slack/projects'
 import Channels from '../components/slack/channels'
-import Join from '../components/slack/catchall'
+import Join from '../components/slack/join'
 import Footer from '../components/footer'
 import ForceTheme from '../components/force-theme'
 import Nav from '../components/nav'
@@ -99,7 +99,7 @@ const SlackPage = () => {
         </Box>
       </Box>
       <Container sx={{ py: [4, 5] }}>
-        <Box sx={{ gap: '2rem', display: ['grid', 'flex'] }}>
+        <Box sx={{ gap: '2rem', display: ['grid', 'grid', 'flex'] }}>
           <Quote
             text="I knew it's where I wanted to be"
             person="Shawn"