diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 5 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/about/jobs.tsx | 30 |
2 files changed, 28 insertions, 7 deletions
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index c29277c16..c333dc43a 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -5,6 +5,7 @@ import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities'; interface BaseTextInterface extends PaddingInterface { size?: 'default' | 'medium' | 'large' | 'small' | number; isCentered?: boolean; + textAlign?: string; } interface HeadingProps extends BaseTextInterface { @@ -23,6 +24,7 @@ interface ParagraphProps extends BaseTextInterface { isNoMargin?: boolean; marginBottom?: string; // maybe we should remove isNoMargin isMuted?: boolean | number; + fontWeight?: string | number; } const StyledHeading = styled.h1<HeadingProps>` @@ -67,11 +69,12 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => { // for literally anything = export const Paragraph = styled.p<ParagraphProps>` font-size: ${props => `var(--${props.size || 'default'}Paragraph)`}; + font-weight: ${props => props.fontWeight || 300}; margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')}; padding: ${props => props.padding && getCSSPadding(props.padding)}; color: ${props => props.color || props.theme.paragraphColor}; opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted}; - text-align: ${props => props.isCentered && 'center'}; + text-align: ${props => props.textAlign ? props.textAlign : props.isCentered && 'center'}; line-height: 1.4; `; diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/@next/pages/about/jobs.tsx index 3f4fa9f14..3ed05083e 100644 --- a/packages/website/ts/@next/pages/about/jobs.tsx +++ b/packages/website/ts/@next/pages/about/jobs.tsx @@ -99,23 +99,25 @@ export const NextAboutJobs = () => ( ); const Position = ({ position }) => ( - <FlexWrap> + <PositionWrap> <Column width="30%"> - <Heading size="small">{position.title}</Heading> + <Heading asElement="h3" size="small" fontWeight="400" marginBottom="0"><a href={position.href}>{position.title}</a></Heading> </Column> - <StyledColumn width="50%"> - <Paragraph isMuted={true}>{position.location}</Paragraph> + <StyledColumn width="50%" padding="0 40px 0 0"> + <Paragraph isMuted={true} marginBottom="0">{position.location}</Paragraph> </StyledColumn> <Column width="20%"> - <Paragraph><Link href={position.href}>Apply</Link></Paragraph> + <Paragraph marginBottom="0" textAlign="right"><Link href={position.href}>Apply</Link></Paragraph> </Column> - </FlexWrap> + </PositionWrap> ); const BenefitsList = styled.ul` color: #000; + font-weight: 300; + line-height: 1.444444444; list-style: disc; columns: auto 2; column-gap: 80px; @@ -137,3 +139,19 @@ const ImageWrap = styled.figure` const StyledColumn = styled(Column)` flex-shrink: 0; `; + +const PositionWrap = styled(FlexWrap)` + margin-bottom: 40px; + padding-bottom: 30px; + position: relative; + + &:after { + content: ''; + width: 100%; + position: absolute; + bottom: 0; + left: 0; + height: 1px; + background-color: #E3E3E3; + } +`; |