diff --git a/contents.js b/contents.js index ee3a01b..4122c43 100644 --- a/contents.js +++ b/contents.js @@ -50,6 +50,31 @@ function createSection(contribution) { section.querySelector(".author").innerHTML = contribution.author; section.querySelector(".description").innerHTML = contribution.description; section.querySelector(".content").innerHTML = contribution.content_html; + + if ((contribution.audio && contribution.audio.length == 1) || contribution.original) { + let audio = new Audio( + `https://hub.xpub.nl/soupboat/SI18/03/${contribution.folder}/${ + contribution.original || contribution.audio[0] + }` + ); + audio.addEventListener("canplaythrough", (event) => { + /* the audio is now playable; play it if permissions allow */ + section.querySelector(".filename").innerHTML = `${~~(audio.duration / 60)}:${~~( + audio.duration % 60 + )}`; + let player = section.querySelector(".player"); + player.innerHTML = "Play"; + player.addEventListener("click", () => { + if (audio.paused) { + audio.play(); + player.innerHTML = "Pause"; + } else { + audio.pause(); + player.innerHTML = "Play"; + } + }); + }); + } else section.querySelector(".audio").remove(); return section; } diff --git a/index.html b/index.html index 4e7c227..8a06490 100644 --- a/index.html +++ b/index.html @@ -317,7 +317,7 @@ -
+
10.05.2022
@@ -367,6 +367,10 @@

Overture Atlas

description
+
+ + +
diff --git a/style.css b/style.css index 3ff6902..470fa2d 100644 --- a/style.css +++ b/style.css @@ -1,274 +1,279 @@ @font-face { - font-family: Fengardo; - src: url("fonts/fengardoneue_regular-webfont.woff"); + font-family: Fengardo; + src: url("fonts/fengardoneue_regular-webfont.woff"); } @font-face { - font-family: Fengardo; - src: url("fonts/fengardoneue_black-webfont.woff"); - font-weight: bold; + font-family: Fengardo; + src: url("fonts/fengardoneue_black-webfont.woff"); + font-weight: bold; } :root { - --text:#111; - --wireframe:#111; - --background:#FF6347; + --text: #111; + --wireframe: #111; + --background: #ff6347; } -*{ - box-sizing: border-box; +* { + box-sizing: border-box; } +body, +html { + margin: 0; + padding: 0; + background-color: var(--background); + color: var(--text); + font-family: Fengardo; + font-size: 21px; + line-height: 1.6; - -body, html{ - margin: 0; - padding: 0; - background-color: var(--background); - color: var(--text); - font-family: Fengardo; - font-size: 21px; - line-height: 1.6; - + overflow: hidden; } .container { - display: flex; - width: 100vw; - height: 100vh; - margin: 0; - overflow: hidden; + display: flex; + width: 100vw; + height: 100vh; + margin: 0; + overflow: hidden; } .container > * { - flex-basis: 50%; + flex-basis: 50%; } .atlas { - position: relative; - display: flex; - flex-direction: column; - justify-content: space-between; - border-right: solid 1px var(--wireframe); + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + border-right: solid 1px var(--wireframe); } - - .info { - display: flex; - justify-content: space-around; - align-items: center; - height: 100px; - width: 100%; - border-top: solid 1px var(--wireframe); + display: flex; + justify-content: space-around; + align-items: center; + height: 100px; + width: 100%; + border-top: solid 1px var(--wireframe); } -.libretto{ - overflow-y: scroll; - scroll-behavior: smooth; +.libretto { + overflow-y: scroll; + scroll-behavior: smooth; } - .libretto > * { - border-bottom: solid 1px var(--wireframe); + border-bottom: solid 1px var(--wireframe); } -.atlas svg { - padding: 32px; - width: 100%; - overflow: visible; +.contribution:last-of-type { + border-bottom: none; +} +.atlas svg { + padding: 32px; + width: 100%; + overflow: visible; } .atlas svg #live-path { - color: currentColor; - stroke-dasharray: 18159; - stroke-dashoffset: 18159; - animation: dash 300s linear forwards; + color: currentColor; + stroke-dasharray: 18159; + stroke-dashoffset: 18159; + animation: dash 300s linear forwards; } @keyframes dash { - to{ - stroke-dashoffset: 0; - } + to { + stroke-dashoffset: 0; + } } - -path[data-link]{ - pointer-events: all; - pointer-events:bounding-box; +path[data-link] { + pointer-events: all; + pointer-events: bounding-box; } - -.moment{ - text-transform: uppercase; +.moment { + text-transform: uppercase; } -.cover{ - display: flex; - flex-direction: column; - align-items: center; - text-align: center; +.cover { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; - min-height: 100vh; - padding: 32px; + min-height: 100vh; + padding: 32px; } .cover .release { - font-style: italic; + font-style: italic; } .cover .title { - font-size: 64px; - margin: 64px 0; - + font-size: 64px; + margin: 64px 0; } .cover .description { - max-width: 50ch; + max-width: 50ch; } dl { - margin-top: 128px; + margin-top: 128px; } dt { - margin-top: 24px; - font-style: italic; + margin-top: 24px; + font-style: italic; } dd { - max-width: 60ch; - margin: 0; + max-width: 60ch; + margin: 0; } .index { - display: none; + display: none; } - #reference { - display: none; + display: none; } - .contribution { - padding: 16px; - padding-bottom: 64px; - border-bottom: 1px solid currentColor; + padding: 16px; + padding-bottom: 64px; + border-bottom: 1px solid currentColor; } .contribution .title { - margin: 0; - margin-top: 0; - font-size: 42px; + margin: 0; + margin-top: 0; + font-size: 42px; } .contribution .meta { - /* font-size: 0.8em; */ - /* font-weight: bold; */ - text-transform: uppercase; + /* font-size: 0.8em; */ + /* font-weight: bold; */ + text-transform: uppercase; +} + +.contribution .audio { + margin-bottom: 32px; } -ul, ol { - margin: 16px 0; +.contribution .player { + border: 1px solid currentColor; + outline: none; + background: none; + padding: 4px 8px; + cursor: pointer; +} + +ul, +ol { + margin: 16px 0; } .contribution .description { - font-style: italic; - - padding-bottom: 32px; - } + font-style: italic; + + padding-bottom: 8px; +} .contribution .content h3, .contribution .content h2 { - font-size: 28px; - margin: 16px 0; + font-size: 28px; + margin: 16px 0; } .contribution .content ol { - padding-inline-start: 16px; + padding-inline-start: 16px; } .contribution img { - width: 100%; - height: auto; - object-fit: contain; + width: 100%; + height: auto; + object-fit: contain; } - .content { - white-space: pre-line; + white-space: pre-line; } -.content p, +.content p, .content h2 { - margin: 0; + margin: 0; } .content img { - width: 100%; - object-fit: contain; - height: auto; + width: 100%; + object-fit: contain; + height: auto; } #btn-print { - display: inline-block; - color: var(--text); - margin-top: 32px; - background: none; - border: 1px solid var(--text); - padding: 4px 8px; - font-size: 1rem; + display: inline-block; + color: var(--text); + margin-top: 32px; + background: none; + border: 1px solid var(--text); + padding: 4px 8px; + font-size: 1rem; } -#btn-print:hover{ - cursor: pointer; +#btn-print:hover { + cursor: pointer; } -a{ - position: relative; - color: currentColor; - pointer-events: all; - +a { + position: relative; + color: currentColor; + pointer-events: all; } -a:hover{ - color: white; +a:hover { + color: white; } - @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; - color: currentColor; - pointer-events: all; + cursor: pointer; + color: currentColor; + pointer-events: all; } svg|g { - pointer-events: all; + pointer-events: all; } -@media (max-width: 991.98px){ - .container { - height: auto; - width: 100%; - display: block; - } +@media (max-width: 991.98px) { + .container { + height: auto; + width: 100%; + display: block; + } - .libretto { - overflow: hidden; - } + .libretto { + overflow: hidden; + } - .atlas svg { - padding: 16px; - } + .atlas svg { + padding: 16px; + } - .info { - display: none; - } -} \ No newline at end of file + .info { + display: none; + } +}