mobile explore page update, more align to the design now.

oveddan · Apr 27, 2020 · 0a647f7 · 0a647f7
1 parent f2fc210
commit 0a647f7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/components/Shared/BigHeader.tsx b/src/components/Shared/BigHeader.tsx
@@ -6,7 +6,16 @@ import { addMessageAction } from "util/homemadeRedux/actions";
 import { Subtract } from "utility-types";
 import Rolling20, { IRolling20Props } from "./Rolling20";
 
-export const HEADER_HEIGHT_IN_VH = 70;
+const getHeaderHeight = (windowWidth: number): number => {
+  switch (true) {
+    case windowWidth > 600:
+      return 70;
+    default:
+      return 40;
+  }
+};
+
+export const HEADER_HEIGHT_IN_VH = getHeaderHeight(window.innerWidth);
 const BG_SCROLL_SPEED = 0.066;
 const BG_ROWS = 2;
 

diff --git a/src/scss/styles.scss b/src/scss/styles.scss
@@ -115,9 +115,16 @@ a {
 
   h1 {
     margin-left: 10px;
-    font-size: 12em;
     line-height: 1em;
     font-weight: 700;
+
+    @include break(520px) {
+      font-size: 8em;
+    }
+
+    @include break(768px) {
+      font-size: 12em;
+    }
   }
 }