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.

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 '()))