From 18164d7de82e2672807abeb9a41ec5de0edb5f78 Mon Sep 17 00:00:00 2001
From: Nasir Anthony Montalvo <nasiranthonymontalvo@gmail.com>
Date: Mon, 26 Jan 2026 18:36:55 -0600
Subject: [PATCH] image and CSS edits

---
 _layouts/about.html   | 39 +++++++++++++++++++++++++++
 _sass/_custom.scss    | 62 ++++++++++++++++++++++++++++++++-----------
 pages/data.md         | 37 +++++++++++++++-----------
 pages/read/soakies.md |  7 ++---
 4 files changed, 112 insertions(+), 33 deletions(-)

diff --git a/_layouts/about.html b/_layouts/about.html
index 40753e2..d884cde 100644
--- a/_layouts/about.html
+++ b/_layouts/about.html
@@ -80,6 +80,45 @@ layout: default
     </div>
 
 </div>
+
+<!-- Lightbox Modal (This is globally accessible across pages) -->
+<div class="modal fade" id="image-lightbox" tabindex="-1" aria-labelledby="image-lightboxLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body text-center">
+                <img id="lightbox-img" src="" alt="Image" class="img-fluid">
+                <p id="lightbox-caption" class="mt-3 text-muted"></p>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        // Handle lightbox image click and caption display
+        const imageLinks = document.querySelectorAll('a[data-bs-toggle="lightbox"]');
+        
+        imageLinks.forEach(link => {
+            link.addEventListener('click', function (e) {
+                e.preventDefault();  // Prevent default action (no page refresh)
+                
+                // Get the image and caption
+                const imgSrc = this.getAttribute('href');
+                const caption = this.getAttribute('data-caption');
+                
+                // Set the lightbox image source and caption
+                document.getElementById('lightbox-img').src = imgSrc;
+                document.getElementById('lightbox-caption').textContent = caption;
+
+                // Show the modal
+                const myModal = new bootstrap.Modal(document.getElementById('image-lightbox'));
+                myModal.show();
+            });
+        });
+    });
+</script>
 <script>
 document.addEventListener("DOMContentLoaded", function () {
   const tocLinks = document.querySelectorAll("#about-toc-list a");
diff --git a/_sass/_custom.scss b/_sass/_custom.scss
index f44d9f0..fbc33f9 100644
--- a/_sass/_custom.scss
+++ b/_sass/_custom.scss
@@ -886,7 +886,7 @@ blockquote {
 }
 .image-container {
     text-align: center;
-    max-width: 80%;  /* Set max-width for the image and caption container */
+    max-width: 100%;  /* Set max-width for the image and caption container */
     margin: 0 auto;  /* Center the container horizontally */
 }
 
@@ -901,24 +901,47 @@ blockquote {
     margin-top: 0.5rem;  /* Space between the image and caption */
     text-align: center;
 }
-.suggestions-container {
-    position: absolute;
-    width: 100%;
-    max-height: 200px;
-    overflow-y: auto;
-    background-color: white;
-    border: 1px solid #ccc;
-    z-index: 100;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+.footnotes {
+  overflow-x: hidden;
+  max-width: 100%;
 }
 
-.suggestion-item {
-    padding: 8px;
-    cursor: pointer;
+.footnotes p {
+  word-wrap: break-word;
+  word-break: break-all;
 }
 
-.suggestion-item:hover {
-    background-color: #f0f0f0;
+.footnotes a {
+  display: inline-block;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 768px) {
+  .footnotes p {
+    font-size: 14px;
+  }
+
+  .footnotes a {
+    font-size: 12px;
+  }
+}
+/* Make sure the images are responsive within the modal */
+.modal-body img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Optional: To make captions look more attractive within the modal */
+.modal-body p {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: black;
+}
+#image-lightbox .modal-body #lightbox-caption {
+    color: black !important;
 }
 
 
@@ -927,3 +950,12 @@ blockquote {
 
 
 
+
+
+
+
+
+
+
+
+
diff --git a/pages/data.md b/pages/data.md
index 37cbd6f..8530d72 100644
--- a/pages/data.md
+++ b/pages/data.md
@@ -62,12 +62,13 @@ In a centralized system, a company, like Google, for example, owns massive data
 
 In 2022, Alphabet (Google’s parent company) made [$224 billion](https://proton.me/blog/google-privacy-washing)–nearly 80% of its total revenue–from advertising: which includes Google Search, Google networks, and YouTube ads. Our personal data directly fuels this advertising revenue.
 
-
 <div class="image-container">
-<img src="/assets/img/Centralized-Vs-Decentralized-Vs-Distributed-systems.png" alt="a blue diagram with three different topologies illustrating the differences between centralized, decentralized and distributed networks." class="img-fluid">
-<figcaption class="figure-caption text-center text-muted">
-    An overview of centralized, decentralized, and distributed networks, illustrating the key differences in their structures and control mechanisms. In a centralized network, all nodes are connected under a single, central authority In a decentralized network, no single authority server controls the nodes; they operate with individual entity, typically with multiple hubs. (Truong, Nguyen & Jayasinghe, Upul & Um, Tai-Won & Lee, Gyu Myoung. (2016). A Survey on Trust Computation in the Internet of Things)
-</figcaption>
+    <a href="/assets/img/Centralized-Vs-Decentralized-Vs-Distributed-systems.png" data-bs-toggle="lightbox" data-caption=" An overview of centralized, decentralized, and distributed networks, illustrating the key differences in their structures and control mechanisms. In a centralized network, all nodes are connected under a single, central authority In a decentralized network, no single authority server controls the nodes; they operate with individual entity, typically with multiple hubs. (Truong, Nguyen & Jayasinghe, Upul & Um, Tai-Won & Lee, Gyu Myoung. (2016). A Survey on Trust Computation in the Internet of Things)">
+        <img src="/assets/img/Centralized-Vs-Decentralized-Vs-Distributed-systems.png" alt="a diagram with three different topologies illustrating the differences between centralized, decentralized and distributed networks." class="img-fluid">
+    </a>
+    <figcaption class="figure-caption text-center text-muted">
+         An overview of centralized, decentralized, and distributed networks. ("A Survey on Trust Computation in the Internet of Things," 2016)
+    </figcaption>
 </div>
 
 <br>
@@ -81,9 +82,11 @@ This archive might look like a regular-degular website, but under the hood, it's
 ## 1. The Website – Built with CollectionBuilder (Lib-Static methodology)
 
 <div class="image-container">
-    <img src="/assets/img/lib-static-values.png" alt="a table explaining the Lib-Static Methodology, broken into four keypoints." class="img-fluid">
+    <a href="/assets/img/lib-static-values.png" data-bs-toggle="lightbox" data-caption="Collection-Builder is a project meant to follow the Lib-Static approach. The Lib-Static approach, created in 2018 by Evan Williamson, Devin Becker and Olivia Wikle, 'focuses on practical, sustainable workflows using data-driven static web templates hosted on simplified infrastructure while leveraging (and building) the in-house specialized skills of librarians in metadata, data, and organization. This provides librarians unique agency and ownership over their systems, as well as meaningful opportunities for professional development leading to fundamental digital skills.' (Lib-Static)">
+        <img src="/assets/img/lib-static-values.png" alt="a table explaining the Lib-Static Methodology, broken into four keypoints." class="img-fluid">
+    </a>
     <figcaption class="figure-caption text-center text-muted">
-        Collection-Builder is a project meant to follow the Lib-Static approach. The Lib-Static approach, created in 2018 by Evan Williamson, Devin Becker and Olivia Wikle, "focuses on practical, sustainable workflows using data-driven static web templates hosted on simplified infrastructure while leveraging (and building) the in-house specialized skills of librarians in metadata, data, and organization. This provides librarians unique agency and ownership over their systems, as well as meaningful opportunities for professional development leading to fundamental digital skills." (Lib-Static)
+        Collection-Builder is a project meant to follow the Lib-Static approach. (Evan Williamson, Devin Becker and Olivia Wikle, Lib-Static (2018))
     </figcaption>
 </div>
 
@@ -101,10 +104,12 @@ This means:
 ## 2. The Archive – Files being served via IPFS (InterPlanetary File System)
 
 <div class="image-container">
-<img src="/assets/img/Centralized-data-storage-system-vs-IPFS-interplanetary-file-system-1-1024x576.webp" alt="" class="img-fluid">
-<figcaption class="figure-caption text-center text-muted">
-    A graphic illustrating the fundamental differences between a traditional centralized client-server system and the decentralized architecture of the InterPlanetary File System (IPFS). (Extrimian, "IPFS (InterPlanetary File System) Wiki," 2024)
-</figcaption>
+    <a href="/assets/img/Centralized-data-storage-system-vs-IPFS-interplanetary-file-system-1-1024x576.webp" data-bs-toggle="lightbox" data-caption="A graphic illustrating the fundamental differences between a traditional centralized client-server system and the decentralized architecture of the InterPlanetary File System (IPFS). (Extrimian, 'IPFS (InterPlanetary File System) Wiki,' 2024)">
+        <img src="/assets/img/Centralized-data-storage-system-vs-IPFS-interplanetary-file-system-1-1024x576.webp" alt="" class="img-fluid">
+    </a>
+    <figcaption class="figure-caption text-center text-muted">
+        Centralized system (e.g Google Drive) versus the IPFS system. (Extrimian, "IPFS (InterPlanetary File System) Wiki," 2024)
+    </figcaption>
 </div>
 
 <br>
@@ -122,10 +127,12 @@ This makes our archive highly resistant to deletion or takedown, and ensures fil
 ## 3. The Cloud – We run our own digital space
 
 <div class="image-container">
-<img src="/assets/img/internet_topologies_with_ynh-0393b688fbcafc252b94fa13ef9635c6.png" alt="" class="img-fluid">
-<figcaption class="figure-caption text-center text-muted">
-    A graphic from YunoHost illustrating the concept of "self-hosting": meaning, in this case, owning and administrating your own server, typically at home, to host your personal data and services yourself instead of relying exclusively on third parties. (YunoHost Docs, "About self-hosting")
-</figcaption>
+    <a href="/assets/img/internet_topologies_with_ynh-0393b688fbcafc252b94fa13ef9635c6.png" data-bs-toggle="lightbox" data-caption="A graphic from YunoHost illustrating the concept of 'self-hosting': meaning, in this case, owning and administrating your own server, typically at home, to host your personal data and services yourself instead of relying exclusively on third parties. (YunoHost Docs, 'About self-hosting')">
+        <img src="/assets/img/internet_topologies_with_ynh-0393b688fbcafc252b94fa13ef9635c6.png" alt="" class="img-fluid">
+    </a>
+    <figcaption class="figure-caption text-center text-muted">
+       YunoHost's self-hosting. (YunoHost Docs, 'About self-hosting')
+    </figcaption>
 </div>
 
 <br>
diff --git a/pages/read/soakies.md b/pages/read/soakies.md
index db32f53..a7cbfcc 100644
--- a/pages/read/soakies.md
+++ b/pages/read/soakies.md
@@ -107,7 +107,7 @@ According to a 2019 study by Greggor Mattson[^1], a professor of Sociology at Ob
 In short, we are losing our safe spaces.
 
 <figure style="display: inline-block; max-width: 75%;">
-  <img src="/assets/img/10.1177_2378023119894832-fig1.jpg" 
+  <img src="/assets/img/10.1177_2378023119894832-fig1.jpg"
        alt="Gay bar listings in Damron guides at five-year intervals, 1977–2017 and 2019" 
        style="max-width: 100%; height: auto;">
   <figcaption class="figure-caption text-center text-muted" style="font-size: 0.85rem;" margin-top="0.5rem">
@@ -452,7 +452,7 @@ Carrington-Balenciaga, Gee Gee (videographer), in private interview on Soakie’
 
 Colston, Jerry and Robinson, Eric (founders of Soakie’s as a Black gay bar), in private interview on Soakie’s, Kansas City, MO, 2023.
 
-DeAngelo, Dory. MAIN STREET. 1999. Missouri Valley Special Collections, Kansas City Public Library, Kansas City, MO. https://kchistory.org/image/main-street-7?solr_nav%5Bid%5D=4124fac5de772c67db87&amp;solr_nav%5Bpage%5D=0&amp;solr_nav%5Boffset%5D=0. 
+DeAngelo, Dory. MAIN STREET. 1999. Missouri Valley Special Collections, Kansas City Public Library, Kansas City, MO. https://kchistory.org/image/main-street-7. 
 
 Jackson, David W. “Kansas City’s LGBTQIA Bar Census.” Gay and Lesbian Archive of Mid-America, LaBudde Special Collections, University of Missouri-Kansas City, 2016. https://libweb.umkc.edu/content/images/glama/timeline/jackson-book-bar-list.pdf. 
 
@@ -464,7 +464,7 @@ Martinez, Prince. “Who Are the Top Event/Party Promoters around the Country fo
 
 Mattson, Greggor. “Are Gay Bars Closing? Using Business Listings to Infer Rates of Gay Bar Closure in the United States, 1977–2019.” Socius: Sociological Research for a Dynamic World 5 (December 2019): 237802311989483. https://doi.org/10.1177/2378023119894832. 
 
-millerswiller. “Yup. Do you remember this nearby bar/’restaurant.’ Reddit. August, 10, 2016. https://www.reddit.com/r/kansascity/comments/4x0ze1/comment/d6byps2/?utm_source=share&utm_medium=web2x&context=3
+millerswiller. “Yup. Do you remember this nearby bar/’restaurant.’ Reddit. August, 10, 2016. https://www.reddit.com/r/kansascity/comments/4x0ze1/comment/d6byps2/
 
 Montalvo, Nasir. “Men of All Colors Together: Fighting Racism amidst Gay Men in the 80’s.” Kansas City Defender, July 28, 2023. https://kansascitydefender.com/lgbtqia2/men-of-all-colors-together/. 
 
@@ -482,6 +482,7 @@ Thompson, Amy. “GENTRIFICATION THROUGH THE EYES (AND LENSES) OF KANSAS CITY RE
 https://mospace.umsystem.edu/xmlui/bitstream/handle/10355/14577/research.pdf?sequence=2&amp;isAllowed=y.
 
 ### Footnotes
+
 [^1]: Greggor Mattson. “Are Gay Bars Closing? Using Business Listings to Infer Rates of Gay Bar Closure in the United States, 1977–2019.” Socius: Sociological Research for a Dynamic World 5 (December 2019): 237802311989483. https://doi.org/10.1177/2378023119894832. 
 [^2]: millerswiller. “Yup. Do you remember this nearby bar/’restaurant.’ Reddit. August, 10, 2016. https://www.reddit.com/r/kansascity/comments/4x0ze1/comment/d6byps2/?utm_source=share&utm_medium=web2x&context=3 
 [^3]: Dory DeAngelo. MAIN STREET. 1999. Missouri Valley Special Collections, Kansas City Public Library, Kansas City, MO. https://kchistory.org/image/main-street-7?solr_nav%5Bid%5D=4124fac5de772c67db87&amp;solr_nav%5Bpage%5D=0&amp;solr_nav%5Boffset%5D=0.