01/01: website: screenshots: Center screenshot (see #34886).

[Luis Felipe López Acevedo]

lfla pushed a commit to branch master
in repository guix-artwork.

commit 5135c9082f0122912dcd5206f62c555b8b62be34
Author: sirgazil <address@hidden>
Date:   Mon Mar 18 13:19:00 2019 -0500

    website: screenshots: Center screenshot (see #34886).
    
    This change centers the screenshot horizontally in the page, and adds
    a black background to make narrow screenshots look a better in wider
    screens. The background also helps differentiate better the space of
    the screenshot from the screenshot list below it.
    
    * website/apps/base/templates/screenshot.scm:
      (screenshot-t): Apply new screenshot-viewer class.
    * website/static/base/css/screenshots.css: New style sheet.
---
 website/apps/base/templates/screenshot.scm | 13 ++++++++-----
 website/static/base/css/screenshots.css    |  3 +++
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/website/apps/base/templates/screenshot.scm 
b/website/apps/base/templates/screenshot.scm
index 3083e74..41a3a07 100644
--- a/website/apps/base/templates/screenshot.scm
+++ b/website/apps/base/templates/screenshot.scm
@@ -23,7 +23,8 @@
        "GNU Guile" "Guile Scheme" "Transactional upgrades"
        "Functional package management" "Reproducibility")
      #:active-menu-item "Overview"
-     #:css (list (guix-url "static/base/css/index.css"))
+     #:css (list (guix-url "static/base/css/index.css")
+                (guix-url "static/base/css/screenshots.css"))
      #:content
      `(main
        (section
@@ -32,10 +33,12 @@
         (@ (class "a11y-offset"))
         ,(screenshot-title shot))
 
-       (img
-        (@ (class "responsive-image")
-           (src ,(screenshot-image shot))
-           (alt ,(screenshot-caption shot))))
+       (div
+        (@ (class "screenshot-viewer"))
+        (img
+         (@ (class "responsive-image centered-block")
+            (src ,(screenshot-image shot))
+            (alt ,(screenshot-caption shot)))))
 
        (div
         (@ (class "screenshots-box top-shadow-bg"))
diff --git a/website/static/base/css/screenshots.css 
b/website/static/base/css/screenshots.css
new file mode 100644
index 0000000..64f5f6a
--- /dev/null
+++ b/website/static/base/css/screenshots.css
@@ -0,0 +1,3 @@
+.screenshot-viewer {
+    background-color: black;
+}
\ No newline at end of file