[epiphany] Most visited: New responsive layout

[Michael Catanzaro <mcatanzaro src gnome org>]

commit 9746f2196edaaccaad08bf01f26f3efd37dca7df
Author: Tobias Bernard <tbernard gnome org>
Date:   Fri Jul 12 21:41:02 2019 +0200

    Most visited: New responsive layout
    
    New layout using CSS grid, which scales better across screen sizes.
    
    Some cosmetic changes to the individual website cards.

 embed/ephy-about-handler.c |  4 +++
 src/resources/about.css    | 61 +++++++++++++++++++++++++---------------------
 2 files changed, 37 insertions(+), 28 deletions(-)
---
diff --git a/embed/ephy-about-handler.c b/embed/ephy-about-handler.c
index d77624a92..d8e25d512 100644
--- a/embed/ephy-about-handler.c
+++ b/embed/ephy-about-handler.c
@@ -393,6 +393,9 @@ history_service_query_urls_cb (EphyHistoryService     *history,
   g_string_append (data_str,
                    "<div id=\"overview\">\n");
 
+  g_string_append (data_str,
+                   "<div class=\"most-visited-grid\">\n");
+
   for (l = urls; l; l = g_list_next (l)) {
     EphyHistoryURL *url = (EphyHistoryURL *)l->data;
     const char *snapshot;
@@ -417,6 +420,7 @@ history_service_query_urls_cb (EphyHistoryService     *history,
   }
 
   data_str = g_string_append (data_str,
+                              "  </div>\n"
                               "  </div>\n"
                               "</body></html>\n");
 
diff --git a/src/resources/about.css b/src/resources/about.css
index 5f15f6963..f5af3607a 100644
--- a/src/resources/about.css
+++ b/src/resources/about.css
@@ -199,39 +199,39 @@ html.epiphany-html {
 
 /* about:overview */
 #overview {
-    padding: 0 5px;
-    max-width: 700px;
-    margin-left: auto;
-    margin-right: auto;
-    bottom: 0;
-    max-height: 615px;
-    margin: auto;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    text-align: center;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.most-visited-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    grid-gap: 9px;
+    margin: 6px;
+}
+
+@media (min-width: 500px) {
+    .most-visited-grid {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        grid-gap: 18px;
+        margin: 18px;
+    }
 }
 
 .overview-item {
-    width: 182px;
-    height: 185px;
-    display: inline-block;
-    vertical-align: top;
+    position: relative;
     overflow: hidden;
-    margin: 20px 20px 0 20px;
     outline: 0;
-    position: relative;
     transition: 0;
-    top: 0;
     text-align: center;
 }
 
 .overview-title {
-    width: 180px;
-    height: 40px;
+    margin: 10px 6px;
     display: inline-block;
-    margin-top: 10px;
+    white-space: nowrap;
     overflow: hidden;
     font-family: -webkit-system-font, Cantarell, sans-serif;
     font-size: 11pt;
@@ -241,13 +241,18 @@ html.epiphany-html {
 }
 
 .overview-thumbnail {
-    width: 180px;
-    height: 135px;
+    height: 120px;
     display: block;
     border: 1px solid #ccc;
-    background: url(ephy-resource:///org/gnome/epiphany/web-watermark.svg) center no-repeat, 
linear-gradient(to bottom, #e8e8e8, #fff);
+    background: url(ephy-resource:///org/gnome/epiphany/web-watermark.svg) center no-repeat, #fff;
     background-repeat: no-repeat;
-    position: relative;
+    border-radius: 5px;
+}
+
+@media (min-width: 450px) {
+    .overview-thumbnail {
+        height: 160px;
+    }
 }
 
 .overview-thumbnail:hover,
@@ -264,8 +269,8 @@ html.epiphany-html {
 .overview-close-button {
     -webkit-transition: all 250ms;
     position: absolute;
-    top: 5px;
-    right: 5px;
+    top: 9px;
+    right: 9px;
     opacity: 0;
     z-index: 5;
     color: #888;