From 3edccdc29c963d1637e71dba7623e3611a10dba2 Mon Sep 17 00:00:00 2001 From: Francesco Luzzana Date: Sat, 7 May 2022 22:58:34 +0200 Subject: [PATCH] contribution structure --- atlas-map.svg | 29 ++++++++++ contents.js | 33 ++++++----- index.html | 155 ++++++++++++++++++++++++++++++++++++++++++-------- style.css | 49 ++++++++++++++-- 4 files changed, 225 insertions(+), 41 deletions(-) create mode 100644 atlas-map.svg diff --git a/atlas-map.svg b/atlas-map.svg new file mode 100644 index 0000000..040b244 --- /dev/null +++ b/atlas-map.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/contents.js b/contents.js index 6c12f47..48691a8 100644 --- a/contents.js +++ b/contents.js @@ -1,20 +1,17 @@ - const reference = document.getElementById("reference"); const contributionsList = document.getElementById("contributions"); -const pagedjs = document.createElement('script') -pagedjs.src = 'https://unpkg.com/pagedjs/dist/paged.polyfill.js' - - -window.addEventListener('load',()=>{ - fetchContents() - document.getElementsByTagName('head')[0].appendChild(pagedjs) -}) +const pagedjs = document.createElement("script"); +pagedjs.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js"; +window.addEventListener("load", () => { + fetchContents(); + atlasLink(); + // document.getElementsByTagName("head")[0].appendChild(pagedjs); +}); - -function fetchContents(){ - fetch("https://hub.xpub.nl/soupboat/atlas-api/contributions") +function fetchContents() { + fetch("https://hub.xpub.nl/soupboat/atlas-api/contributions") .then((response) => response.json()) .then((data) => populateContributions(data)); } @@ -36,4 +33,14 @@ function createSection(contribution) { return section; } - +function atlasLink() { + let atlas = document.getElementById("atlas-map"); + let groups = atlas.querySelectorAll("g"); + for (const group of groups) { + let link = document.createElementNS("http://www.w3.org/2000/svg", "a"); + link.setAttributeNS("http://www.w3.org/2000/svg", "href", "#" + group.id); + link.innerHTML = group.innerHTML; + group.innerHTML = ""; + group.appendChild(link); + } +} diff --git a/index.html b/index.html index 26fe4c3..f3d8a16 100644 --- a/index.html +++ b/index.html @@ -4,18 +4,125 @@ - - - - + + + - + Emergent Opera
- the atlas here + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Title
Filename.mp3
@@ -45,23 +152,23 @@ - -
-

- Index -

-
-
- - -
-
overture
-

Overture Atlas

-
-
description
-
-
-
-
+ +
+

Index

+
+
+ + +
+
+ ~ + +
+

Overture Atlas

+
description
+
+
+
+ diff --git a/style.css b/style.css index c6e41de..d90e095 100644 --- a/style.css +++ b/style.css @@ -9,9 +9,6 @@ } -@media screen { - - body, html{ margin: 0; @@ -60,7 +57,10 @@ body, html{ border-bottom: solid 1px var(--wireframe); } +.atlas svg { + width: 100%; +} .moment{ text-transform: uppercase; @@ -113,4 +113,45 @@ dd { } -} \ No newline at end of file +.contribution { + padding: 16px; + border-bottom: 1px solid currentColor; +} + +.contribution .title { + margin: 0; + font-size: 36px; +} + +.contribution .meta { + font-size: 0.7em; + font-weight: bold; + text-transform: uppercase; +} + + + +.contribution .description { + font-style: italic; + + padding-bottom: 32px; + } + +.contribution .content h3, +.contribution .content h2 { + font-size: 1rem; + +} + +@namespace svg url(http://www.w3.org/2000/svg); +/* Necessary to select only SVG elements, and not also HTML's. + See warning below */ + +svg|a:link, +svg|a:visited { + cursor: pointer; +} + +svg|g { + pointer-events: all; +}