crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed styles for community links

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-14 22:58:41 +02:00
committed by fabioberger
parent 786419fee0
commit 3c7e538202
2 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/website/ts/components/docs/community_link.tsx
View File

@@ -15,7 +15,7 @@ export interface ICommunityLinkProps {
export const CommunityLink: React.FC<ICommunityLinkProps> = props => ( export const CommunityLink: React.FC<ICommunityLinkProps> = props => (
<Wrapper href={props.url}> <Wrapper href={props.url}>
<Icon color={colors.brandLight} name={props.icon} size={100} margin={[0, 0, 24, 0]} /> <CommunityIcon color={colors.brandLight} name={props.icon} margin={[0, 0, 24, 0]} />
<Heading size="small" marginBottom="8px"> <Heading size="small" marginBottom="8px">
{props.heading} {props.heading}
</Heading> </Heading>
@@ -35,3 +35,10 @@ const Wrapper = styled.a`
justify-content: center; justify-content: center;
text-align: center; text-align: center;
`; `;
const CommunityIcon = styled(Icon)`
@media (min-width: 900px) {
height: 100px;
width: 100px;
}
`;

22
packages/website/ts/pages/docs/home.tsx
View File

@@ -68,24 +68,32 @@ const ShortcutsWrapper = styled.div`
} }
`; `;
const CommunityWrapper = styled.div`
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
`;
const GetStartedWrapper = styled.div` const GetStartedWrapper = styled.div`
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-column-gap: 70px; grid-column-gap: 70px;
grid-row-gap: 30px; grid-row-gap: 30px;
@media (max-width: 500px) {
grid-template-columns: 1fr;
}
`; `;
const GetStartedButton = styled(Button)` const GetStartedButton = styled(Button)`
margin-bottom: 12px; margin-bottom: 12px;
`; `;
const CommunityWrapper = styled.div`
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
`;
const Separator = styled.hr` const Separator = styled.hr`
border-width: 0 0 1px; border-width: 0 0 1px;
border-color: #e4e4e4; border-color: #e4e4e4;