Skip to content

Commit b7096f7

Browse files
teimurjanteimurjan
committed
Polish banner responsiveness
1 parent 1362b95 commit b7096f7

File tree

8 files changed

+155
-83
lines changed

8 files changed

+155
-83
lines changed

‎workspaces/landing/src/components/atoms/square/Square.tsx

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,14 @@ import { theme } from '@teimurjan/utils'
33
import { EmotionProps } from '../../../utils'
44

55
export interface Props extends EmotionProps {
6-
sizes: { [K in keyof typeof theme.screens]: string }
6+
size: string
77
color: keyof typeof theme.colors.geometry
88
}
99

10-
const getWidthCss = (sizes: Props['sizes']) =>
11-
Object.entries(sizes)
12-
.reverse()
13-
.reduce(
14-
(acc, [screenSize, width]) =>
15-
acc +
16-
`
17-
@media ${
18-
theme.screens[screenSize as keyof typeof theme.screens].mediaUpTo
19-
} {
20-
width: ${width};
21-
}
22-
`,
23-
`width: ${sizes.xlarge};`
24-
)
25-
26-
const Square = ({ className, sizes, color }: Props) => (
10+
const Square = ({ className, size, color }: Props) => (
2711
<div
2812
css={css`
29-
${getWidthCss(sizes)}
13+
width: ${size};
3014
3115
background: ${theme.colors.geometry[color]};
3216
border-radius: ${theme.border.radius.small};

‎workspaces/landing/src/components/atoms/typography/Title.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { EmotionProps } from '../../../utils'
55

66
export interface Props extends EmotionProps {
77
children: ReactNode
8-
variant: keyof typeof theme.typography.title
8+
variant: keyof typeof theme.typography.title.xlarge
99
color?: 'blue' | 'beige'
1010
transform?: 'uppercase' | 'lowercase'
1111
}
@@ -22,16 +22,21 @@ const Title = ({
2222
return (
2323
<Component
2424
css={css`
25-
font-size: ${theme.typography.title[variant].fontSize};
26-
line-height: ${theme.typography.title[variant].lineHeight};
25+
font-size: ${theme.typography.title.xlarge[variant].fontSize};
26+
line-height: ${theme.typography.title.xlarge[variant].lineHeight};
2727
font-weight: bold;
2828
color: ${theme.colors.typography[color]};
2929
text-transform: ${transform};
3030
margin: 0;
3131
32-
@media ${theme.screens.medium.mediaUpTo} {
33-
font-size: ${theme.typography.titleResponsive[variant].fontSize};
34-
line-height: ${theme.typography.titleResponsive[variant].lineHeight};
32+
@media ${theme.screens.small.mediaUpTo} {
33+
font-size: ${theme.typography.title.large[variant].fontSize};
34+
line-height: ${theme.typography.title.large[variant].lineHeight};
35+
}
36+
37+
@media ${theme.screens.large.mediaUpTo} {
38+
font-size: ${theme.typography.title.large[variant].fontSize};
39+
line-height: ${theme.typography.title.large[variant].lineHeight};
3540
}
3641
`}
3742
className={className}

‎workspaces/landing/src/components/molecules/banner/Banner.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,21 @@ const Banner = ({
3333
>
3434
<Flex.Item
3535
css={css`
36-
flex: 0.7;
36+
flex: 0.6;
3737
padding-bottom: ${theme.spacing.medium};
3838
padding-right: ${theme.spacing.medium};
3939
40+
@media ${theme.screens.small.mediaUpTo} {
41+
width: 100%;
42+
padding-bottom: 0;
43+
}
44+
4045
@media ${theme.screens.medium.mediaUpTo} {
46+
flex: 0.5;
47+
}
48+
49+
@media ${theme.screens.large.mediaUpTo} {
4150
flex: 0.6;
42-
padding-bottom: 0;
4351
}
4452
`}
4553
>
@@ -84,6 +92,10 @@ const Banner = ({
8492
}
8593
8694
@media ${theme.screens.medium.mediaUpTo} {
95+
flex: 0.5;
96+
}
97+
98+
@media ${theme.screens.large.mediaUpTo} {
8799
flex: 0.4;
88100
}
89101
`}

‎workspaces/landing/src/components/molecules/section/Section.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export interface Props {
1010
keyof typeof theme.spacing | undefined,
1111
keyof typeof theme.spacing | undefined
1212
]
13+
height?: number | string
1314
}
1415

1516
const Section = ({

‎workspaces/landing/src/components/molecules/timeline/Timeline.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@ const Timeline = ({ children, hideLine = false }: Props) => (
3434
position: absolute;
3535
border-right: 4px solid ${theme.colors.geometry.blueAlpha};
3636
height: 100%;
37-
left: calc(calc(${theme.typography.title.h5.fontSize} / 2) - 2px);
37+
left: calc(
38+
calc(${theme.typography.title.xlarge.h5.fontSize} / 2) - 2px
39+
);
3840
top: 0;
3941
transition: transform 500ms
4042
${theme.transition.timingFunction.easeInOutCubic};

‎workspaces/landing/src/components/organisms/experience-history/ExperienceHistory.tsx

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Fragment } from 'react'
22
import { graphql, useStaticQuery } from 'gatsby'
33
import { css } from '@emotion/react'
44
import { Swiper, SwiperSlide } from 'swiper/react'
5-
import SwiperCore, { Pagination } from 'swiper'
5+
import SwiperCore, { Pagination, Navigation } from 'swiper'
66
import { prettyRange, theme } from '@teimurjan/utils'
77
import { ExperienceHistoryQuery } from '@teimurjan/gql-types'
88
import Tooltip from 'rc-tooltip'
@@ -35,7 +35,7 @@ const query = graphql`
3535
}
3636
`
3737

38-
SwiperCore.use([Pagination])
38+
SwiperCore.use([Pagination, Navigation])
3939

4040
const handleSwiperBreakpointChange = (swiper: SwiperCore) =>
4141
swiper.el.setAttribute('data-breakpoint', swiper.currentBreakpoint)
@@ -59,6 +59,52 @@ const ExperienceHistory = () => {
5959
.swiper-pagination-bullet-active {
6060
background: ${theme.colors.geometry.blue};
6161
}
62+
63+
.swiper-button-prev {
64+
position: absolute;
65+
left: 1rem;
66+
bottom: 0;
67+
z-index: 20;
68+
/* TODO: polish controls */
69+
opacity: 0;
70+
transition: opacity 500ms
71+
${theme.transition.timingFunction.easeInOutCubic};
72+
cursor: pointer;
73+
74+
&:after {
75+
content: '⬅️';
76+
font-size: ${theme.typography.title.large.h2.fontSize};
77+
}
78+
79+
@media ${theme.screens.small.mediaUpTo} {
80+
font-size: ${theme.typography.title.large.h3.fontSize};
81+
}
82+
}
83+
84+
.swiper-button-next {
85+
position: absolute;
86+
right: 1rem;
87+
bottom: 0;
88+
z-index: 20;
89+
/* TODO: polish controls */
90+
opacity: 0;
91+
transition: opacity 500ms
92+
${theme.transition.timingFunction.easeInOutCubic};
93+
cursor: pointer;
94+
95+
&:after {
96+
content: '➡️';
97+
font-size: ${theme.typography.title.large.h2.fontSize};
98+
}
99+
100+
@media ${theme.screens.small.mediaUpTo} {
101+
font-size: ${theme.typography.title.large.h3.fontSize};
102+
}
103+
}
104+
105+
.swiper-button-disabled {
106+
opacity: 0;
107+
}
62108
`}
63109
>
64110
<Typography.Title
@@ -86,6 +132,7 @@ const ExperienceHistory = () => {
86132
},
87133
}}
88134
onBreakpoint={handleSwiperBreakpointChange}
135+
navigation
89136
>
90137
{experiences.map((experience) => {
91138
return (

‎workspaces/landing/src/components/organisms/index-banner/IndexBanner.tsx

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ const IndexBanner = () => {
3838

3939
return (
4040
<Banner
41+
css={css`
42+
height: 100%;
43+
`}
4144
title={fullName}
4245
subtitle={headline}
4346
description={about}
@@ -49,19 +52,20 @@ const IndexBanner = () => {
4952
image={
5053
<Fragment>
5154
<StaticImage
55+
css={css`
56+
img {
57+
max-height: 100%;
58+
width: auto;
59+
}
60+
`}
5261
src="../../../assets/images/me.png"
5362
alt="profile"
5463
placeholder="tracedSVG"
5564
tracedSVGOptions={{ color: '#05386b' }}
5665
layout="fullWidth"
5766
/>
5867
<Square
59-
sizes={{
60-
small: '90vw',
61-
medium: '40vw',
62-
large: '30vw',
63-
xlarge: '30vw',
64-
}}
68+
size="100%"
6569
color="blue"
6670
css={css`
6771
position: absolute;
@@ -74,17 +78,11 @@ const IndexBanner = () => {
7478
7579
@media ${theme.screens.small.mediaUpTo} {
7680
left: 30%;
77-
bottom: 15%;
7881
}
7982
`}
8083
/>
8184
<Square
82-
sizes={{
83-
small: '80vw',
84-
medium: '35vw',
85-
large: '20vw',
86-
xlarge: '15vw',
87-
}}
85+
size="50%"
8886
color="blueAlpha"
8987
css={css`
9088
position: absolute;
@@ -97,7 +95,6 @@ const IndexBanner = () => {
9795
9896
@media ${theme.screens.small.mediaUpTo} {
9997
left: -10%;
100-
bottom: 10%;
10198
}
10299
`}
103100
/>

‎workspaces/utils/src/theme.ts

Lines changed: 63 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -55,47 +55,71 @@ const theme = {
5555
},
5656
},
5757
title: {
58-
h5: {
59-
fontSize: '1.25rem',
60-
lineHeight: '1.75rem',
58+
xlarge: {
59+
h5: {
60+
fontSize: '1.25rem',
61+
lineHeight: '1.75rem',
62+
},
63+
h4: {
64+
fontSize: '1.5rem',
65+
lineHeight: '2rem',
66+
},
67+
h3: {
68+
fontSize: '2rem',
69+
lineHeight: '2.5rem',
70+
},
71+
h2: {
72+
fontSize: '4rem',
73+
lineHeight: '4.5rem',
74+
},
75+
h1: {
76+
fontSize: '6rem',
77+
lineHeight: '6.5rem',
78+
},
6179
},
62-
h4: {
63-
fontSize: '1.5rem',
64-
lineHeight: '2rem',
80+
large: {
81+
h5: {
82+
fontSize: '1rem',
83+
lineHeight: '1.5rem',
84+
},
85+
h4: {
86+
fontSize: '1.25rem',
87+
lineHeight: '1.75rem',
88+
},
89+
h3: {
90+
fontSize: '1.5rem',
91+
lineHeight: '2rem',
92+
},
93+
h2: {
94+
fontSize: '2.5rem',
95+
lineHeight: '3rem',
96+
},
97+
h1: {
98+
fontSize: '5rem',
99+
lineHeight: '4.5rem',
100+
},
65101
},
66-
h3: {
67-
fontSize: '2rem',
68-
lineHeight: '2.5rem',
69-
},
70-
h2: {
71-
fontSize: '4rem',
72-
lineHeight: '4.5rem',
73-
},
74-
h1: {
75-
fontSize: '6rem',
76-
lineHeight: '6.5rem',
77-
},
78-
},
79-
titleResponsive: {
80-
h5: {
81-
fontSize: '1rem',
82-
lineHeight: '1.5rem',
83-
},
84-
h4: {
85-
fontSize: '1.25rem',
86-
lineHeight: '1.75rem',
87-
},
88-
h3: {
89-
fontSize: '1.5rem',
90-
lineHeight: '2rem',
91-
},
92-
h2: {
93-
fontSize: '2.5rem',
94-
lineHeight: '3rem',
95-
},
96-
h1: {
97-
fontSize: '4rem',
98-
lineHeight: '4.5rem',
102+
small: {
103+
h5: {
104+
fontSize: '1rem',
105+
lineHeight: '1.25rem',
106+
},
107+
h4: {
108+
fontSize: '1.25rem',
109+
lineHeight: '1.5rem',
110+
},
111+
h3: {
112+
fontSize: '1.5rem',
113+
lineHeight: '1.75rem',
114+
},
115+
h2: {
116+
fontSize: '2rem',
117+
lineHeight: '2.25rem',
118+
},
119+
h1: {
120+
fontSize: '3rem',
121+
lineHeight: '3.25rem',
122+
},
99123
},
100124
},
101125
},

0 commit comments

Comments
 (0)