From 75472ee1ea3e0955af4961d0aeec11df2abc559a Mon Sep 17 00:00:00 2001
From: Jason Heppler <jason.heppler@gmail.com>
Date: Fri, 4 Oct 2024 12:25:12 -0500
Subject: [PATCH] refactor: Resolves a majority of the feedback in #14

---
 config/settings.py                            |   1 +
 exhibits/templates/exhibits/exhibit_page.html | 574 ++++++++++++------
 static/css/style.css                          |  17 +
 templates/base_exhibit.html                   |   4 +-
 templates/index.html                          |  17 +-
 5 files changed, 426 insertions(+), 187 deletions(-)

diff --git a/config/settings.py b/config/settings.py
index cc94c4c..2439710 100644
--- a/config/settings.py
+++ b/config/settings.py
@@ -213,6 +213,7 @@
 WAGTAIL_SITE_NAME = "Connecting Threads"
 WAGTAIL_BASE_URL = "http://localhost:8000"
 WAGTAILADMIN_BASE_URL = "http://localhost:8000"
+WAGTAILEMBEDS_RESPONSIVE_HTML = True
 
 LOGGING = {
     "version": 1,
diff --git a/exhibits/templates/exhibits/exhibit_page.html b/exhibits/templates/exhibits/exhibit_page.html
index f4a2031..49f7c20 100644
--- a/exhibits/templates/exhibits/exhibit_page.html
+++ b/exhibits/templates/exhibits/exhibit_page.html
@@ -5,8 +5,8 @@
 
 {% block content %}
   <div class="flex flex-col lg:flex-row min-h-screen">
-    <!-- Left Column: Image -->
-     {# ================= image, left column ======================= #}
+  <!-- Left Column: Image -->
+  {# ================= image, left column ======================= #}
     {% if page.layout == 'left_image_one_third' %}
       <div class="lg:w-1/3">
         {% if page.image_comparisons.all %}
@@ -17,8 +17,10 @@
               <img-comparison-slider class="w-full h-full">
                 <img slot="first" class="object-scale-down h-screen m-auto" src="{{ img1.url }}" loading="lazy">
                 <img slot="second" class="object-scale-down h-screen m-auto" src="{{ img2.url }}" loading="lazy">
-                <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
-                  <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path>
+                <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100"
+                     viewBox="-8 -3 16 6">
+                  <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1"
+                        fill="#fff" vector-effect="non-scaling-stroke"></path>
                 </svg>
                 </img-comparison-slider>
               </div>
@@ -29,14 +31,16 @@
           {% image page.image original class="w-full h-screen object-cover" %}
           <div x-data="{ openCaption: false, openImage: false }" class="absolute top-0 left-0 m-4 hidden md:block">
             <div class="flex justify-end space-x-2" :class="{ 'hidden': openCaption || openImage }" x-transition x-cloak>
-              <button @click="openCaption = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+              <button @click="openCaption = true"
+                      class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                 Caption
               </button>
-              <button @click="openImage = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+              <button @click="openImage = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                 View Full Image
               </button>
             </div>
-            <div :class="{ 'hidden': !openCaption }" x-transition x-cloak class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
+            <div :class="{ 'hidden': !openCaption }" x-transition x-cloak
+                 class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
               <button @click="openCaption = false" class="absolute top-2 right-2 text-white">
                 &times;
               </button>
@@ -44,13 +48,15 @@
                 {{ page.image_caption }}
               </p>
             </div>
-            <div :class="{ 'hidden': !openImage }" x-transition x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
-              <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4">
+            <div :class="{ 'hidden': !openImage }" x-transition x-cloak
+                 class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+              <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4 max-h-screen overflow-y-auto">
                 <button @click="openImage = false" class="absolute top-2 right-2 text-black">
-                  <span class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
+                  <span
+                    class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
                 </button>
-                <div class="overflow-hidden">
-                  {% image page.image original class="w-full h-auto" %}
+                <div class="flex justify-center items-center overflow-hidden">
+                  {% image page.image original class="w-auto max-h-[80vh]" %}
                 </div>
                 <p class="text-sm mt-2 text-center">
                   {{ page.image_caption }}
@@ -67,7 +73,7 @@
           </div>
         {% endfor %}
       </div>
-        <!-- Right Column: Content -->
+  <!-- Right Column: Content -->
       <div class="lg:w-2/3 flex flex-col justify-between overflow-y-auto h-screen">
         <div class="prose p-8 flex-grow">
           {% if page.display_title %}
@@ -80,54 +86,86 @@ <h1>{{ page.title }}</h1>
 
         <footer class="p-4">
           <div class="container mx-auto">
-            <div class="flex justify-center items-center mb-4 space-x-4">
+            <div class="flex flex-col items-center mb-2 space-y-2"></div>
+            <div class="flex space-x-2"> <!-- TODO: DONE -->
               {% if page.link_to_previous_page %}
-                <a href="{% pageurl page.link_to_previous_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                <a href="{% pageurl page.link_to_previous_page %}"
+                   class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
                   Previous
                 </a>
               {% endif %}
               {% if page.link_to_next_page %}
-                <a href="{% pageurl page.link_to_next_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                <a href="{% pageurl page.link_to_next_page %}"
+                   class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
                   Next
                 </a>
               {% endif %}
             </div>
+            <div class="flex flex-col items-center space-y-2">
+              {% if page.link_to_subsection %}
+                <a href="{% pageurl page.link_to_subsection %}"
+                   class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                  Skip to next section
+                </a>
+              {% endif %}
+              <a href="/#exhibits"
+                 class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                Take me to the beginning
+              </a>
+            </div>
           </div>
-        </footer>
+        </div>
+      </footer>
       </div>
       </div>
 
-      {# ================== one third, image right =================== #}
+{# ================== one third, image right =================== #}
 
     {% elif page.layout == 'right_image_one_third' %}
-      <!-- Right Image One Third Layout -->
+<!-- Right Image One Third Layout -->
+      <div class="flex flex-wrap lg:flex-nowrap"></div>
+  <!-- Left Column: Content -->
       <div class="lg:w-2/3 flex flex-col justify-between overflow-y-auto h-screen">
         <div class="prose p-8 flex-grow">
           {% if page.display_title %}
             <h1>{{ page.title }}</h1>
-          {% endif %}          <div class="text-justify">
+          {% endif %}
+          <div class="text-justify">
             {{ page.body|richtext }}
           </div>
         </div>
         <footer class="p-4">
           <div class="container mx-auto">
-            <div class="flex justify-center items-center mb-4 space-x-4">
-              {% if page.link_to_previous_page %}
-                <a href="{% pageurl page.link_to_previous_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                  Previous
-                </a>
-              {% endif %}
-              {% if page.link_to_next_page %}
-                <a href="{% pageurl page.link_to_next_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                  Next
+            <div class="flex flex-col items-center mb-2 space-y-2">
+              <div class="flex space-x-2">
+                {% if page.link_to_previous_page %}
+                  <a href="{% pageurl page.link_to_previous_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                    Previous
+                  </a>
+                {% endif %}
+                {% if page.link_to_next_page %}
+                  <a href="{% pageurl page.link_to_next_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                    Next
+                  </a>
+                {% endif %}
+              </div>
+              <div class="flex flex-col items-center space-y-2">
+                {% if page.link_to_subsection %}
+                  <a href="{% pageurl page.link_to_subsection %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                    Skip to next section
+                  </a>
+                {% endif %}
+                <a href="/#exhibits" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                  Take me to the beginning
                 </a>
-              {% endif %}
+              </div>
             </div>
           </div>
         </footer>
       </div>
-      <!-- Right Column: Image -->
-      <div class="lg:w-1/3">
+
+  <!-- Right Column: Image -->
+      <div class="lg:w-1/3 relative">
         {% if page.image_comparisons.all %}
           {% for comparison in page.image_comparisons.all %}
             {% image comparison.first_image original as img1 %}
@@ -144,18 +182,84 @@ <h1>{{ page.title }}</h1>
           {% endfor %}
           <script defer src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"></script>
           <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css" />
+        {% elif page.image %}
+          <div class="relative w-full h-screen">
+            {% image page.image original class="w-full h-full object-cover" %}
+            <div x-data="{ openCaption: false, openImage: false }" class="absolute top-0 right-0 m-4 hidden md:block">
+              <div class="flex justify-end space-x-2" :class="{ 'hidden': openCaption || openImage }" x-transition x-cloak>
+                <button @click="openCaption = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
+                  Caption
+                </button>
+                <button @click="openImage = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
+                  View Full Image
+                </button>
+              </div>
+              <div :class="{ 'hidden': !openCaption }" x-transition x-cloak class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
+                <button @click="openCaption = false" class="absolute top-2 right-2 text-white">
+                  &times;
+                </button>
+                <p class="text-sm">
+                  {{ page.image_caption }}
+                </p>
+              </div>
+              <div :class="{ 'hidden': !openImage }" x-transition x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+                <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4 max-h-screen overflow-y-auto">
+                  <button @click="openImage = false" class="absolute top-2 right-2 text-black">
+                    <span class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
+                  </button>
+                  <div class="flex justify-center items-center overflow-hidden">
+                    {% image page.image original class="w-auto max-h-[80vh]" %}
+                  </div>
+                  <p class="text-sm mt-2 text-center">
+                    {{ page.image_caption }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        {% endif %}
+
+        {% for item in page.gallery_images.all %}
+          <div style="float: inline-start; margin: 10px">
+            {% image item.image fill-320x240 %}
+            <p>{{ item.caption }}</p>
+          </div>
+        {% endfor %}
+      </div>
+      </div>
+<!-- Right Column: Image -->
+      <div class="lg:w-1/3">
+        {% if page.image_comparisons.all %}
+          {% for comparison in page.image_comparisons.all %}
+            {% image comparison.first_image original as img1 %}
+            {% image comparison.second_image original as img2 %}
+            <div class="relative w-full h-screen">
+              <img-comparison-slider class="w-full h-full">
+                <img slot="first" class="object-scale-down h-screen m-auto" src="{{ img1.url }}" loading="lazy">
+                <img slot="second" class="object-scale-down h-screen m-auto" src="{{ img2.url }}" loading="lazy">
+                <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100"
+                     viewBox="-8 -3 16 6">
+                  <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1"
+                        fill="#fff" vector-effect="non-scaling-stroke"></path>
+                </svg>
+                </img-comparison-slider>
+              </div>
+          {% endfor %}
+          <script defer src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"></script>
+          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css" />
         {% elif page.image %}
           {% image page.image original class="w-full h-screen object-cover" %}
           <div x-data="{ openCaption: false, openImage: false }" class="absolute top-0 right-0 m-4 hidden md:block">
             <div class="flex justify-end space-x-2" :class="{ 'hidden': openCaption || openImage }" x-transition x-cloak>
-              <button @click="openCaption = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+              <button @click="openCaption = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                 Caption
               </button>
-              <button @click="openImage = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+              <button @click="openImage = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                 View Full Image
               </button>
             </div>
-            <div :class="{ 'hidden': !openCaption }" x-transition x-cloak class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
+            <div :class="{ 'hidden': !openCaption }" x-transition x-cloak
+                 class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
               <button @click="openCaption = false" class="absolute top-2 right-2 text-white">
                 &times;
               </button>
@@ -163,13 +267,15 @@ <h1>{{ page.title }}</h1>
                 {{ page.image_caption }}
               </p>
             </div>
-            <div :class="{ 'hidden': !openImage }" x-transition x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
-              <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4">
+            <div :class="{ 'hidden': !openImage }" x-transition x-cloak
+                 class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+              <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4 max-h-screen overflow-y-auto">
                 <button @click="openImage = false" class="absolute top-2 right-2 text-black">
-                  <span class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
+                  <span
+                    class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
                 </button>
-                <div class="overflow-hidden">
-                  {% image page.image original class="w-full h-auto" %}
+                <div class="flex justify-center items-center overflow-hidden">
+                  {% image page.image original class="w-auto max-h-[80vh]" %}
                 </div>
                 <p class="text-sm mt-2 text-center">
                   {{ page.image_caption }}
@@ -187,23 +293,25 @@ <h1>{{ page.title }}</h1>
         {% endfor %}
       </div>
 
-      {# ============ three column, images left ======================= #}
+{# ============ three column, images left ======================= #}
 
     {% elif page.layout == 'three_column_images_left' %}
       <div class="flex flex-wrap">
         <div class="w-full lg:w-1/3 relative">
           {% if page.image_first_column %}
-            {% image page.image_first_column original class="w-full h-screen object-cover" %}
+            {% image page.image_first_column original class="w-full h-full object-contain" %}
             <div x-data="{ openCaption: false, openImage: false }" class="absolute top-0 left-0 m-4 hidden md:block">
               <div class="flex justify-end space-x-2" :class="{ 'hidden': openCaption || openImage }" x-transition x-cloak>
-                <button @click="openCaption = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+                <button @click="openCaption = true"
+                        class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                   Caption
                 </button>
-                <button @click="openImage = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+                <button @click="openImage = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                   View Full Image
                 </button>
               </div>
-              <div :class="{ 'hidden': !openCaption }" x-transition x-cloak class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
+              <div :class="{ 'hidden': !openCaption }" x-transition x-cloak
+                   class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
                 <button @click="openCaption = false" class="absolute top-2 right-2 text-white">
                   &times;
                 </button>
@@ -211,13 +319,15 @@ <h1>{{ page.title }}</h1>
                   {{ page.image_first_column_caption }}
                 </p>
               </div>
-              <div :class="{ 'hidden': !openImage }" x-transition x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
-                <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4">
+              <div :class="{ 'hidden': !openImage }" x-transition x-cloak
+                   class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+                <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4 max-h-screen overflow-y-auto">
                   <button @click="openImage = false" class="absolute top-2 right-2 text-black">
-                    <span class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
+                    <span
+                      class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
                   </button>
-                  <div class="overflow-hidden">
-                    {% image page.image_first_column original class="w-full h-auto" %}
+                  <div class="flex justify-center items-center overflow-hidden">
+                    {% image page.image_first_column original class="w-auto max-h-[80vh]" %}
                   </div>
                   <p class="text-sm mt-2 text-center">
                     {{ page.image_first_column_caption }}
@@ -229,17 +339,19 @@ <h1>{{ page.title }}</h1>
         </div>
         <div class="w-full lg:w-1/3 relative">
           {% if page.image_second_column %}
-            {% image page.image_second_column original class="w-full h-screen object-cover" %}
+            {% image page.image_second_column original class="w-full h-full object-contain" %}
             <div x-data="{ openCaption: false, openImage: false }" class="absolute top-0 left-0 m-4 hidden md:block">
               <div class="flex justify-end space-x-2" :class="{ 'hidden': openCaption || openImage }" x-transition x-cloak>
-                <button @click="openCaption = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+                <button @click="openCaption = true"
+                        class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                   Caption
                 </button>
-                <button @click="openImage = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+                <button @click="openImage = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                   View Full Image
                 </button>
               </div>
-              <div :class="{ 'hidden': !openCaption }" x-transition x-cloak class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
+              <div :class="{ 'hidden': !openCaption }" x-transition x-cloak
+                   class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
                 <button @click="openCaption = false" class="absolute top-2 right-2 text-white">
                   &times;
                 </button>
@@ -247,13 +359,15 @@ <h1>{{ page.title }}</h1>
                   {{ page.image_second_column_caption }}
                 </p>
               </div>
-              <div :class="{ 'hidden': !openImage }" x-transition x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
-                <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4">
+              <div :class="{ 'hidden': !openImage }" x-transition x-cloak
+                   class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+                <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4 max-h-screen overflow-y-auto">
                   <button @click="openImage = false" class="absolute top-2 right-2 text-black">
-                    <span class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
+                    <span
+                      class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
                   </button>
-                  <div class="overflow-hidden">
-                    {% image page.image_second_column original class="w-full h-auto" %}
+                  <div class="flex justify-center items-center overflow-hidden">
+                    {% image page.image_second_column original class="w-auto max-h-[80vh]" %}
                   </div>
                   <p class="text-sm mt-2 text-center">
                     {{ page.image_second_column_caption }}
@@ -274,24 +388,40 @@ <h1>{{ page.title }}</h1>
           </div>
           <footer class="p-4 mt-auto">
             <div class="container mx-auto">
-              <div class="flex justify-center items-center mb-4 space-x-4">
-                {% if page.link_to_previous_page %}
-                  <a href="{% pageurl page.link_to_previous_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                    Previous
-                  </a>
-                {% endif %}
-                {% if page.link_to_next_page %}
-                  <a href="{% pageurl page.link_to_next_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                    Next
+              <div class="flex flex-col items-center mb-2 space-y-2">
+                <div class="flex space-x-2"> <!-- TODO: DONE -->
+                  {% if page.link_to_previous_page %}
+                    <a href="{% pageurl page.link_to_previous_page %}"
+                       class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                      Previous
+                    </a>
+                  {% endif %}
+                  {% if page.link_to_next_page %}
+                    <a href="{% pageurl page.link_to_next_page %}"
+                       class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                      Next
+                    </a>
+                  {% endif %}
+                </div>
+                <div class="flex flex-col items-center space-y-2">
+                  {% if page.link_to_subsection %}
+                    <a href="{% pageurl page.link_to_subsection %}"
+                       class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                      Skip to next section
+                    </a>
+                  {% endif %}
+                  <a href="/#exhibits"
+                     class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                    Take me to the beginning
                   </a>
-                {% endif %}
+                </div>
               </div>
             </div>
           </footer>
         </div>
       </div>
 
-      {# ===================== three column, images right ================== #}
+{# ===================== three column, images right ================== #}
 
     {% elif page.layout == 'three_column_images_right' %}
       <div class="flex flex-wrap">
@@ -306,34 +436,52 @@ <h1>{{ page.title }}</h1>
           </div>
           <footer class="p-4">
             <div class="container mx-auto">
-              <div class="flex justify-center items-center mb-4 space-x-4">
-                {% if page.link_to_previous_page %}
-                  <a href="{% pageurl page.link_to_previous_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                    Previous
-                  </a>
-                {% endif %}
-                {% if page.link_to_next_page %}
-                  <a href="{% pageurl page.link_to_next_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                    Next
+              <div class="flex flex-col items-center mb-2 space-y-2">
+                <div class="flex space-x-2"> <!-- TODO: DONE -->
+                  {% if page.link_to_previous_page %}
+                    <a href="{% pageurl page.link_to_previous_page %}"
+                       class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                      Previous
+                    </a>
+                  {% endif %}
+                  {% if page.link_to_next_page %}
+                    <a href="{% pageurl page.link_to_next_page %}"
+                       class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                      Next
+                    </a>
+                  {% endif %}
+                </div>
+                <div class="flex flex-col items-center space-y-2">
+                  {% if page.link_to_subsection %}
+                    <a href="{% pageurl page.link_to_subsection %}"
+                       class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                      Skip to next section
+                    </a>
+                  {% endif %}
+                  <a href="/#exhibits"
+                     class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                    Take me to the beginning
                   </a>
-                {% endif %}
+                </div>
               </div>
             </div>
           </footer>
         </div>
         <div class="w-full lg:w-1/3 relative">
           {% if page.image_first_column %}
-            {% image page.image_first_column original class="w-full h-screen object-cover" %}
+            {% image page.image_first_column original class="w-full h-full object-contain" %}
             <div x-data="{ openCaption: false, openImage: false }" class="absolute top-0 left-0 m-4 hidden md:block">
               <div class="flex justify-end space-x-2" :class="{ 'hidden': openCaption || openImage }" x-transition x-cloak>
-                <button @click="openCaption = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+                <button @click="openCaption = true"
+                        class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                   Caption
                 </button>
-                <button @click="openImage = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+                <button @click="openImage = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                   View Full Image
                 </button>
               </div>
-              <div :class="{ 'hidden': !openCaption }" x-transition x-cloak class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
+              <div :class="{ 'hidden': !openCaption }" x-transition x-cloak
+                   class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
                 <button @click="openCaption = false" class="absolute top-2 right-2 text-white">
                   &times;
                 </button>
@@ -341,13 +489,15 @@ <h1>{{ page.title }}</h1>
                   {{ page.image_first_column_caption }}
                 </p>
               </div>
-              <div :class="{ 'hidden': !openImage }" x-transition x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
-                <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4">
+              <div :class="{ 'hidden': !openImage }" x-transition x-cloak
+                   class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+                <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4 max-h-screen overflow-y-auto">
                   <button @click="openImage = false" class="absolute top-2 right-2 text-black">
-                    <span class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
+                    <span
+                      class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
                   </button>
-                  <div class="overflow-hidden">
-                    {% image page.image_first_column original class="w-full h-auto" %}
+                  <div class="flex justify-center items-center overflow-hidden">
+                    {% image page.image_first_column original class="w-auto max-h-[80vh]" %}
                   </div>
                   <p class="text-sm mt-2 text-center">
                     {{ page.image_first_column_caption }}
@@ -359,17 +509,19 @@ <h1>{{ page.title }}</h1>
         </div>
         <div class="w-full lg:w-1/3 relative">
           {% if page.image_second_column %}
-            {% image page.image_second_column original class="w-full h-screen object-cover" %}
+            {% image page.image_second_column original class="w-full h-full object-contain" %}
             <div x-data="{ openCaption: false, openImage: false }" class="absolute top-0 left-0 m-4 hidden md:block">
               <div class="flex justify-end space-x-2" :class="{ 'hidden': openCaption || openImage }" x-transition x-cloak>
-                <button @click="openCaption = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+                <button @click="openCaption = true"
+                        class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                   Caption
                 </button>
-                <button @click="openImage = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+                <button @click="openImage = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                   View Full Image
                 </button>
               </div>
-              <div :class="{ 'hidden': !openCaption }" x-transition x-cloak class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
+              <div :class="{ 'hidden': !openCaption }" x-transition x-cloak
+                   class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
                 <button @click="openCaption = false" class="absolute top-2 right-2 text-white">
                   &times;
                 </button>
@@ -377,13 +529,15 @@ <h1>{{ page.title }}</h1>
                   {{ page.image_second_column_caption }}
                 </p>
               </div>
-              <div :class="{ 'hidden': !openImage }" x-transition x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
-                <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4">
+              <div :class="{ 'hidden': !openImage }" x-transition x-cloak
+                   class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+                <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4 max-h-screen overflow-y-auto">
                   <button @click="openImage = false" class="absolute top-2 right-2 text-black">
-                    <span class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
+                    <span
+                      class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
                   </button>
-                  <div class="overflow-hidden">
-                    {% image page.image_second_column original class="w-full h-auto" %}
+                  <div class="flex justify-center items-center overflow-hidden">
+                    {% image page.image_second_column original class="w-auto max-h-[80vh]" %}
                   </div>
                   <p class="text-sm mt-2 text-center">
                     {{ page.image_second_column_caption }}
@@ -395,10 +549,10 @@ <h1>{{ page.title }}</h1>
         </div>
       </div>
 
-    {# =================== two thirds, left images ========================== #}
+{# =================== two thirds, left images ========================== #}
 
     {% elif page.layout == 'left_image_two_thirds' %}
-      <!-- Left Image Two Thirds Layout -->
+<!-- Left Image Two Thirds Layout -->
       <div class="lg:w-2/3">
         {% if page.image_comparisons.all %}
           {% for comparison in page.image_comparisons.all %}
@@ -408,8 +562,10 @@ <h1>{{ page.title }}</h1>
               <img-comparison-slider class="w-full h-full">
                 <img slot="first" class="object-scale-down h-screen m-auto" src="{{ img1.url }}" loading="lazy">
                 <img slot="second" class="object-scale-down h-screen m-auto" src="{{ img2.url }}" loading="lazy">
-                <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
-                  <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path>
+                <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100"
+                     viewBox="-8 -3 16 6">
+                  <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1"
+                        fill="#fff" vector-effect="non-scaling-stroke"></path>
                 </svg>
                 </img-comparison-slider>
               </div>
@@ -420,14 +576,15 @@ <h1>{{ page.title }}</h1>
           {% image page.image original class="w-full h-screen object-cover" %}
           <div x-data="{ openCaption: false, openImage: false }" class="absolute top-0 left-0 m-4 hidden md:block">
             <div class="flex justify-end space-x-2" :class="{ 'hidden': openCaption || openImage }" x-transition x-cloak>
-              <button @click="openCaption = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+              <button @click="openCaption = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                 Caption
               </button>
-              <button @click="openImage = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+              <button @click="openImage = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                 View Full Image
               </button>
             </div>
-            <div :class="{ 'hidden': !openCaption }" x-transition x-cloak class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
+            <div :class="{ 'hidden': !openCaption }" x-transition x-cloak
+                 class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
               <button @click="openCaption = false" class="absolute top-2 right-2 text-white">
                 &times;
               </button>
@@ -435,13 +592,15 @@ <h1>{{ page.title }}</h1>
                 {{ page.image_caption }}
               </p>
             </div>
-            <div :class="{ 'hidden': !openImage }" x-transition x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
-              <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4">
+            <div :class="{ 'hidden': !openImage }" x-transition x-cloak
+                 class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+              <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4 max-h-screen overflow-y-auto">
                 <button @click="openImage = false" class="absolute top-2 right-2 text-black">
-                  <span class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
+                  <span
+                    class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
                 </button>
-                <div class="overflow-hidden">
-                  {% image page.image original class="w-full h-auto" %}
+                <div class="flex justify-center items-center overflow-hidden">
+                  {% image page.image original class="w-auto max-h-[80vh]" %}
                 </div>
                 <p class="text-sm mt-2 text-center">
                   {{ page.image_caption }}
@@ -458,47 +617,59 @@ <h1>{{ page.title }}</h1>
           </div>
         {% endfor %}
       </div>
-      <!-- Right Column: Content -->
+<!-- Right Column: Content -->
       <div class="lg:w-1/3 flex flex-col justify-between overflow-y-auto h-screen">
         <div class="prose p-8 flex-grow">
           {% if page.display_title %}
             <h1>{{ page.title }}</h1>
-          {% endif %}          <div class="text-justify">
+          {% endif %} <div class="text-justify">
             {{ page.body|richtext }}
           </div>
         </div>
 
         <footer class="p-4">
           <div class="container mx-auto">
-            <div class="flex justify-center items-center mb-4 space-x-4">
-              {% if page.link_to_previous_page %}
-                <a href="{% pageurl page.link_to_previous_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                  Previous
-                </a>
-              {% endif %}
-              {% if page.link_to_next_page %}
-                <a href="{% pageurl page.link_to_next_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                  Next
+            <div class="flex flex-col items-center mb-2 space-y-2">
+              <div class="flex space-x-2">
+                {% if page.link_to_previous_page %}
+                  <a href="{% pageurl page.link_to_previous_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                    Previous
+                  </a>
+                {% endif %}
+                {% if page.link_to_next_page %}
+                  <a href="{% pageurl page.link_to_next_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                    Next
+                  </a>
+                {% endif %}
+              </div>
+              <div class="flex flex-col items-center space-y-2">
+                {% if page.link_to_subsection %}
+                  <a href="{% pageurl page.link_to_subsection %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                    Skip to next section
+                  </a>
+                {% endif %}
+                <a href="/#exhibits" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                  Take me to the beginning
                 </a>
-              {% endif %}
+              </div>
             </div>
           </div>
         </footer>
       </div>
     {% elif page.layout == 'right_image_two_thirds' %}
-      <!-- Right Image Two Thirds Layout -->
+<!-- Right Image Two Thirds Layout -->
       <div class="lg:w-1/3 flex flex-col justify-between overflow-y-auto h-screen">
         <div class="prose p-8 flex-grow">
           {% if page.display_title %}
             <h1>{{ page.title }}</h1>
-          {% endif %}          <div class="text-justify">
+          {% endif %} <div class="text-justify">
             {{ page.body|richtext }}
           </div>
         </div>
-        <footer class="p-2">
+        <footer class="p-4">
           <div class="container mx-auto">
             <div class="flex flex-col items-center mb-2 space-y-2">
-              <div class="flex space-x-2"> <!-- TODO: DONE -->
+              <div class="flex space-x-2">
                 {% if page.link_to_previous_page %}
                   <a href="{% pageurl page.link_to_previous_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
                     Previous
@@ -513,7 +684,7 @@ <h1>{{ page.title }}</h1>
               <div class="flex flex-col items-center space-y-2">
                 {% if page.link_to_subsection %}
                   <a href="{% pageurl page.link_to_subsection %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                    Read next subsection
+                    Skip to next section
                   </a>
                 {% endif %}
                 <a href="/#exhibits" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
@@ -524,7 +695,7 @@ <h1>{{ page.title }}</h1>
           </div>
         </footer>
       </div>
-      <!-- Right Column: Image -->
+<!-- Right Column: Image -->
       <div class="lg:w-2/3">
         {% if page.image_comparisons.all %}
           {% for comparison in page.image_comparisons.all %}
@@ -534,8 +705,10 @@ <h1>{{ page.title }}</h1>
               <img-comparison-slider class="w-full h-full">
                 <img slot="first" class="object-scale-down h-screen m-auto" src="{{ img1.url }}" loading="lazy">
                 <img slot="second" class="object-scale-down h-screen m-auto" src="{{ img2.url }}" loading="lazy">
-                <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
-                  <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path>
+                <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100"
+                     viewBox="-8 -3 16 6">
+                  <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1"
+                        fill="#fff" vector-effect="non-scaling-stroke"></path>
                 </svg>
                 </img-comparison-slider>
               </div>
@@ -549,14 +722,15 @@ <h1>{{ page.title }}</h1>
             {% image page.image original class="w-full h-screen object-cover" %}
             <div x-data="{ openCaption: false, openImage: false }" class="absolute top-0 right-0 m-4 hidden md:block">
               <div class="flex justify-end space-x-2" :class="{ 'hidden': openCaption || openImage }" x-transition x-cloak>
-                <button @click="openCaption = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+                <button @click="openCaption = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                   Caption
                 </button>
-                <button @click="openImage = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+                <button @click="openImage = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                   View Full Image
                 </button>
               </div>
-              <div :class="{ 'hidden': !openCaption }" x-transition x-cloak class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
+              <div :class="{ 'hidden': !openCaption }" x-transition x-cloak
+                   class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
                 <button @click="openCaption = false" class="absolute top-2 right-2 text-white">
                   &times;
                 </button>
@@ -564,13 +738,15 @@ <h1>{{ page.title }}</h1>
                   {{ page.image_caption }}
                 </p>
               </div>
-              <div :class="{ 'hidden': !openImage }" x-transition x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
-                <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4">
+              <div :class="{ 'hidden': !openImage }" x-transition x-cloak
+                   class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+                <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4 max-h-screen overflow-y-auto">
                   <button @click="openImage = false" class="absolute top-2 right-2 text-black">
-                    <span class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
+                    <span
+                      class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
                   </button>
                   <div class="overflow-hidden">
-                    {% image page.image original class="w-full h-auto" %}
+                    {% image page.image original class="w-auto max-h-[80vh]" %}
                   </div>
                   <p class="text-sm mt-2 text-center">
                     {{ page.image_caption }}
@@ -589,7 +765,7 @@ <h1>{{ page.title }}</h1>
         {% endfor %}
       </div>
     {% elif page.layout == 'half_and_half' %}
-      <!-- Half and Half Layout -->
+<!-- Half and Half Layout -->
       <div class="lg:w-1/2 flex flex-col justify-between overflow-y-auto h-screen">
         <div class="prose p-8 flex-grow">
           {% if page.display_title %}
@@ -604,23 +780,27 @@ <h1>{{ page.title }}</h1>
             <div class="flex flex-col items-center mb-2 space-y-2">
               <div class="flex space-x-2">
                 {% if page.link_to_previous_page %}
-                  <a href="{% pageurl page.link_to_previous_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                  <a href="{% pageurl page.link_to_previous_page %}"
+                     class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
                     Previous
                   </a>
                 {% endif %}
                 {% if page.link_to_next_page %}
-                  <a href="{% pageurl page.link_to_next_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                  <a href="{% pageurl page.link_to_next_page %}"
+                     class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
                     Next
                   </a>
                 {% endif %}
               </div>
               <div class="flex flex-col items-center space-y-2">
-                <a href="/#exhibits" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                <a href="/#exhibits"
+                   class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
                   Take me to the beginning
                 </a>
                 {% if page.link_to_subsection %}
-                  <a href="{% pageurl page.link_to_subsection %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                    Read next subsection
+                  <a href="{% pageurl page.link_to_subsection %}"
+                     class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                    Skip to next section
                   </a>
                 {% endif %}
               </div>
@@ -628,7 +808,7 @@ <h1>{{ page.title }}</h1>
           </div>
         </footer>
       </div>
-    <!-- Right Column: Image -->
+<!-- Right Column: Image -->
       <div class="lg:w-1/2">
         {% if page.image_comparisons.all %}
           {% for comparison in page.image_comparisons.all %}
@@ -638,8 +818,10 @@ <h1>{{ page.title }}</h1>
               <img-comparison-slider class="w-full h-full">
                 <img slot="first" class="object-scale-down h-screen m-auto" src="{{ img1.url }}" loading="lazy">
                 <img slot="second" class="object-scale-down h-screen m-auto" src="{{ img2.url }}" loading="lazy">
-                <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
-                  <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path>
+                <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100"
+                     viewBox="-8 -3 16 6">
+                  <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1"
+                        fill="#fff" vector-effect="non-scaling-stroke"></path>
                 </svg>
                 </img-comparison-slider>
               </div>
@@ -650,14 +832,15 @@ <h1>{{ page.title }}</h1>
           {% image page.image original class="w-full h-screen object-cover" %}
           <div x-data="{ openCaption: false, openImage: false }" class="absolute top-0 right-0 m-4 hidden md:block">
             <div class="flex justify-end space-x-2" :class="{ 'hidden': openCaption || openImage }" x-transition x-cloak>
-              <button @click="openCaption = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+              <button @click="openCaption = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                 Caption
               </button>
-              <button @click="openImage = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+              <button @click="openImage = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                 View Full Image
               </button>
             </div>
-            <div :class="{ 'hidden': !openCaption }" x-transition x-cloak class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
+            <div :class="{ 'hidden': !openCaption }" x-transition x-cloak
+                 class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
               <button @click="openCaption = false" class="absolute top-2 right-2 text-white">
                 &times;
               </button>
@@ -665,13 +848,15 @@ <h1>{{ page.title }}</h1>
                 {{ page.image_caption }}
               </p>
             </div>
-            <div :class="{ 'hidden': !openImage }" x-transition x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
-              <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4">
+            <div :class="{ 'hidden': !openImage }" x-transition x-cloak
+                 class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+              <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4 max-h-screen overflow-y-auto">
                 <button @click="openImage = false" class="absolute top-2 right-2 text-black">
-                  <span class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
+                  <span
+                    class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
                 </button>
-                <div class="overflow-hidden">
-                  {% image page.image original class="w-full h-auto" %}
+                <div class="flex justify-center items-center overflow-hidden">
+                  {% image page.image original class="w-auto max-h-[80vh]" %}
                 </div>
                 <p class="text-sm mt-2 text-center">
                   {{ page.image_caption }}
@@ -689,7 +874,7 @@ <h1>{{ page.title }}</h1>
         {% endfor %}
       </div>
     {% elif page.layout == 'full_screen' %}
-      <!-- Full Screen Layout -->
+<!-- Full Screen Layout -->
       <div class="relative w-full h-screen">
         {% if page.image_comparisons.all %}
           {% for comparison in page.image_comparisons.all %}
@@ -699,8 +884,10 @@ <h1>{{ page.title }}</h1>
               <img-comparison-slider class="w-full h-full">
                 <img slot="first" class="w-full h-full object-cover" src="{{ img1.url }}" loading="lazy">
                 <img slot="second" class="w-full h-full object-cover" src="{{ img2.url }}" loading="lazy">
-                <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
-                  <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path>
+                <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100"
+                     viewBox="-8 -3 16 6">
+                  <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1"
+                        fill="#fff" vector-effect="non-scaling-stroke"></path>
                 </svg>
                 </img-comparison-slider>
               </div>
@@ -712,11 +899,12 @@ <h1>{{ page.title }}</h1>
           {% if page.image_caption %}
             <div x-data="{ open: false }" class="fixed top-0 right-0 m-4 hidden md:block z-50">
               <div class="flex justify-end" :class="{ 'hidden': open }" x-transition x-cloak>
-                <button @click="open = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded z-50">
+                <button @click="open = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                   Caption
                 </button>
               </div>
-              <div :class="{ 'hidden': !open }" x-transition x-cloak class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative z-50">
+              <div :class="{ 'hidden': !open }" x-transition x-cloak
+                   class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative z-50">
                 <button @click="open = false" class="absolute top-2 right-2 text-white z-50">
                   &times;
                 </button>
@@ -739,7 +927,7 @@ <h1>{{ page.title }}</h1>
         <div class="bg-white bg-opacity-90 p-8 rounded shadow-lg max-w-3xl mx-auto">
           {% if page.display_title %}
             <h1>{{ page.title }}</h1>
-          {% endif %}            <div class="prose text-justify">
+          {% endif %} <div class="prose text-justify">
             {{ page.body|richtext }}
           </div>
         </div>
@@ -748,20 +936,23 @@ <h1>{{ page.title }}</h1>
         <div class="flex flex-col items-center mb-2 space-y-2">
           <div class="flex space-x-2"> <!-- TODO: DONE -->
             {% if page.link_to_previous_page %}
-              <a href="{% pageurl page.link_to_previous_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+              <a href="{% pageurl page.link_to_previous_page %}"
+                 class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
                 Previous
               </a>
             {% endif %}
             {% if page.link_to_next_page %}
-              <a href="{% pageurl page.link_to_next_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+              <a href="{% pageurl page.link_to_next_page %}"
+                 class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
                 Next
               </a>
             {% endif %}
           </div>
           <div class="flex flex-col items-center space-y-2">
             {% if page.link_to_subsection %}
-              <a href="{% pageurl page.link_to_subsection %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                Read next subsection
+              <a href="{% pageurl page.link_to_subsection %}"
+                 class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                Skip to next section
               </a>
             {% endif %}
             <a href="/#exhibits" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
@@ -772,12 +963,12 @@ <h1>{{ page.title }}</h1>
       </div>
       </div>
     {% elif page.layout == 'wide_image' %}
-      <!-- Wide Image Layout -->
+<!-- Wide Image Layout -->
       <div class="w-full min-h-screen flex flex-col">
         <div class="prose p-8 mx-auto max-w-screen-xl flex-grow">
           {% if page.display_title %}
             <h1>{{ page.title }}</h1>
-          {% endif %}          <div class="text-justify">
+          {% endif %} <div class="text-justify">
             {{ page.body|richtext }}
           </div>
         </div>
@@ -789,8 +980,10 @@ <h1>{{ page.title }}</h1>
               <img-comparison-slider class="w-full h-full">
                 <img slot="first" class="w-full h-full object-cover" src="{{ img1.url }}" loading="lazy">
                 <img slot="second" class="w-full h-full object-cover" src="{{ img2.url }}" loading="lazy">
-                <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
-                  <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path>
+                <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100"
+                     viewBox="-8 -3 16 6">
+                  <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1"
+                        fill="#fff" vector-effect="non-scaling-stroke"></path>
                 </svg>
                 </img-comparison-slider>
               </div>
@@ -798,30 +991,34 @@ <h1>{{ page.title }}</h1>
           <script defer src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"></script>
           <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css" />
         {% elif page.image %}
-          {% image page.image original class="w-full h-screen object-cover" %}
+          {% image page.image original class="w-full max-h-[80vh] object-contain" %}
           <div class="absolute bottom-0 left-0 w-full p-4">
             <footer class="p-4 mt-auto">
               <div class="container mx-auto">
                 <div class="flex flex-col items-center mb-2 space-y-2">
                   <div class="flex space-x-2">
                     {% if page.link_to_previous_page %}
-                      <a href="{% pageurl page.link_to_previous_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                      <a href="{% pageurl page.link_to_previous_page %}"
+                         class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
                         Previous
                       </a>
                     {% endif %}
                     {% if page.link_to_next_page %}
-                      <a href="{% pageurl page.link_to_next_page %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                      <a href="{% pageurl page.link_to_next_page %}"
+                         class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
                         Next
                       </a>
                     {% endif %}
                   </div>
                   <div class="flex flex-col items-center space-y-2">
-                    <a href="/#exhibits" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                    <a href="/#exhibits"
+                       class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
                       Take me to the beginning
                     </a>
                     {% if page.link_to_subsection %}
-                      <a href="{% pageurl page.link_to_subsection %}" class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
-                        Read next subsection
+                      <a href="{% pageurl page.link_to_subsection %}"
+                         class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-1 px-3 rounded-full text-sm">
+                        Skip to next section
                       </a>
                     {% endif %}
                   </div>
@@ -830,20 +1027,39 @@ <h1>{{ page.title }}</h1>
             </footer>
           </div>
           {% if page.image_caption %}
-            <div x-data="{ open: false }" class="fixed bottom-0 right-0 m-4 hidden md:block">
-              <div class="flex justify-end" :class="{ 'hidden': open }" x-transition x-cloak>
-                <button @click="open = true" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
+            <div x-data="{ openCaption: false, openImage: false }" class="absolute top-0 right-0 m-4 hidden md:block">
+              <div class="flex justify-end space-x-2" :class="{ 'hidden': openCaption || openImage }" x-transition x-cloak>
+                <button @click="openCaption = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
                   Caption
                 </button>
+                <button @click="openImage = true" class="bg-slate-500 bg-opacity-50 hover:bg-opacity-100 hover:bg-slate-700 text-white text-sm font-bold py-2 px-4 rounded">
+                  View Full Image
+                </button>
               </div>
-              <div :class="{ 'hidden': !open }" x-transition x-cloak class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
-                <button @click="open = false" class="absolute top-2 right-2 text-white">
+              <div :class="{ 'hidden': !openCaption }" x-transition x-cloak
+                   class="mt-2 p-4 bg-gray-900 text-white rounded shadow-lg w-64 relative">
+                <button @click="openCaption = false" class="absolute top-2 right-2 text-white">
                   &times;
                 </button>
                 <p class="text-sm">
                   {{ page.image_caption }}
                 </p>
               </div>
+              <div :class="{ 'hidden': !openImage }" x-transition x-cloak
+                   class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
+                <div class="relative bg-white p-4 rounded shadow-lg w-11/12 lg:w-3/4 max-h-screen overflow-y-auto">
+                  <button @click="openImage = false" class="absolute top-2 right-2 text-black">
+                    <span
+                      class="bg-slate-700 hover:bg-red-800 rounded p-2 flex items-center justify-center w-8 h-8 text-white">&times;</span>
+                  </button>
+                  <div class="flex justify-center items-center overflow-hidden">
+                    {% image page.image original class="w-auto max-h-[80vh]" %}
+                  </div>
+                  <p class="text-sm mt-2 text-center">
+                    {{ page.image_caption }}
+                  </p>
+                </div>
+              </div>
             </div>
           {% endif %}
         {% endif %}
diff --git a/static/css/style.css b/static/css/style.css
index 23b7d09..7b46b14 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -173,3 +173,20 @@ tr:nth-child(even) {
     right: -8%;
   }
 }
+
+/* YouTube embed fix */
+/* Requires WAGTAILEMBEDS_RESPONSIVE_HTML = True */
+/* https://docs.wagtail.org/en/stable/topics/writing_templates.html */
+.responsive-object {
+  position: relative;
+}
+
+.responsive-object iframe,
+.responsive-object object,
+.responsive-object embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/templates/base_exhibit.html b/templates/base_exhibit.html
index 3c2e350..e672093 100644
--- a/templates/base_exhibit.html
+++ b/templates/base_exhibit.html
@@ -22,7 +22,9 @@
       </main>
       <div x-data="{ open: false }" class="fixed bottom-0 left-0 w-full">
         <div class="flex justify-center">
-          <button @click="open = !open" class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full w-32 h-2 mb-2"></button>
+          <button @click="open = !open" class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full w-32 h-6 mb-2 flex items-center justify-center">
+            <i :class="{ 'rotate-180': open }" class="fas fa-chevron-up transition-transform transform"></i>
+          </button>
         </div>
         <footer x-show="open" x-transition:enter="transition ease-out duration-300 transform"
                 x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0"
diff --git a/templates/index.html b/templates/index.html
index 23e5c80..f19fb3e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -28,14 +28,17 @@ <h1 class="text-4xl md:text-6xl font-bold">Connecting Threads</h1>
       <h2 class="text-3xl md:text-3xl font-bold mb-8">Explore the story by choosing one of the regions below:</h2>
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
         {% for exhibit in exhibits %}
-          <div class="relative group">
-            <div class="w-full h-64 relative">
-              <a href="{{ exhibit.full_url }}">
-                {% image exhibit.image original class="w-full h-full object-cover" %}
-                <div class="absolute inset-0 bg-black opacity-50 flex items-center justify-center text-white text-xl font-bold group-hover:opacity-75 transition-opacity">{{ exhibit.title }}</div>
-              </a>
+        {# TODO: This is a hacky fix we'll want to properly resolve at some point. #}
+          {% if exhibit.title != "Exhibits" %}
+            <div class="relative group">
+              <div class="w-full h-64 relative">
+                <a href="{{ exhibit.full_url }}">
+                  {% image exhibit.image original class="w-full h-full object-cover" %}
+                  <div class="absolute inset-0 bg-black opacity-50 flex items-center justify-center text-white text-xl font-bold group-hover:opacity-75 transition-opacity">{{ exhibit.title }}</div>
+                </a>
+              </div>
             </div>
-          </div>
+          {% endif %}
         {% endfor %}
       </div>
     </div>