fix: homepage card layout (#14725)

* initial commit

* ensure card lsize
This commit is contained in:
Phillip Kelley-Dotson 2021-05-20 19:43:12 -07:00 committed by GitHub
parent 173c486d4a
commit 29828f8552
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 14 deletions

View File

@ -301,15 +301,13 @@ export const mq = breakpoints.map(bp => `@media (max-width: ${bp}px)`);
export const CardContainer = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(31%, 31%));
${[mq[3]]} {
${mq[3]} {
grid-template-columns: repeat(auto-fit, minmax(31%, 31%));
}
${[mq[2]]} {
${mq[2]} {
grid-template-columns: repeat(auto-fit, minmax(48%, 48%));
}
${[mq[1]]} {
${mq[1]} {
grid-template-columns: repeat(auto-fit, minmax(50%, 80%));
}
grid-gap: ${({ theme }) => theme.gridUnit * 8}px;

View File

@ -74,15 +74,7 @@ const ActivityContainer = styled.div`
margin-top: ${({ theme }) => theme.gridUnit * -4}px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(31%, max-content));
${[mq[3]]} {
grid-template-columns: repeat(auto-fit, minmax(31%, max-content));
}
${[mq[2]]} {
grid-template-columns: repeat(auto-fit, minmax(42%, max-content));
}
${[mq[1]]} {
grid-template-columns: repeat(auto-fit, minmax(63%, max-content));
}
grid-gap: ${({ theme }) => theme.gridUnit * 8}px;
justify-content: left;
padding: ${({ theme }) => theme.gridUnit * 6}px;
@ -94,6 +86,15 @@ const ActivityContainer = styled.div`
.ant-card-meta-title {
font-weight: ${({ theme }) => theme.typography.weights.bold};
}
${mq[3]} {
grid-template-columns: repeat(auto-fit, minmax(31%, max-content));
}
${mq[2]} {
grid-template-columns: repeat(auto-fit, minmax(42%, max-content));
}
${mq[1]} {
grid-template-columns: repeat(auto-fit, minmax(80%, max-content));
}
`;
const UNTITLED = t('[Untitled]');