GNOME.org
 

[epiphany] about:web: responsive layout, some small style changes

commit 44cfe7c3ff2f10335164f2b98d495c8a105b5840
Author: Tobias Bernard <tbernard gnome org>
Date:   Wed Jul 17 20:13:58 2019 +0200

    about:web: responsive layout, some small style changes

 embed/ephy-about-handler.c |  3 ++-
 src/resources/about.css    | 25 ++++++++++++++++++-------
 2 files changed, 20 insertions(+), 8 deletions(-)
---
diff --git a/embed/ephy-about-handler.c b/embed/ephy-about-handler.c
index d8e25d512..bb4fb3189 100644
--- a/embed/ephy-about-handler.c
+++ b/embed/ephy-about-handler.c
@@ -173,6 +173,7 @@ ephy_about_handler_handle_about (EphyAboutHandler       *handler,
                           "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />"
                           "<link href=\""EPHY_PAGE_TEMPLATE_ABOUT_CSS "\" rel=\"stylesheet\" 
type=\"text/css\">"
                           "</head><body>"
+                          "<div id=\"about-app\">"
                           "<div class=\"dialog\">"
                           "<img id=\"about-icon\" src=\"file://%s\"/>"
                           "<h1 id=\"about-title\">%s</h1>"
@@ -181,7 +182,7 @@ ephy_about_handler_handle_about (EphyAboutHandler       *handler,
                           "<table class=\"properties\">"
                           "<tr><td class=\"prop-label\">%s</td><td class=\"prop-value\">%d.%d.%d</td></tr>"
                           "</table>"
-                          "</div></body></html>",
+                          "</div></div></body></html>",
                           _("About Web"),
                           icon_info ? gtk_icon_info_get_filename (icon_info) : "",
 #if !TECH_PREVIEW
diff --git a/src/resources/about.css b/src/resources/about.css
index 737767c1d..5d392e0ef 100644
--- a/src/resources/about.css
+++ b/src/resources/about.css
@@ -20,15 +20,25 @@ h1 {
 }
 
 /* about: */
+#about-app {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 
 .dialog {
-    padding: 2em;
-    margin: 2em auto;
+    padding: 12px;
     text-align: center;
-    background-color: #fff;
-    border-radius: 1em;
-    border: 2px solid #d3d7cf;
-    width: 40em;
+}
+
+@media (min-width: 550px) {
+    .dialog {
+        padding: 36px 42px;
+        background-color: #fff;
+        border-radius: 1em;
+        border: 2px solid #d3d7cf;
+    }
 }
 
 .properties {
@@ -41,10 +51,11 @@ h1 {
 
 #about-title {
     color: black;
+    font-weight: 800;
 }
 
 #about-subtitle {
-    color: #babdb6;
+    color: #9a9996;
     text-shadow: 0 1px 0 white;
 }
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]