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 @@
-
+
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;
+ }
+}