Finish up photostream grid and single layouts

assets/css/050_photos.css

@@ -0,0 +1,162 @@
+.main--single.photostream--single {
+  > .figure--image {
+    margin-block-end: var(--space-l);
+
+    img {
+      max-height: 100vh;
+    }
+  }
+}
+
+.photo-params {
+  --background-color: var(--gray7);
+  --container-background-color: var(--gray6);
+  --color: var(--gray2);
+  --border-color: var(--gray6);
+  --border-style: 2px solid;
+
+  display: flex;
+  grid-column: main-start / main-end;
+  justify-content: center;
+  margin-block-start: var(--space-xl);
+
+  > table {
+    background-color: var(--background-color);
+    color: var(--color);
+    border: var(--border-style) var(--border-color);
+    border-collapse: collapse;
+    table-layout: fixed;
+    text-align: center;
+    width: min(calc(0.66 * var(--content-width)), 100%);
+
+    thead td {
+      border-bottom: var(--border-style) var(--border-color);
+      font-size: 80%;
+      font-weight: bold;
+    }
+
+    tr > td {
+      border: none;
+      border-bottom: var(--border-style) var(--border-color);
+    }
+
+    tr.exposure-attributes > td {
+      border: none;
+      border-top: var(--border-style) var(--border-color);
+      border-left: var(--border-style) var(--border-color);
+    }
+
+    tr.exposure-attributes > td:first-child {
+      border-left: none;
+    }
+
+    td {
+      font-size: var(--text-s);
+      line-height: 1;
+      padding-inline: var(--space-s);
+      padding-block: var(--space-xs);
+
+      &:last-child {
+        text-align: end;
+      }
+
+      &:first-child {
+        text-align: start;
+      }
+    }
+
+    .make-model {
+      font-weight: bold;
+    }
+
+    .size {
+      border-left: 0;
+    }
+
+    .location {
+      border-right: 0;
+    }
+  }
+}
+
+.photostream-grid {
+  grid-column: full-start / full-end;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+
+  &:not(:last-child) {
+    margin-block-end: var(--space-l);
+  }
+
+  > .photostream-grid__date-heading {
+    align-items: center;
+    background-color: var(--gray6);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    line-height: 1;
+    width: 100%;
+
+    > h2 {
+      font-size: var(--text-xxl);
+      margin: 0;
+
+      &::after {
+        color: var(--text-color-secondary);
+        content: ">";
+      }
+    }
+  }
+}
+
+
+.photostream-item {
+  aspect-ratio: 1;
+  grid-column: unset;
+  margin-block: 0;
+  position: relative;
+
+  > a {
+    display: block;
+    line-height: 0;
+  }
+
+  .photostream-item__title,
+  .photostream-item__date {
+    background-color: var(--background-color);
+    font-family: var(--font-family-monospace);
+    font-size: var(--text-s);
+    margin: 0;
+    padding-inline: var(--space-xxs);
+    visibility: hidden;
+    z-index: 2;
+  }
+
+  .photostream-item__title {
+    left: 0;
+    position: absolute;
+    top: 0;
+  }
+
+  .photostream-item__date {
+    bottom: 0;
+    position: absolute;
+    right: 0;
+  }
+
+  &:hover {
+    .photostream-item__date,
+    .photostream-item__title {
+      visibility: visible;
+    }
+  }
+}
+
+@media screen and (hover: none) {
+  .photostream-item :is(
+    .photostream-item__date,
+    .photostream-item__title)
+  {
+    visibility: visible;
+  }
+}