diff --git a/atlas-map.svg b/atlas-map.svg index 040b244..9ae3366 100644 --- a/atlas-map.svg +++ b/atlas-map.svg @@ -1,29 +1,58 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/contents.js b/contents.js index ef0d366..d5ef13e 100644 --- a/contents.js +++ b/contents.js @@ -44,7 +44,7 @@ function populateContributions(contributions) { function createSection(contribution) { let section = reference.cloneNode(true); - section.id = contribution.moment.replace("'", ""); + section.id = contribution.title; section.querySelector(".moment").innerHTML = contribution.moment; section.querySelector(".title").innerHTML = contribution.title; section.querySelector(".author").innerHTML = contribution.author; @@ -55,16 +55,20 @@ function createSection(contribution) { function atlasLink() { let atlas = document.getElementById("atlas-map"); - let groups = atlas.querySelectorAll("g"); + let groups = atlas.querySelectorAll("[data-link]"); for (const group of groups) { let link = document.createElementNS("http://www.w3.org/2000/svg", "a"); - link.setAttribute("href", "#" + group.id); - link.innerHTML = group.innerHTML; - group.innerHTML = ""; - group.appendChild(link); + link.setAttribute("href", "#" + group.dataset.link); + wrap(group, link); } } +var wrap = function (toWrap, wrapper) { + wrapper = wrapper || document.createElement("div"); + toWrap.parentNode.appendChild(wrapper); + return wrapper.appendChild(toWrap); +}; + function createIndexSection(contribution) { if (contribution.audio) { let table = document.createElement("table"); diff --git a/index.html b/index.html index 5f5fe20..015e5ad 100644 --- a/index.html +++ b/index.html @@ -16,124 +16,304 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
Title
-
Filename.mp3
-
04:35
+
The Emergent Opera
+
10.05.2022
+
SI18#3
-
10.05.2022
SI18 Weekly Release #3
+
+ 10.05.2022
+ SI18 Weekly Release #3 +

Emergent Opera

What does it mean? This week we invite you to make content within a common diff --git a/print.css b/print.css index 3e5a34c..a75963e 100644 --- a/print.css +++ b/print.css @@ -26,8 +26,9 @@ } .atlas svg { - height: 100%; - width: 100%; + width: auto; + height: auto; + max-width: 100%; } diff --git a/style.css b/style.css index a59a7c8..a30a902 100644 --- a/style.css +++ b/style.css @@ -51,6 +51,8 @@ body, html{ border-right: solid 1px var(--wireframe); } + + .info { display: flex; justify-content: space-around; @@ -62,6 +64,7 @@ body, html{ .libretto{ overflow-y: scroll; + scroll-behavior: smooth; } @@ -70,10 +73,17 @@ body, html{ } .atlas svg { + padding: 32px; width: 100%; } +path[data-link]{ + pointer-events: all; + pointer-events:bounding-box; +} + + .moment{ text-transform: uppercase; } @@ -199,6 +209,15 @@ ul, ol { cursor: pointer; } +a{ + position: relative; + color: currentColor; + pointer-events: all; + +} + + + @namespace svg url(http://www.w3.org/2000/svg); /* Necessary to select only SVG elements, and not also HTML's. See warning below */ @@ -206,6 +225,8 @@ ul, ol { svg|a:link, svg|a:visited { cursor: pointer; + color: currentColor; + pointer-events: all; } svg|g {