tiennm99/hugoDocs
1
0 Fork 0
mirror of https://github.com/tiennm99/hugoDocs.git synced 2026-10-15 10:14:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

showcase layout improved when thumbnails are different proportions

Browse Source
This commit is contained in:
spf13 committed 2015-09-08 11:23:14 -04:00
1 parent 138ffefd6a
commit bfa06fff86
2 files changed
+28 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/layouts/showcase/thumbnail.html
+3 -1
View File
@@ -1,4 +1,6 @@
<div class="col-sm-6 col-md-4" style="padding-bottom:1em;"> <div class="col-sm-6 col-md-4" style="padding-bottom:1em;">
<div class="showcase-container">
<div class="dummy"></div>
<div class="thumbnail"> <div class="thumbnail">
<a href="{{ .Params.sitelink }}"><img class="img-responsive img-rounded" style="width:100%;" src="{{ .Params.thumbnail }}" alt="{{ .Description }}"></a> <a href="{{ .Params.sitelink }}"><img class="img-responsive img-rounded" style="width:100%;" src="{{ .Params.thumbnail }}" alt="{{ .Description }}"></a>
<h4> <h4>
@@ -12,4 +14,4 @@
{{ end }} {{ end }}
</div> </div>
</div> </div>
</div>
docs/static/css/style.css
Vendored
+25 -5
View File
@@ -583,14 +583,34 @@ i.freebsd-19px:before {
padding: 10px 50px 10px 20px; 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) { @media(max-width:1200px) {
.toc { .toc {
display: none; display: none;
} }
} }