34mdh/hugo-theme
2
0
Fork 0
forked from jakub/jakubb-hugo
Code Pull Requests Activity

finish css layout for gallery

Browse Source
This commit is contained in:
Jakub 2024-03-01 20:50:04 -05:00
parent 07dce0f1b6
commit 6433fb41ba
2 changed files with 52 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
layouts/photos/single.html
View File

@ -9,12 +9,19 @@
{{ $path := .Page.File.Path | strings.TrimSuffix (path.Ext .Page.File.Path) }}
{{ $images := where (resources.Match "photos/test1/*" ) "ResourceType" "eq" "image" }}
<div class="gallery" >
{{ range $images }} <div class="gallery-item"> <img src="{{ .RelPermalink }}" /> </div> {{ end }}
</div>
<div class="gallery">
{{ range $images }}
<div class="gallery-item">
<img src="{{ .RelPermalink }}" />
</div>
{{ end }}
</div>
</div>
<style>
</style>
{{ partial "footer.html" . }}

40
static/css/style.css
View File

@ -598,3 +598,43 @@ blockquote.location p { padding: inherit; }
font-size: 2vh;
}
}
/* pics stuff */
.gallery {
display: flex;
flex-wrap: wrap;
gap: 8px;
width: 100%;
}
.gallery-item {
flex-grow: 1;
flex: 1 1 auto;
height: 25vh;
}
@media screen and (max-width: 755px) {
.gallery-item {
width: 100%;
height: auto;
}
}
@media screen and (min-width: 1040px) {
.gallery-item {
height: 18vh;
}
}
.gallery-item img {
object-fit: cover;
width: 100%;
height: 100%;
}