diff --git a/content/photos/photos.css b/content/photos/photos.css index 36634d8..a2775d6 100644 --- a/content/photos/photos.css +++ b/content/photos/photos.css @@ -23,41 +23,72 @@ } .photos.list { - display: inline-block; + box-sizing: border-box; max-width: none; - margin: var(--body-item-spacing) 0; padding: 0 var(--body-item-spacing); width: 100%; } -.photos.list > .grid { +.photos.list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 0.8rem; - margin: 0; - padding: 0; -} -@media (max-width: 415px) { - .photos > .grid { - grid-template-columns: repeat(2, 1fr); - } + gap: 4px; } .photos.page > nav { margin-block-end: var(--body-item-spacing); } -.photos > .grid > li { - line-height: 0; - list-style: none; -} - -.photos > .grid > li > a { +.photos.list > a { display: block; + line-height: 0; } -.photos > .grid > li img { +.photos.list > a > img { border-radius: 3px; + image-orientation: from-image; +} + +.photos.list > div { + background-color: #333; + border-radius: 3px; + width: 100%; + height: 100%; + display: flex; + align-items: center; +} + +.photos.list > div > h6 { + display: block; + font-size: 5rem; + margin: 0 auto; + letter-spacing: 0; +} + +.photos.list > div > h6 > span { + text-align: end; + width: min-content; + position: relative; + display: inline-block; + padding-inline-end: 20px; +} + +.photos.list > div > h6 > span::after { + top: 6px; + right: 0px; + position: absolute; + display: block; + content: "⏵︎"; + font-size: 80%; +} +@media (max-width: calc(24px + 400px + 4px)) { + .photos.list > div > h6 > span { + width: max-content; + padding-block: calc(0.25 * var(--body-item-spacing)); + } + .photos.list > div > h6 > span::after { + content: ""; + } } .photo-params { diff --git a/layouts/photos/list.html b/layouts/photos/list.html index ab950a0..f96b913 100644 --- a/layouts/photos/list.html +++ b/layouts/photos/list.html @@ -4,13 +4,14 @@ {{ define "main" }} {{- $pages := (.Paginate (first 50 (.Pages.GroupByDate "January 2006"))).PageGroups -}} +{{ $pages := .Pages.ByDate.GroupByDate "Jan 2006" }} {{- range $pages -}} -
{{ .Key | title }}
- +
+
{{ .Key | title }}
+
+ {{- range .Pages -}} + {{- .Render "li_thumbnail_in_grid" -}} + {{- end -}} {{- end -}} {{ end }}