01/01: website: home: Make screenshots responsive.

[Luis Felipe López Acevedo]

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

commit 29c1e08a31f2570c88995c556e7248a26582b6c6
Author: sirgazil <address@hidden>
Date:   Sun Nov 27 15:49:24 2016 -0500

    website: home: Make screenshots responsive.
    
    * website/static/base/css/base.css (.img-responsive): New class.
    * website/static/base/css/index.css (#screens-box a)
    (.screenshot-thumb): Adapt to small screens.
    * website/www.scm (screenshot): Apply new class.
---
 website/static/base/css/base.css  |    6 ++++++
 website/static/base/css/index.css |   11 +++++++----
 website/www.scm                   |    2 +-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/website/static/base/css/base.css b/website/static/base/css/base.css
index df35c15..c24737a 100644
--- a/website/static/base/css/base.css
+++ b/website/static/base/css/base.css
@@ -137,6 +137,12 @@ a.hlink-yellow-boxed:hover {
     width: 100%;
 }
 
+.img-responsive {
+    display: block;
+    height: auto;
+    max-width: 100%;
+}
+
 pre {
     background-color: #F2EFE4;
     border-style: solid;
diff --git a/website/static/base/css/index.css 
b/website/static/base/css/index.css
index ed8ff29..d3d4f7d 100644
--- a/website/static/base/css/index.css
+++ b/website/static/base/css/index.css
@@ -122,7 +122,8 @@ h3 {
 #screens-box a {
     border-style: none;
     color: white;
-    display: inline-block;
+    display: block;
+    margin: 10px;
 }
 
 .screenshot-thumb {
@@ -131,9 +132,7 @@ h3 {
     border-style: solid;
     border-width: thin;
     box-shadow: 0 0 4px gray;
-    display: inline-block;
-    margin: 10px;
-    width: 300px;
+    margin: auto;
 }
 
 .screenshot-thumb:hover {
@@ -192,6 +191,10 @@ h3 {
        display: inline-block;
        width: 196px;
     }
+
+    #screens-box a {
+       display: inline-block;
+    }
 }
 
 
diff --git a/website/www.scm b/website/www.scm
index 459629f..59e917a 100644
--- a/website/www.scm
+++ b/website/www.scm
@@ -88,7 +88,7 @@ to URL."
                      (alt ""))
   `(a (@ (href ,(screenshot-url directory image)))
       (img (@ (src ,(thumb-url image))
-              (class "screenshot-thumb")
+              (class "screenshot-thumb img-responsive")
               (alt ,alt)))))
 
 (define* (main-page #:optional site (posts '()))