From f4599443dc6688ef7574dba1527b5af258d48774 Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
Date: Tue, 28 Feb 2017 16:35:04 +0100
Subject: [PATCH] Added mobile version for new tab

Resolves #7411

Auditors: @cezaraugusto @bsclifton

Test Plan:
- open new tab
- resize window to 560x680
- there shouldn't be x scroll
---
 less/about/newtab.less | 62 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 51 insertions(+), 11 deletions(-)

diff --git a/less/about/newtab.less b/less/about/newtab.less
index a55b80b76d..e5abed2958 100644
--- a/less/about/newtab.less
+++ b/less/about/newtab.less
@@ -50,6 +50,7 @@ ul {
   background-size: cover;
   display: flex;
   flex: 1;
+
   > img {
     display: none;
   }
@@ -193,9 +194,10 @@ ul {
     }
 
     .topSitesGrid {
-      width: 510px;
+      max-width: 510px;
       display: inline-block;
       text-align: left;
+      width: 100%;
 
       .topSiteSquareSpace {
         margin-left: 5px;
@@ -267,16 +269,16 @@ ul {
           // to avoid backgrounds with the same color as icon
           // (as seen on issue #5868)
           &:before {
-              content: '';
-              position: absolute;
-              top: 0;
-              left: 0;
-              width: 100%;
-              height: 100%;
-              background-color: #fff;
-              opacity: 0.15;
-              z-index: 0;
-              border-radius: 4px;
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #fff;
+            opacity: 0.15;
+            z-index: 0;
+            border-radius: 4px;
           }
 
           .pinnedTopSite {
@@ -418,3 +420,41 @@ ul {
     }
   }
 }
+
+@media (max-width: 730px) {
+  .dynamicBackground {
+    min-height: 100%;
+    height: initial !important;
+  }
+
+  .content {
+    min-height: 100%;
+
+    main {
+      margin-bottom: 20px;
+    }
+
+    .statsBar {
+      flex-direction: column-reverse;
+      padding-top: 0;
+
+      .statsBlock {
+        margin: 0 0 15px;
+        width: 50%;
+        padding-right: 20px;
+      }
+
+      .clock {
+        display: flex;
+        flex: 1;
+        justify-content: center;
+        padding-bottom: 20px;
+      }
+    }
+
+    .topSitesContainer {
+      text-align: center;
+      padding-bottom: 20px;
+    }
+  }
+}