diff --git a/assets/helllo_world.mp4 b/assets/helllo_world.mp4 new file mode 100644 index 0000000..b5bc4ed Binary files /dev/null and b/assets/helllo_world.mp4 differ diff --git a/assets/keta_laibach.jpg b/assets/keta_laibach.jpg new file mode 100644 index 0000000..01f34f4 Binary files /dev/null and b/assets/keta_laibach.jpg differ diff --git a/assets/test-js.mp4 b/assets/test-js.mp4 new file mode 100644 index 0000000..b14e453 Binary files /dev/null and b/assets/test-js.mp4 differ diff --git a/cms.js b/cms.js new file mode 100644 index 0000000..edf37f7 --- /dev/null +++ b/cms.js @@ -0,0 +1,107 @@ +const updatesContainer = document.getElementById("updates-container"); +let updates = []; + +// Fetc the updates from the array in updates.json +// Each element of the array is structured like this: +// +// { +// "date": "October the 21st, 2021", +// "title": "2nd hand lifeboat script", +// "text": "Labore eiusmod labore pariatur elit nostrud ut magna cupidatat minim amet deserunt cillum id. Lorem consectetur incididunt anim sit do eu minim nisi id.", +// "media": { +// "type": "video", +// "src": "./assets/test-js.mp4", +// "alt": "An excerpt from 'When did software gone wrong?' highlighted progressively as in karaoke", +// "caption": "In every karaoke there are at least 2 voices: a text and a choir" +// } +// } +// +// Title, Text and Media are not mandatory. +// If some are not present, the createUpdate function will skip them +// +// Note that the Date is required, but its format is up to the user +// +// All the media elements require an alt description. +// This is for accessibility. It's a really good practice to provide quality alt text +// and we must pay attention to this. + +fetch("./updates.json") + .then((response) => response.json()) + .then((data) => { + updates = [...data.updates.reverse()]; + populateContents(); + }); + +function populateContents() { + updates.forEach((update) => createUpdate(update)); +} + +function createUpdate(update) { + let card = document.createElement("div"); + card.classList.add("update"); + + // DATE + let date = document.createElement("div"); + date.classList.add("date"); + date.innerHTML = update.date; + card.appendChild(date); + + // TITLE, if present + if (update.title) { + let title = document.createElement("h3"); + title.classList.add("title"); + title.innerHTML = update.title; + card.appendChild(title); + } + + // MEDIA CONTENTS, if present + if (update.media) { + let media; + // IMAGE + if (update.media.type == "img") { + media = document.createElement("media"); + media.classList.add("media"); + + let img = document.createElement("img"); + img.src = update.media.src; + img.alt = update.media.alt; + media.appendChild(img); + + if (update.media.caption) { + let caption = document.createElement("figcaption"); + caption.innerHTML = update.media.caption; + media.appendChild(caption); + } + } + // VIDEO + if (update.media.type == "video") { + media = document.createElement("div"); + media.classList.add("media"); + + let video = document.createElement("video"); + video.src = update.media.src; + video.alt = update.media.alt; + video.setAttribute("autoplay", true); + video.setAttribute("loop", true); + media.appendChild(video); + + if (update.media.caption) { + let caption = document.createElement("p"); + caption.classList.add("caption"); + caption.innerHTML = update.media.caption; + media.appendChild(caption); + } + } + card.appendChild(media); + } + + // TEXT, if present + if (update.text) { + let text = document.createElement("p"); + text.classList.add("text"); + text.innerHTML = update.text; + card.appendChild(text); + } + + updatesContainer.appendChild(card); +} diff --git a/font/.ipynb_checkpoints/font-checkpoint.css b/font/.ipynb_checkpoints/font-checkpoint.css deleted file mode 100644 index d8518f9..0000000 --- a/font/.ipynb_checkpoints/font-checkpoint.css +++ /dev/null @@ -1,20 +0,0 @@ -@font-face { - font-family: "Grotezk"; - src: url("ApfelGrotezk-Regular.woff") format('woff'); -} -@font-face { - font-family: "Bluu"; - src: url("bluunext.woff") format('woff'); - font-weight:regular; -} -@font-face { - font-family: "Bluu"; - src: url("bluunext-bold-webfont.woff") format('woff'); - font-weight:bold; -} -@font-face { - font-family: "Bluu"; - src: url("bluunext-bolditalic-webfont.woff") format('woff'); - font-weight:bold-italic; - font-style:italic; -} \ No newline at end of file diff --git a/index.html b/index.html index 44e0419..b6bb130 100644 --- a/index.html +++ b/index.html @@ -1,53 +1,89 @@ - - - - - - - - k-pub - - -
-
-
-

Battiato feat. Simone Weil Karaoke

-

- " To ascertain exactly what the miser whose treasure was stolen - lost: thus we should learn much. - Lauzun and the office of Captain of Musketeers. He preferred - to be a prisoner and Captain of Musketeers rather than to go free - and not be Captain. - These are garments. ‘They were ashamed of their nakedness.’" -

-

- "To lose someone: we suffer because the departed, the absent, has - become something imaginary and unreal. But our desire for him - is not imaginary. We have to go down into ourselves to the - abode of the desire which is not imaginary. Hunger: we imagine - kinds of food, but the hunger itself is real: we have to fasten on - to the hunger. The presence of the dead person is imaginary, but - his absence is very real: henceforward it is his way of appearing." -

-

- "Man only escapes from the laws of this world in lightning -flashes. Instants when everything stands still, instants of contemplation, of pure intuition, of mental void, of acceptance of the -moral void. It is through such instants that he is capable of the -supernatural. -Whoever endures a moment of the void either receives the -supernatural bread or falls. It is a terrible risk, but one that must -be run—even during the instant when hope fails. But we must -not throw ourselves into it." -

-
-
-

an enchanting reading-choir featuring Simone Weil's diaries and Franco Battiato's songs.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper viverra nam libero justo laoreet sit amet cursus. Ut faucibus pulvinar elementum integer. Feugiat scelerisque varius morbi enim. Purus semper eget duis at tellus at. Arcu non odio euismod lacinia. Malesuada fames ac turpis egestas integer eget aliquet. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Leo urna molestie at elementum eu facilisis sed odio morbi. Tortor dignissim convallis aenean et tortor at risus viverra. Porttitor lacus luctus accumsan tortor posuere ac ut. Est pellentesque elit ullamcorper dignissim cras. Elit scelerisque mauris pellentesque pulvinar pellentesque. Ullamcorper sit amet risus nullam eget felis eget. Nec nam aliquam sem et. Sed velit dignissim sodales ut. Leo vel fringilla est ullamcorper eget nulla facilisi etiam. Nisl pretium fusce id velit ut. Proin sed libero enim sed faucibus turpis in.

- try1 -

tryouts with vvvv and Laibach feat. MissKeta

-
-
- - \ No newline at end of file + + + + + + + 🎵 K-PUB + + +
+

+ KARAOKE
+ REPUBLISHING +

+
+
ISSUE _ 01
+

Simone Weil & Franco Battiato

+
+
+ +
+
+

+ "To ascertain exactly what the miser whose treasure + was stolen lost: thus we should learn much. Lauzun and the office of Captain of + Musketeers. He preferred to be a prisoner and Captain of Musketeers rather than + to go free and not be Captain. These are garments. ‘They were ashamed of their + nakedness.’" +

+

+ "To lose someone: we suffer because the departed, the absent, has become + something imaginary and unreal. But our desire for him is not imaginary. We have + to go down into ourselves to the abode of the desire which is not imaginary. + Hunger: we imagine kinds of food, but the hunger itself is real: we have to + fasten on to the hunger. The presence of the dead person is imaginary, but his + absence is very real: henceforward it is his way of appearing." +

+

+ "Man only escapes from the laws of this world in lightning flashes. Instants + when everything stands still, instants of contemplation, of pure intuition, of + mental void, of acceptance of the moral void. It is through such instants that + he is capable of the supernatural. Whoever endures a moment of the void either + receives the supernatural bread or falls. It is a terrible risk, but one that + must be run—even during the instant when hope fails. But we must not throw + ourselves into it." +

+
+
+
+

+ An enchanting reading-in-choir featuring Simone Weil's diaries through the + musical intuitions of Franco Battiato +

+

+ Esse ex qui veniam irure excepteur consequat eu ad enim proident. Ut eiusmod + incididunt ex nostrud qui eu sunt laboris enim Lorem consectetur. Esse + pariatur irure enim dolore excepteur ullamco in excepteur in nisi eiusmod. + Officia ullamco ut eu aliqua anim. Dolor non id amet fugiat mollit sunt + cupidatat consectetur et aliqua sint sit. +

+
+ +
+ +
+
+
+ + diff --git a/style.css b/style.css index 09498c5..0e8f789 100644 --- a/style.css +++ b/style.css @@ -1,72 +1,209 @@ -@import url('./font/font.css'); - -body{ - background-color: #FEFFF8; - font-family: Grotezk; - color:#6B64C3 ; - text-decoration:none; - margin:0; - /*green is #69781C +@import url("./font/font.css"); + +html, +body { + margin: 0; + + background-color: #fefff8; + color: #6b64c3; + /* font-family: Grotezk; */ + font-family: Arial, Helvetica, sans-serif; + text-decoration: none; + + font-size: 1.25rem; + + box-sizing: border-box; + + /*green is #69781C purple is #6B64C3*/ } -.smirk{ - position:absolute; - top: 2em; - left:2em; - margin:0; - z-index:1; -} -a{ - text-decoration:none; - color: #69781C -} -a:hover{ - color: yellow; -} -.main{ - display:flex; - flex-direction:row; - justify-content:space-between; - height:100vh; - margin:0; -} -.lyrics{ - margin:0; - flex-basis:60%; - overflow-y:scroll; - overflow-x:hidden; - padding: 1em; -} -.documentation{ - flex-basis:40%; - overflow-y:scroll; - padding: 1em; - margin:0; - overflow-y:scroll; -/* color:#69781C; */ -} -h1{ - margin: 10vh 0; - word-wrap: break-word; - font-size:6em; - font-family: Bluu; - font-weight:bold; -/* font-style:italic; */ - width:50vw; -} -h3{ - font-family: Bluu; - font-weight: regular; - font-size: 2em; -} -p{ - margin: 2em auto; - width: 90%; - font-size: 1.2em -} -.documentation img{ - width:90%; - margin: 1em auto; - object-fit: contain; + +/* HEADER */ + +header { + width: 100%; + height: 100vh; + + padding: 0; + margin: 0; + + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + text-align: center; + background-color: #6b64c3; + color: #fefff8; +} + +header h1 { + font-size: clamp(64px, 1rem + 8vw, 256px); + font-family: Bluu; + font-weight: bold; + margin: 0; + margin-bottom: 16px; +} + +header .issue { + font-size: clamp(14px, 1rem + 1vw, 20px); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(10deg); + border: 2px solid currentColor; + background-color: #fefff8; + color: #6b64c3; + padding: 16px; +} + +.issue .current { + text-align: left; } +.issue h2 { + margin: 8px 0; +} + +main { + display: flex; + margin: 0; + line-height: 1.4; +} + +main > * { + padding: 24px; + margin: 0; +} + +/* DESCRIPTION */ + +.description { + margin: 32px 0; +} + +.description h2 { + margin: 0; +} + +.description p { + margin-top: 16px; +} + +/* UPDATE CARDS */ + +.updates { + margin-top: 64px; +} + +.updates > * + * { + margin-top: 48px; +} + +.update { + /* background: linear-gradient(rgba(107, 100, 195, 0.1), rgba(107, 100, 195, 0)); */ + padding-left: 16px; + border-left: 2px dashed #ada9e0; +} + +.update .date { + margin: 0; + font-size: 1rem; +} + +.update .title { + margin: 8px 0; +} + +.update .media { + width: 100%; + margin: 24px 0; +} + +.update figcaption, +.update .caption { + margin: 0; + margin-top: 8px; + font-size: 1rem; + font-style: italic; +} + +.media img, +.media video { + width: 100%; + height: 100%; + /* border: 2px solid #d4d3ee; */ +} + +.update .text { + margin: 0; + margin-top: 16px; +} + +/* LYRICS */ + +.lyrics { + flex-grow: 1.5; + + font-size: 48px; + font-family: Bluu; + color: #ada9e0; +} + +.lyrics p { + text-indent: 6ch; +} + +.karaoke { + color: #6b64c3; +} + +/* .lyrics { + margin: 0; + flex-basis: 60%; + overflow-y: scroll; + overflow-x: hidden; + padding: 1em; +} +.documentation { + flex-basis: 40%; + overflow-y: scroll; + padding: 1em; + margin: 0; + overflow-y: scroll; +} + +h3 { + font-family: Bluu; + font-weight: regular; + font-size: 2em; +} +p { + margin: 2em auto; + width: 90%; + font-size: 1.2em; +} +.documentation img { + width: 90%; + margin: 1em auto; + object-fit: contain; +} */ + +@media (max-width: 991.98px) { + header .issue { + position: relative; + top: auto; + left: auto; + transform: none; + + background-color: transparent; + color: #fefff8; + border: none; + border-radius: 0; + } + + .issue .current { + text-align: center; + } +} diff --git a/updates.json b/updates.json new file mode 100644 index 0000000..424d53f --- /dev/null +++ b/updates.json @@ -0,0 +1,48 @@ +{ + "updates": [ + { + "date": "October the 21st, 2021", + "title": "", + "text": "", + "media": { + "type": "img", + "src": "./assets/karaokedocu.jpg", + "alt": "Late night programming the custom karaoke software with L'Era del Cinghiale Bianco from Battiato as demo song", + "caption": "Tryouts for a custom karaoke software made with vvvv" + } + }, + { + "date": "October the 21st, 2021", + "title": "2nd hand lifeboat script", + "text": "Labore eiusmod labore pariatur elit nostrud ut magna cupidatat minim amet deserunt cillum id. Lorem consectetur incididunt anim sit do eu minim nisi id.", + "media": { + "type": "video", + "src": "./assets/test-js.mp4", + "alt": "An excerpt from 'When did software gone wrong?' highlighted progressively as in karaoke", + "caption": "In every karaoke there are at least 2 voices: a text and a choir" + } + }, + { + "date": "October the 22nd, 2021", + "title": "This thing is fun and funny on many levels", + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper viverra nam libero justo laoreet sit amet cursus. Ut faucibus pulvinar elementum integer.", + "media": { + "type": "img", + "src": "./assets/keta_laibach.jpg", + "alt": "Myss Keta performing Giovanna Hardcore b2b with Laibach performing Life is Life", + "caption": "The painfull necessity of contingency between the aesthetics of Laibach and Myss Keta" + } + }, + { + "date": "October the 22nd, 2021", + "title": "He llo wo rld", + "text": "", + "media": { + "type": "video", + "src": "./assets/helllo_world.mp4", + "alt": "Tirst words from our custom karaoke are he llo wo rld", + "caption": "firsts words from the caraoki" + } + } + ] +} \ No newline at end of file