diff --git a/README.md b/README.md
index 603ae60..ff24ed0 100644
--- a/README.md
+++ b/README.md
@@ -57,14 +57,14 @@ The template is in use to document the following [Interface Design](https://inte
- **[Organigrams for/from the future](https://infovis.fh-potsdam.de/organigrams/)** (Summer 2023)
+
-[![](img/decolonizing.webp)
-Decolonizing Data Visualization – Visualizing Postcolonies](https://infovis.fh-potsdam.de/decolonizing/)
+[Decolonizing Data Visualization – Visualizing Postcolonies](https://infovis.fh-potsdam.de/decolonizing/)
+
-[![](img/organigrams.webp)
-Organigrams for/from the future](https://infovis.fh-potsdam.de/organigrams/)
+[Organigrams for/from the future](https://infovis.fh-potsdam.de/organigrams/)
---
diff --git a/src/style.css b/src/style.css
index 052ad80..9d29304 100644
--- a/src/style.css
+++ b/src/style.css
@@ -75,16 +75,16 @@ body {
pointer-events: none;
}
-.content > p > img {
+.content > figure > img {
transition: transform 0.5s ease;
cursor: zoom-in;
}
-.content a img {
+.content > a > img {
cursor: pointer;
}
-.content > p > img.noresize {
+.content > figure > img.noresize {
cursor: unset;
}
@@ -111,7 +111,7 @@ li {
div.hasImg {
background: none;
- max-width: 20em;
+ max-width: 25em;
text-align: center;
padding: 0;
}
@@ -163,9 +163,6 @@ p {
}
/* Specific styles */
-#app, #wrapper, #links {
- pointer-events: none;
-}
#wrapper {
position: absolute;
width: 100%;
@@ -221,10 +218,17 @@ p {
border-radius: .5em;
font-size: 0.85em;
}
+
+.content figure {
+ text-align: center;
+ margin: 0;
+ padding: 0;
+}
+
.content img, .cursor img {
max-width: 100%;
- height: 20em;
- max-height: 20em;
+ height: 25em;
+ max-height: 25em;
object-fit: contain;
}
@@ -272,6 +276,11 @@ a[href^="#"]:hover {
transition: all 0.3s ease-in-out;
padding: 3em 0.75em 0.75em 0.75em;
}
+
+#anchors a {
+ cursor: pointer !important;
+}
+
#anchors p {
margin: 0;
padding: 0.2em;
@@ -285,7 +294,7 @@ a[href^="#"]:hover {
left: 0%;
background-color: var(--background-menu);
}
-#anchors .active a{
+#anchors .active a {
font-weight: bold;
color: var(--font) !important;
}
@@ -320,18 +329,20 @@ footer a:hover img, footer a:active img {
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
body {
- font-size: 16px !important;
+ font-size: 15px !important;
}
h1 { font-size: 1.75em; }
-
- .content{
- max-width: 20em;
+
+ .content, figure {
+ max-width: 20em !important;
}
+
.content img, #cursor img {
max-width: 17.5em;
max-height: 17.5em;
height: 17.5em;
}
+
.cursor{
max-width: 85%;
left: unset;
diff --git a/src/syllabussite.js b/src/syllabussite.js
index b02f28e..a2acc1e 100644
--- a/src/syllabussite.js
+++ b/src/syllabussite.js
@@ -298,35 +298,45 @@ function createBaseData(json) {
imagesLoaded()
updateView()
}
+
function wrapCaptions() {
- // wrap image captions with a span
- document.querySelectorAll('div.content').forEach(div => {
- // Check if there's exactly one image inside the div
- const images = div.querySelectorAll('img');
- if (images.length === 1) {
- let img = images[0];
-
- div.classList.add('hasImg');
-
- // Case 1: Image outside, caption inside paragraph
- if (img.parentElement.tagName !== 'P' && img.nextElementSibling?.tagName === 'P') {
- const p = img.nextElementSibling;
- p.innerHTML = `${p.innerHTML}`;
- }
- // Case 2: Both image and caption inside paragraph
- else if (img.parentElement.tagName === 'P') {
- const p = img.parentElement;
- const restOfContent = p.innerHTML.split(img.outerHTML)[1];
- p.innerHTML = img.outerHTML + `${restOfContent}`;
- }
- // Case 3: No paragraph element, and no link
- else if (img.parentElement.tagName !== 'A') {
- const restOfContent = div.innerHTML.split(img.outerHTML)[1];
- div.innerHTML = img.outerHTML + `${restOfContent}`;
+ document.querySelectorAll('div.content').forEach(div => {
+ const imgElement = div.querySelector('img:first-child');
+ if (imgElement) {
+ div.classList.add('hasImg');
+ const figure = document.createElement('figure');
+ figure.appendChild(imgElement);
+ const textNodes = Array.from(div.childNodes);
+ // Create a caption element and append the text nodes
+ const caption = document.createElement('figcaption');
+
+ // Iterate through child nodes, handle text and elements differently
+ Array.from(div.childNodes).forEach(node => {
+ if (node.nodeType === Node.TEXT_NODE) {
+ if (typeof node.innerHTML !== "undefined") caption.appendChild(node);
+ } else if (node.tagName === 'P') {
+ let figpar = node.innerHTML.trim().replace(/^\
/, "");
+ caption.innerHTML += figpar;
+ } else {
+ // Append other elements as-is
+ caption.appendChild(node);
}
- }
- });
+ });
+
+ caption.innerHTML = ""+caption.innerHTML+"";
+
+ // Append the caption to the figure
+ figure.appendChild(caption);
+
+ // Clear the content of the div
+ div.innerHTML = "";
+
+ // Append the figure to the div
+ div.appendChild(figure);
+ }
+ });
}
+
function imagesLoaded() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
@@ -412,13 +422,10 @@ async function updateView() {
}
});
- document.querySelectorAll('.content p > img:not(.noresize)').forEach(img => {
+ document.querySelectorAll('.content > figure > img:not(.noresize)').forEach(img => {
img.addEventListener('click', function(e) {
-
if (e.target.parentElement.tagName === 'A') return;
- e.preventDefault();
-
let content = img.closest('.content');
let app = document.querySelector('#app');