mxmehl/hugo-snap-gallery
1
0
Fork 0
Code Issues 2 Pull Requests Releases 2 Wiki Activity

improve dealing with small images

Browse Source
This commit is contained in:
max.mehl
2020-03-09 13:53:41 +01:00
parent 81ece5842c
commit 824e062cfd
2 changed files with 56 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/shortcodes/figure.html
View File

@@ -33,6 +33,7 @@
{{- end -}} {{- end -}}
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}> <figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
<div class="snap-wrapper">
{{ if (.Get "link") -}} {{ if (.Get "link") -}}
<a href="{{ .Get "link" }}" <a href="{{ .Get "link" }}"
{{- with .Get "target" }} target="{{ . }}"{{ end -}} {{- with .Get "target" }} target="{{ . }}"{{ end -}}
@@ -80,4 +81,5 @@
<a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a> <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
{{- end }} {{- end }}
</div> </div>
</div>
</figure> </figure>

10
static/css/snap-gallery.css
View File

@@ -10,7 +10,12 @@ figure {
margin: 30px auto 40px; margin: 30px auto 40px;
display: block; display: block;
text-align: center; text-align: center;
}
/* make box with box-shadow only as large as image */
.snap-wrapper {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
display: inline-block;
} }
figure a:hover { figure a:hover {
@@ -59,6 +64,11 @@ figure figcaption {
flex-wrap: wrap; flex-wrap: wrap;
} }
/* avoid sick effects of inline-block on gallery elements */
.snap-gallery .snap-wrapper {
display: block;
}
.snap-gallery figure { .snap-gallery figure {
position: relative; position: relative;
width: 30%; width: 30%;