Added couple of screenshots

screenshots/index.md

@@ -5,3 +5,36 @@ title: Screenshots
 
 Screenshots
 ===========
+
+To get an impression how Window Maker could look like, here are couple of
+screenshots.
+
+
+[![Desktop of IRC user Lumpi](lumpi-wmaker_thumb.jpg)](lumpi-wmaker.png)
+{:.gallery}
+
+[![Desktop of IRC user bikki](bikki_1_thumb.jpg)](bikki_1.png)
+{:.gallery}
+
+[![Another screenshot from bikki](bikki_2_thumb.jpg)](bikki_2.png)
+{:.gallery}
+
+[![screenshot from khamsin](khamsin1_thumb.jpg)](khamsin1.jpg)
+{:.gallery}
+
+[![screenshot from khamsin](khamsin2_thumb.jpg)](khamsin2.png)
+{:.gallery}
+
+[![screenshot from khamsin](khamsin3_thumb.jpg)](khamsin3.jpg)
+{:.gallery}
+
+[![screenshot from khamsin](khamsin4_thumb.jpg)](khamsin4.png)
+{:.gallery}
+
+[![screenshot from khamsin](gryf-bloodline_thumb.jpg)](gryf-bloodline.png)
+{:.gallery}
+
+[![screenshot from khamsin](gryf-clearloks_thumb.jpg)](gryf-clearloks.png)
+{:.gallery}
+
+<div class="clear"></div>

style.css

@@ -50,6 +50,33 @@ p.screenshot a img {
     margin: auto;
 }
 
+/* gallery */
+
+p.gallery {
+    float: left;
+    margin: 5px;
+    width: 300px;
+}
+
+p.gallery a img {
+    border: 1px solid black;
+    box-shadow: 3px 7px 7px #606060;
+    top: 0;
+    bottom:0;
+    left: 0;
+    right:0;
+    margin: auto;
+}
+
+div.gallery img {
+    width: 100%;
+    height: auto;
+}
+
+.clear {
+    clear: left;
+}
+
 /* logo */
 header h1 a {
     font-family: "DejaVu Sans", sans-serif;