System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 23:22:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

mobile optimizin'

Browse source
This commit is contained in:
Toby Brown 2024-02-08 20:10:31 +00:00
parent 123c06b3cd
commit 76dfcd7058
4 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/slack/arrows.js
View file

@ -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" />

8
components/slack/catchall.js → components/slack/join.js
View file

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

10
components/slack/project.js
View file

@ -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'
}}
/>

4
pages/slack.js
View file

@ -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"