Simplify the newtab page.

Also, add some breakpoints to hide partial elements. Fixes #159.
bwinton · Aug 18, 2017 · 88721ec · 88721ec
1 parent 465b6c5
commit 88721ec
Showing 1 changed file with 42 additions and 29 deletions.
diff --git a/newtab-page/newtab.html b/newtab-page/newtab.html
@@ -7,42 +7,55 @@
   <link rel="stylesheet" type="text/css" media="all" href="chrome://browser/skin/newtab/newTab.css" />
   <style>
     #newtab-grid {
-      width: 930px;
-      max-width: 1551px;
-      height: 802px;
-      max-height: 802px;
+       max-width: 1470px;
+       max-height: 750px;
+    }
+
+    @media (max-width: 1180px) {
+      #newtab-grid { max-width: 890px; }
+    }
+    @media (max-width: 890px) {
+      #newtab-grid { max-width: 600px; }
+    }
+    @media (max-width: 600px) {
+      #newtab-grid { max-width: 310px; }
+    }
+
+    @media (max-height: 790px) {
+      #newtab-grid { max-height: 500px; }
+    }
+    @media (max-height: 540px) {
+      #newtab-grid { max-height: 250px; }
+    }
+
+    .newtab-cell {
+      margin: 20px 10px 20px;
     }
     .newtab-thumbnail.thumbnail {
       background-size: cover;
       background-position: center;
       background-image: none;
     }
+    body {
+      padding: 1em 0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
   </style>
 </head>
 
 <body xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
-  <div id="newtab-customize-overlay"></div>
-
-  <div id="newtab-vertical-margin">
-    <div id="newtab-margin-top"></div>
-    <div>
-      <iframe src="https://duckduckgo.com/search.html?prefill=Search DuckDuckGo" style="display: block;overflow:hidden;margin: auto;padding:0;width:551px;height:40px;" frameborder="0"></iframe>
-    </div>
-      <div id="newtab-horizontal-margin">
-        <div class="newtab-side-margin"></div>
-        <div id="newtab-grid">
-          <h1 id="topsites-heading">Your Top Sites</h1>
-        </div>
-        <div class="newtab-side-margin"></div>
-      </div>
-
-      <div id="newtab-margin-bottom"></div>
-    </div>
-    <script src="bundle.js"></script>
-    <menu type="context" id="context-menu">
-      <menuitem onclick="copyThumbnail">Copy Thumbnail URL</menuitem>
-    </menu>
-  </body>
-  <!-- <script type="text/javascript" src="chrome://browser/content/contentSearchUI.js"></script>
-  <script type="text/javascript" src="chrome://browser/content/newtab/newTab.js"></script> -->
-  <script src="../background-scripts/initialize.js"></script>
+  <div>
+    <iframe src="https://duckduckgo.com/search.html?prefill=Search DuckDuckGo" style="display: block;overflow:hidden;margin: auto;padding:0;width:551px;height:40px;" frameborder="0"></iframe>
+  </div>
+  <div id="newtab-grid">
+    <h1 id="topsites-heading">Your Top Sites</h1>
+  </div>
+  <menu type="context" id="context-menu">
+    <menuitem onclick="copyThumbnail">Copy Thumbnail URL</menuitem>
+  </menu>
+</body>
+<script src="bundle.js"></script>
+<script src="../background-scripts/initialize.js"></script>