diff --git a/src/Community/Block/styles.js b/src/Community/Block/styles.js index 21ddf105c6..8a6639ede2 100644 --- a/src/Community/Block/styles.js +++ b/src/Community/Block/styles.js @@ -10,6 +10,11 @@ export const Content = styled.div` font-size: 16px; line-height: 24px; color: #838d93; + + ${media.tablet` + font-size: 20px; + line-height: 30px; + `} ` export const Header = styled.div` @@ -23,20 +28,18 @@ export const Header = styled.div` line-height: ${({ large }) => (large ? '54px' : '34px')}; color: #24292e; - ${media.tablet` - ${({ hasIcon }) => - !hasIcon && - ` - margin: 0; - border: none; - `} - font-size: 20px; - line-height: 30px; + ${media.phablet` + margin: 0; + border: none; `} ` export const Icon = styled.img` margin: 0 -2px 0 0; + + ${media.phablet` + display: none; + `} ` export const Wrapper = styled.div` @@ -49,4 +52,9 @@ export const Wrapper = styled.div` padding: 10px 20px 20px; border-radius: 5px; background: #eef4f8; + + ${media.phablet` + padding: 10px 10px 20px; + background: none; + `} ` diff --git a/src/Community/Section/styles.js b/src/Community/Section/styles.js index 86ebc22c74..e70a254c7a 100644 --- a/src/Community/Section/styles.js +++ b/src/Community/Section/styles.js @@ -29,7 +29,7 @@ export const Title = styled.div` line-height: 60px; ${media.tablet` - font-size: 30px; + font-size: 34px; line-height: 40px; `} ` @@ -50,7 +50,9 @@ export const Description = styled.div` color: #838d93; ${media.tablet` - margin: 10px 10px 30px; + margin: 10px 10px 15px; + font-size: 20px; + line-height: 30px; `}; ` diff --git a/src/Community/styles.js b/src/Community/styles.js index b0b418371f..6681d82b02 100644 --- a/src/Community/styles.js +++ b/src/Community/styles.js @@ -2,6 +2,7 @@ import styled from 'styled-components' import { media } from '../styles' export const Comments = styled.a` + box-sizing: border-box; display: inline-block; height: 20px; padding: 0 5px; @@ -10,6 +11,11 @@ export const Comments = styled.a` color: inherit; background-color: #d8dfe3; + ${media.tablet` + height: 30px; + background-color: #eef4f8; + `} + &:hover { opacity: 0.7; } @@ -35,7 +41,7 @@ export const Items = styled.div` align-items: stretch; padding-top: 30px; - ${media.phablet` + ${media.tablet` padding: 0; `} @@ -47,6 +53,10 @@ export const Items = styled.div` export const Line = styled.div` & + & { margin-top: 20px; + + ${media.tablet` + margin-top: 25px; + `} } ` @@ -58,13 +68,20 @@ export const Link = styled.a` overflow-wrap: break-word; color: ${({ color }) => color}; + ${media.tablet` + font-size: ${({ large }) => (large ? '24px' : '20px')}; + font-family: BrandonGrotesque; + line-height: ${({ large }) => (large ? '34px' : '30px')}; + `} + &:hover { opacity: 0.7; } ` export const Meta = styled.div` - line-height: 20px; + margin-top: 5px; + line-height: 30px; ` export const Placeholder = styled.div`