[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
01/01: website: screenshots: Center screenshot (see #34886).
From: |
Luis Felipe López Acevedo |
Subject: |
01/01: website: screenshots: Center screenshot (see #34886). |
Date: |
Mon, 18 Mar 2019 14:29:00 -0400 (EDT) |
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