ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: responsive behavior for info cards (#5655)

Browse Source 
Responsive behavior for info cards

Decreases margin, font size, card height, and grid gap in mobile
This commit is contained in:
pp-hh-ii-ll 2022-12-12 11:40:09 -05:00 committed by GitHub
parent c2342a86d6
commit 45419c2739
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/About/Card.tsx
View File

@ -18,19 +18,23 @@ const StyledCard = styled.div<{ isDarkMode: boolean; backgroundImgSrc?: string }
justify-content: space-between; justify-content: space-between;
text-decoration: none; text-decoration: none;
color: ${({ theme }) => theme.textPrimary}; color: ${({ theme }) => theme.textPrimary};
padding: 40px; padding: 24px;
height: ${({ backgroundImgSrc }) => (backgroundImgSrc ? 360 : 200)}px; height: 200px;
border-radius: 24px; border-radius: 24px;
border: 1px solid ${({ theme, isDarkMode }) => (isDarkMode ? 'transparent' : theme.backgroundOutline)}; border: 1px solid ${({ theme, isDarkMode }) => (isDarkMode ? 'transparent' : theme.backgroundOutline)};
&:hover { &:hover {
border: 1px solid ${({ theme, isDarkMode }) => (isDarkMode ? theme.backgroundOutline : theme.textTertiary)}; border: 1px solid ${({ theme, isDarkMode }) => (isDarkMode ? theme.backgroundOutline : theme.textTertiary)};
} }
@media screen and (min-width: ${BREAKPOINTS.sm}px) {
height: ${({ backgroundImgSrc }) => (backgroundImgSrc ? 360 : 200)}px;
padding: 40px;
}
` `
const CardTitle = styled.div` const CardTitle = styled.div`
font-size: 28px; font-size: 20px;
line-height: 36px; line-height: 28px;
font-weight: 500; font-weight: 500;
@media screen and (min-width: ${BREAKPOINTS.md}px) { @media screen and (min-width: ${BREAKPOINTS.md}px) {
@ -45,12 +49,12 @@ const CardTitle = styled.div`
` `
const CardDescription = styled.div` const CardDescription = styled.div`
font-size: 20px; font-size: 14px;
line-height: 28px; line-height: 20px;
@media screen and (min-width: ${BREAKPOINTS.sm}px) { @media screen and (min-width: ${BREAKPOINTS.sm}px) {
font-size: 14px; font-size: 20px;
line-height: 20px; line-height: 28px;
} }
@media screen and (min-width: ${BREAKPOINTS.lg}px) { @media screen and (min-width: ${BREAKPOINTS.lg}px) {

3
src/pages/About/index.tsx
View File

@ -77,12 +77,13 @@ const Content = styled.div`
const CardGrid = styled.div` const CardGrid = styled.div`
display: grid; display: grid;
gap: 36px; gap: 12px;
width: 100%; width: 100%;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@media screen and (min-width: ${BREAKPOINTS.sm}px) { @media screen and (min-width: ${BREAKPOINTS.sm}px) {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 32px;
} }
` `