image and CSS edits

_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");

_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 {
+.footnotes {
-    position: absolute;
+  overflow-x: hidden;
-    width: 100%;
+  max-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);
 }
 
-.suggestion-item {
+.footnotes p {
-    padding: 8px;
+  word-wrap: break-word;
-    cursor: pointer;
+  word-break: break-all;
 }
 
-.suggestion-item:hover {
+.footnotes a {
-    background-color: #f0f0f0;
+  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 {
 
 
 
+
+
+
+
+
+
+
+
+

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">
+    <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)">
-<figcaption class="figure-caption text-center text-muted">
+        <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">
-    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)
+    </a>
-</figcaption>
+    <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">
+    <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)">
-<figcaption class="figure-caption text-center text-muted">
+        <img src="/assets/img/Centralized-data-storage-system-vs-IPFS-interplanetary-file-system-1-1024x576.webp" alt="" class="img-fluid">
-    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)
+    </a>
-</figcaption>
+    <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">
+    <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')">
-<figcaption class="figure-caption text-center text-muted">
+        <img src="/assets/img/internet_topologies_with_ynh-0393b688fbcafc252b94fa13ef9635c6.png" alt="" class="img-fluid">
-    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")
+    </a>
-</figcaption>
+    <figcaption class="figure-caption text-center text-muted">
+       YunoHost's self-hosting. (YunoHost Docs, 'About self-hosting')
+    </figcaption>
 </div>
 
 <br>

pages/read/soakies.md

@@ -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&solr_nav%5Bpage%5D=0&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&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&solr_nav%5Bpage%5D=0&solr_nav%5Boffset%5D=0.