Fix GrayContainer styles

samajammin · samajammin · commit 63cd67d071ab · 2020-07-10T11:20:22.000-07:00
diff --git a/src/pages/what-is-ethereum.js b/src/pages/what-is-ethereum.js
@@ -92,26 +92,28 @@ const Header = styled.header`
   }
 `
 
-// TODO use theme variables
 const GrayContainer = styled.div`
-  margin-top: -14rem;
   padding: 4rem 2rem;
   background: ${(props) => props.theme.colors.grayBackground};
   box-shadow: inset 0px 1px 0px
     ${(props) => props.theme.colors.tableItemBoxShadow};
-  @media (max-width: 1280px) {
-    margin-top: -13rem;
+  margin-top: -14rem;
+  @media (max-width: ${(props) => props.theme.breakpoints.xl}) {
+    margin-top: -15rem;
   }
   @media (max-width: 1160px) {
-    margin-top: -11rem;
+    margin-top: -14rem;
   }
   @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    margin-top: -10rem;
+    margin-top: -12rem;
   }
   @media (max-width: 920px) {
-    margin-top: -10rem;
+    margin-top: -11rem;
   }
   @media (max-width: 870px) {
+    margin-top: -10rem;
+  }
+  @media (max-width: 810px) {
     margin-top: -9rem;
   }
   @media (max-width: ${(props) => props.theme.breakpoints.m}) {

Original file line number	Diff line number	Diff line change
@@ -92,26 +92,28 @@ const Header = styled.header`
`92`	`92`	`}`
`93`	`93`	`
`94`	`94`
`95`		`-// TODO use theme variables`
`96`	`95`	const GrayContainer = styled.div`
`97`		`- margin-top: -14rem;`
`98`	`96`	`padding: 4rem 2rem;`
`99`	`97`	`background: ${(props) => props.theme.colors.grayBackground};`
`100`	`98`	`box-shadow: inset 0px 1px 0px`
`101`	`99`	`${(props) => props.theme.colors.tableItemBoxShadow};`
`102`		`- @media (max-width: 1280px) {`
`103`		`- margin-top: -13rem;`
	`100`	`+ margin-top: -14rem;`
	`101`	`+ @media (max-width: ${(props) => props.theme.breakpoints.xl}) {`
	`102`	`+ margin-top: -15rem;`
`104`	`103`	`}`
`105`	`104`	`@media (max-width: 1160px) {`
`106`		`- margin-top: -11rem;`
	`105`	`+ margin-top: -14rem;`
`107`	`106`	`}`
`108`	`107`	`@media (max-width: ${(props) => props.theme.breakpoints.l}) {`
`109`		`- margin-top: -10rem;`
	`108`	`+ margin-top: -12rem;`
`110`	`109`	`}`
`111`	`110`	`@media (max-width: 920px) {`
`112`		`- margin-top: -10rem;`
	`111`	`+ margin-top: -11rem;`
`113`	`112`	`}`
`114`	`113`	`@media (max-width: 870px) {`
	`114`	`+ margin-top: -10rem;`
	`115`	`+ }`
	`116`	`+ @media (max-width: 810px) {`
`115`	`117`	`margin-top: -9rem;`
`116`	`118`	`}`
`117`	`119`	`@media (max-width: ${(props) => props.theme.breakpoints.m}) {`