Photos page styles

- Create items in the grid for the month and year
- Use child selectors where possible
- fix the layout

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;
+    gap: 4px;
-    margin: 0;
-    padding: 0;
-}
-@media (max-width: 415px) {
-    .photos > .grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
 }
 
 .photos.page > nav {
     margin-block-end: var(--body-item-spacing);
 }
 
-.photos > .grid > li {
+.photos.list > a {
-    line-height: 0;
-    list-style: none;
-}
-
-.photos > .grid > li > 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 {

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 -}}
-  <h6>{{ .Key | title }}</h6>
+  <div>
-  <ul class="grid">
+    <h6><span>{{ .Key | title }}</span></h6>
-    {{- range .Pages -}}
+  </div>
-      {{- .Render "li_thumbnail_in_grid" -}}
+  {{- range .Pages -}}
-    {{- end -}}
+    {{- .Render "li_thumbnail_in_grid" -}}
-  </ul>
+  {{- end -}}
 {{- end -}}
 {{ end }}