showcase layout improved when thumbnails are different proportions

diff --git a/docs/layouts/showcase/thumbnail.html b/docs/layouts/showcase/thumbnail.html
index 0b3e254ddfe141424dd8a6b2e29f470c9c458b89..a0f7f81172f9ba5c9065efd1d055c5796870673b 100644 (file)
--- a/docs/layouts/showcase/thumbnail.html
+++ b/docs/layouts/showcase/thumbnail.html
@@ -1,15 +1,17 @@
 <div class="col-sm-6 col-md-4" style="padding-bottom:1em;">
-    <div class="thumbnail">
-    <a href="{{ .Params.sitelink }}"><img class="img-responsive img-rounded" style="width:100%;" src="{{ .Params.thumbnail }}" alt="{{ .Description }}"></a>
-    <h4>
-      <a href="{{ .Params.sitelink }}">{{ .Title }}</a>
-      {{ if (isset .Params "sourcelink") }}
-      <a href="{{ .Params.sourcelink }}" class="small pull-right">source</a>
-      {{ end }}
-    </h4>
-            {{ range .Params.tags }}
-            <span class="label label-default" style="font-size:60%;">{{ . }}</span>
-            {{ end }}
-    </div>
+    <div class="showcase-container">
+      <div class="dummy"></div>
+      <div class="thumbnail">
+      <a href="{{ .Params.sitelink }}"><img class="img-responsive img-rounded" style="width:100%;" src="{{ .Params.thumbnail }}" alt="{{ .Description }}"></a>
+      <h4>
+        <a href="{{ .Params.sitelink }}">{{ .Title }}</a>
+        {{ if (isset .Params "sourcelink") }}
+        <a href="{{ .Params.sourcelink }}" class="small pull-right">source</a>
+        {{ end }}
+      </h4>
+              {{ range .Params.tags }}
+              <span class="label label-default" style="font-size:60%;">{{ . }}</span>
+              {{ end }}
+      </div>
+  </div>
 </div>
-

diff --git a/docs/static/css/style.css b/docs/static/css/style.css
index aa147bafaf322724019ad57fb3d5bab3414d57ea..7a1974574e04866192a1de9ca2aacaacba6eaaa2 100755 (executable)
--- a/docs/static/css/style.css
+++ b/docs/static/css/style.css
@@ -583,14 +583,34 @@ i.freebsd-19px:before {
     padding: 10px 50px 10px 20px;
 }
 
+.showcase-container {
+    display: inline-block;
+    position: relative;
+    width: 100%;
+}
+
+.showcase-container img {
+  border: 1px solid #555;
+}
+
+.showcase-container h4 {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+.dummy {
+    padding-top: 90%; /* Making rows line up even if img proportions off */
+}
+
+.thumbnail {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
 
 @media(max-width:1200px) {
     .toc {
         display: none;
     }
 }
-
-
-
-
-