Mobile design tweaks

iterative · Dec 26, 2019 · d10481f · d10481f
1 parent 3e50505
commit d10481f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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`