shithub: hugo

Download patch

ref: bfa06fff86871c94aa032b4722f87855b069f67e
parent: 138ffefd6a6f9e4f64914c047b7ab523a8f72176
author: spf13 <steve.francia@gmail.com>
date: Tue Sep 8 07:23:14 EDT 2015 

showcase layout improved when thumbnails are different proportions


--- 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>
-
--- a/docs/static/css/style.css
+++ b/docs/static/css/style.css
@@ -583,14 +583,34 @@
     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;
     }
 }
-
-
-
-
-
-- 
⑨