phoenix/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2024-07-02 23:30:00 +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 2015-09-08 11:23:14 -04:00
parent 138ffefd6a
commit bfa06fff86
2 changed files with 40 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
docs/layouts/showcase/thumbnail.html
View file

@ -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>

30
docs/static/css/style.css vendored
View file

@ -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;
}
}