From cd47a82ecffe9c77efecd3ebaca9594a642f58b4 Mon Sep 17 00:00:00 2001
From: Nick Pegg <nick@nickpegg.com>
Date: Mon, 5 Aug 2024 21:18:53 -0700
Subject: [PATCH] visual tweaks

---
 photojawn/skel/_templates/album.html |  4 ++++
 photojawn/skel/_templates/photo.html |  2 +-
 photojawn/skel/static/index.css      | 16 ++++++++++++----
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/photojawn/skel/_templates/album.html b/photojawn/skel/_templates/album.html
index 2b5e529..cf4a112 100644
--- a/photojawn/skel/_templates/album.html
+++ b/photojawn/skel/_templates/album.html
@@ -9,13 +9,17 @@
         {% endfor %}
         / {{album_dir.path.name}}
     </h1>
+    <hr>
     {% endif %}
 
     {% if album_dir.description %}
+    <div class="caption">
     {{ album_dir.description | safe }}
+    </div>
     {% endif %}
 
     {% if album_dir.children %}
+        <h2>Albums</h2>
         <div id="album-children">
             {% for child in album_dir.children %}
                 <div class="album">
diff --git a/photojawn/skel/_templates/photo.html b/photojawn/skel/_templates/photo.html
index 8c837d6..9f4198e 100644
--- a/photojawn/skel/_templates/photo.html
+++ b/photojawn/skel/_templates/photo.html
@@ -42,7 +42,7 @@
     </div>
 </div>
 
-<div id="photo-description">
+<div id="photo-description" class="caption">
     {% if image_path.description %}
     {{ image_path.description | safe }}
     {% endif %}
diff --git a/photojawn/skel/static/index.css b/photojawn/skel/static/index.css
index c15e4a5..f476fe1 100644
--- a/photojawn/skel/static/index.css
+++ b/photojawn/skel/static/index.css
@@ -22,15 +22,14 @@ a {
 
 #content {
   text-align: center;
+  max-width: 1200px;
   margin: 0.5em;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 #content > * {
-  width: fit-content;
-  max-width: 1500px;
   margin-top: 1em;
-  margin-left: auto;
-  margin-right: auto;
 }
 
 ul {
@@ -47,6 +46,9 @@ ul {
   margin: 1em;
   padding: 0.75em;
   background-color: lightgrey;
+  height: min-content;
+  border: thin solid black;
+  box-shadow: 0.25em 0.25em #ccc;
 }
 
 #album-photos {
@@ -81,6 +83,12 @@ ul {
   height: auto;
 }
 
+.caption {
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .arrow {
   border: solid black;
   border-width: 0 3px 3px 0;