[add] css to tile-ize lab images #7

themes/cns_hp_theme/layouts/partials/main_menu.html

@@ -21,6 +21,7 @@
             {{ if eq .Identifier "lab" }}
             <div>
               {{ range .Children }}
+                {{ $nm := .Name }}
                 {{ $w := sub .Weight 1 }}
                 {{ $pt := .URL | relLangURL }}
                 <!-- Fetch image path -->
@@ -28,7 +29,7 @@
                   {{ if eq .Title "Lab" }}
                     {{ range $index, $element := (.Page.Param "image") }}
                       {{ if eq $w $index }}
-                        <a href={{ $pt }}><img src="{{ . }}" ></a>
+                        <a href={{ $pt }} class="tile"><img src="{{ . }}" alt={{ $nm }} title={{ $nm }}><div class="caption">{{ $nm }}</div></a>
                       {{ end }}
                     {{ end }}
                   {{ end }}

themes/cns_hp_theme/static/css/main_menu.css

@@ -57,4 +57,27 @@
 
 }
 
+.tile {
+    position: relative;
+}
 
+.tile img {
+    width: 100%;
+    height: auto;
+    margin: 2px;
+    max-width: 210px;
+    background: #f7f7f7;
+    box-shadow: 0px 2px 2px rgba(0,0,0,0.29);
+}
+
+.tile div.caption {
+    position: absolute;
+    width: 97%;
+    height: 240%;
+    bottom: 10px;
+    left: 3px;
+    color: #000;
+    background: #fff;
+    font-size: 130%;
+    text-align: center;
+}