mirror of
https://github.com/gohugoio/hugo.git
synced 2025-03-03 05:23:48 +00:00
showcase layout improved when thumbnails are different proportions
This commit is contained in:
parent
138ffefd6a
commit
bfa06fff86
2 changed files with 40 additions and 18 deletions
|
@ -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
30
docs/static/css/style.css
vendored
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue