Credits & Attributions
+A heartfelt Thank You is extended to these creators and the platforms that host their work. Their royalty-free contributions to the public helped make this demo possible.
+Preview shows a small version of the linked image.
+ +
+
\ No newline at end of file
diff --git a/src/gallery.njk b/src/gallery.njk
index 2e16e14..e74399e 100644
--- a/src/gallery.njk
+++ b/src/gallery.njk
@@ -7,7 +7,7 @@ stylesheet:
- "/styles/base.css"
- "/styles/header-footer.css"
- "/styles/gallery.css"
-fontAwesome: "https://kit.fontawesome.com/abc7c3b0da.js"
+fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
isLandingPage: false
pageScripts:
- "/scripts/gallery-carousel.js"
diff --git a/src/index.njk b/src/index.njk
index 4d68687..6f6d0ca 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -7,7 +7,7 @@ stylesheet:
- "/styles/base.css"
- "/styles/header-footer.css"
- "/styles/index.css"
-fontAwesome: "https://kit.fontawesome.com/abc7c3b0da.js"
+fontAwesome: "https://kit.fontawesome.com/c42448086d.js"
isLandingPage: true
pageScripts:
- "/scripts/script.js"
diff --git a/src/scripts/tooltips.js b/src/scripts/tooltips.js
new file mode 100644
index 0000000..5398abe
--- /dev/null
+++ b/src/scripts/tooltips.js
@@ -0,0 +1,47 @@
+// JS for tooltip hover
+document.addEventListener("DOMContentLoaded", () => {
+ // Hide inline thumbs when JS is available
+ document.querySelectorAll(".thumb-inline").forEach(img => img.style.display = "none");
+
+ // Tooltip element
+ const tip = document.createElement("div");
+ tip.className = "thumb-tooltip";
+ document.body.appendChild(tip);
+
+ function positionTip(el) {
+ const rect = el.getBoundingClientRect();
+ const tipRect = tip.getBoundingClientRect();
+ let left = rect.left + window.scrollX;
+ if (left + tipRect.width > window.innerWidth) {
+ left = window.innerWidth - tipRect.width - 8; // small margin
+ }
+ tip.style.top = (rect.bottom + window.scrollY + 6) + "px";
+ tip.style.left = left + "px";
+ }
+
+
+ function show(e) {
+ const url = e.currentTarget.getAttribute("data-tooltip");
+ if (!url) return;
+
+ // Preload image to get natural size
+ const img = new Image();
+ img.onload = () => {
+ tip.style.width = img.naturalWidth + "px";
+ tip.style.height = img.naturalHeight + "px";
+ tip.style.backgroundImage = `url("${url}")`;
+ tip.style.display = "block";
+ positionTip(e.currentTarget);
+ };
+ img.src = url;
+ }
+
+ function hide() { tip.style.display = "none"; }
+
+ document.querySelectorAll("li.credit").forEach(item => {
+ item.addEventListener("mouseenter", show);
+ item.addEventListener("mouseleave", hide);
+ item.addEventListener("focusin", show);
+ item.addEventListener("focusout", hide);
+ });
+});
\ No newline at end of file
diff --git a/src/styles/credits.css b/src/styles/credits.css
new file mode 100644
index 0000000..872f2bf
--- /dev/null
+++ b/src/styles/credits.css
@@ -0,0 +1,49 @@
+/* CSS Style Rules for "Credits & Attributions" */
+.credits-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.credit {
+ display: flex; /* thumb + text side by side */
+ align-items: flex-start;
+ gap: 0.5rem; /* spacing between thumb and text */
+ margin-bottom: 1rem;
+}
+
+.thumb {
+ flex: 0 0 auto; /* don’t stretch */
+}
+
+.thumb-inline {
+ display: block; /* visible by default (no JS) */
+ max-width: 40px; /* fallback size (from HTML attrs) */
+ height: auto;
+}
+
+.meta {
+ flex: 1 1 auto;
+ min-width: 0; /* ensures text can wrap inside flexbox */
+ word-wrap: break-word;
+}
+
+.meta p {
+ margin: 0.25rem 0;
+}
+
+.meta .small {
+ font-size: 0.875rem;
+ color: #555;
+}
+
+.thumb-tooltip { /* background image is handled by JS */
+ position: absolute;
+ display: none;
+ background-repeat: no-repeat;
+ background-size: contain; /* fit full image */
+ background-position: center;
+ border: 1px solid #ccc;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+ z-index: 9999;
+}
\ No newline at end of file
-
+
+
-
+
+ ++ + +
+
+