From 162e17339ce161139ec167c5cb83a72f665b75ac Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 24 Sep 2023 08:43:29 -0700
Subject: [PATCH] Move photos styles to styles/photos/ files

---
 .../{photos.css => photos/001_photos.css}     | 74 -------------------
 assets/styles/photos/050_page.css             | 34 +++++++++
 assets/styles/photos/050_params.css           | 68 +++++++++++++++++
 3 files changed, 102 insertions(+), 74 deletions(-)
 rename assets/styles/{photos.css => photos/001_photos.css} (56%)
 create mode 100644 assets/styles/photos/050_page.css
 create mode 100644 assets/styles/photos/050_params.css

diff --git a/assets/styles/photos.css b/assets/styles/photos/001_photos.css
similarity index 56%
rename from assets/styles/photos.css
rename to assets/styles/photos/001_photos.css
index 923bc63..95ca054 100644
--- a/assets/styles/photos.css
+++ b/assets/styles/photos/001_photos.css
@@ -34,10 +34,6 @@
     margin-block-end: 0;
 }
 
-.photos.page > nav {
-    margin-block-end: var(--body-item-spacing);
-}
-
 .photos.list > a {
     display: block;
     line-height: 0;
@@ -89,73 +85,3 @@
         content: "";
     }
 }
-
-.photo-params {
-    padding-inline: calc(var(--body-item-spacing) / 2);
-}
-
-.photo-params > .container {
-    display: block;
-    background-color: var(--photo-params-container-background-color);
-    border-radius: 10px;
-    margin: var(--body-item-spacing) auto;
-    padding: calc(var(--body-item-spacing) / 2);
-    max-width: calc(0.66 * var(--content-width));
-}
-
-.photo-params > .container > table {
-    background-color: var(--photo-params-background-color);
-    color: var(--photo-params-color);
-    border-collapse: collapse;
-    border-radius: 6px;
-    table-layout: fixed;
-    text-align: center;
-    width: 100%;
-}
-
-.photo-params thead td {
-    border-bottom: 1px solid var(--photo-params-border-color);
-    font-size: 80%;
-    font-weight: bold;
-}
-
-.photo-params tbody tr > td {
-  border: none;
-  border-bottom: 1px solid var(--photo-params-border-color);
-}
-
-.photo-params tr.exposure-attributes > td {
-    border: none;
-    border-top: 1px solid var(--photo-params-border-color);
-    border-left: 1px solid var(--photo-params-border-color);
-}
-
-.photo-params tr.exposure-attributes > td:first-child {
-    border-left: none;
-}
-
-.photo-params td {
-    font-size: 75%;
-    padding: 1rem;
-}
-
-.photo-params td:last-child {
-    text-align: end;
-}
-
-.photo-params td:first-child {
-    text-align: start;
-}
-
-.photo-params .make-model {
-    font-weight: bold;
-}
-
-.photo-params .size {
-    border-left: 0;
-}
-
-.photo-params .location {
-    border-right: 0;
-}
-
diff --git a/assets/styles/photos/050_page.css b/assets/styles/photos/050_page.css
new file mode 100644
index 0000000..7af5542
--- /dev/null
+++ b/assets/styles/photos/050_page.css
@@ -0,0 +1,34 @@
+@layer section {
+    .photos.page {
+        gap: var(--body-item-spacing) 0;
+    }
+
+    .photos.page > article > :not(:last-child) {
+        margin-block-end: var(--body-item-spacing);
+    }
+
+    .photos.page > article > h1 {
+        font-size: var(--h3-size);
+    }
+
+    .photos.page > nav {
+        margin-block-end: var(--body-item-spacing);
+    }
+
+    .photos.page > :not(figure) {
+        grid-column: content-start / content-end;
+    }
+
+    .photos.page > figure {
+        grid-column: wide-content-start / wide-content-end;
+    }
+    @media (max-width: 960px) {
+        figure, img {
+            border-radius: 0;
+        }
+    }
+
+    .photos.page :is(figure, figure > img) {
+        max-width: none;
+    }
+}
diff --git a/assets/styles/photos/050_params.css b/assets/styles/photos/050_params.css
new file mode 100644
index 0000000..2dcc7b4
--- /dev/null
+++ b/assets/styles/photos/050_params.css
@@ -0,0 +1,68 @@
+.photo-params {
+    padding-inline: calc(var(--body-item-spacing) / 2);
+}
+
+.photo-params > .container {
+    display: block;
+    background-color: var(--photo-params-container-background-color);
+    border-radius: 10px;
+    margin: auto;
+    padding: calc(var(--body-item-spacing) / 2);
+    max-width: calc(0.66 * var(--content-width));
+}
+
+.photo-params > .container > table {
+    background-color: var(--photo-params-background-color);
+    color: var(--photo-params-color);
+    border-collapse: collapse;
+    border-radius: 6px;
+    table-layout: fixed;
+    text-align: center;
+    width: 100%;
+}
+
+.photo-params thead td {
+    border-bottom: 1px solid var(--photo-params-border-color);
+    font-size: 80%;
+    font-weight: bold;
+}
+
+.photo-params tbody tr > td {
+  border: none;
+  border-bottom: 1px solid var(--photo-params-border-color);
+}
+
+.photo-params tr.exposure-attributes > td {
+    border: none;
+    border-top: 1px solid var(--photo-params-border-color);
+    border-left: 1px solid var(--photo-params-border-color);
+}
+
+.photo-params tr.exposure-attributes > td:first-child {
+    border-left: none;
+}
+
+.photo-params td {
+    font-size: 75%;
+    padding: 1rem;
+}
+
+.photo-params td:last-child {
+    text-align: end;
+}
+
+.photo-params td:first-child {
+    text-align: start;
+}
+
+.photo-params .make-model {
+    font-weight: bold;
+}
+
+.photo-params .size {
+    border-left: 0;
+}
+
+.photo-params .location {
+    border-right: 0;
+}