diff --git a/cms.js b/cms.js index edf37f7..c6a428e 100644 --- a/cms.js +++ b/cms.js @@ -1,5 +1,39 @@ const updatesContainer = document.getElementById("updates-container"); let updates = []; +let quotes = []; + +let callback = (entries) => { + entries.forEach((entry) => { + entry.target.innerHTML = highlight( + quotes[entry.target.getAttribute("data-quote")], + entry.intersectionRatio + ); + }); +}; + +// Threshold Callback + +let threshold = []; +for (let i = 0; i <= 1.0; i += 0.01) { + threshold.push(i); +} + +let observer = new IntersectionObserver(callback, { + rootMargin: "100% 0% -25% 0%", + threshold: threshold, +}); + +// Karaoke highlight + +function highlight(text, offset) { + let scrollCursor = text.length * offset; + return ( + '' + + text.slice(0, scrollCursor) + + "" + + text.slice(scrollCursor) + ); +} // Fetc the updates from the array in updates.json // Each element of the array is structured like this: @@ -8,7 +42,8 @@ let updates = []; // "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": { +// "quote": "Lorem elit magna esse reprehenderit fugiat labore est veniam ipsum labore est voluptate do." +// "media": { // "type": "video", // "src": "./assets/test-js.mp4", // "alt": "An excerpt from 'When did software gone wrong?' highlighted progressively as in karaoke", @@ -16,7 +51,7 @@ let updates = []; // } // } // -// Title, Text and Media are not mandatory. +// Title, Text, Quote 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 @@ -40,18 +75,33 @@ function createUpdate(update) { let card = document.createElement("div"); card.classList.add("update"); + // QUOTE + + if (update.quote) { + let quote = document.createElement("blockquote"); + quote.innerHTML = update.quote; + quote.setAttribute("data-quote", quotes.length); + quotes.push(update.quote); + card.appendChild(quote); + observer.observe(quote); + } + + // LOG + let log = document.createElement("div"); + log.classList.add("log"); + // DATE let date = document.createElement("div"); date.classList.add("date"); date.innerHTML = update.date; - card.appendChild(date); + log.appendChild(date); // TITLE, if present if (update.title) { let title = document.createElement("h3"); title.classList.add("title"); title.innerHTML = update.title; - card.appendChild(title); + log.appendChild(title); } // MEDIA CONTENTS, if present @@ -92,7 +142,7 @@ function createUpdate(update) { media.appendChild(caption); } } - card.appendChild(media); + log.appendChild(media); } // TEXT, if present @@ -100,8 +150,9 @@ function createUpdate(update) { let text = document.createElement("p"); text.classList.add("text"); text.innerHTML = update.text; - card.appendChild(text); + log.appendChild(text); } + card.appendChild(log); updatesContainer.appendChild(card); } diff --git a/index.html b/index.html index b6bb130..c8dd959 100644 --- a/index.html +++ b/index.html @@ -20,70 +20,49 @@ -
-
-

- "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 +

+

+ 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 9b77a58..578df77 100644 --- a/style.css +++ b/style.css @@ -15,8 +15,10 @@ body { box-sizing: border-box; - /*green is #69781C - purple is #6B64C3*/ + /* + green #69781C + purple #6B64C3 + */ } a { @@ -45,7 +47,7 @@ header { } header h1 { - font-size: clamp(64px, 1rem + 8vw, 256px); + font-size: clamp(36px, 1rem + 8vw, 256px); font-family: Bluu; font-weight: bold; margin: 0; @@ -72,17 +74,6 @@ header .issue { margin: 8px 0; } -main { - display: flex; - margin: 0; - line-height: 1.4; -} - -main > * { - padding: 24px; - margin: 0; -} - .documentation { flex-basis: 33vw; flex-shrink: 0; @@ -92,6 +83,8 @@ main > * { .description { margin: 32px 0; + padding: 0 32px; + display: flex; } .description h2 { @@ -106,34 +99,58 @@ main > * { .updates { margin-top: 64px; + padding: 32px; } .updates > * + * { - margin-top: 48px; + margin-top: 64px; } .update { - /* background: linear-gradient(rgba(107, 100, 195, 0.1), rgba(107, 100, 195, 0)); */ - padding-left: 16px; + display: flex; +} + +.update > * { + flex: 1; +} + +.update blockquote { + flex-grow: 1.2; + + font-size: 48px; + line-height: 1.2; + font-family: Bluu; + color: #ada9e0; + text-indent: 6ch; + padding: 48px; + margin: 0; +} + +.log { + padding-left: 24px; border-left: 2px dashed #ada9e0; + align-self: center; + flex-grow: 0; + flex-basis: 45%; + margin-left: auto; } -.update .date { +.log .date { margin: 0; font-size: 1rem; } -.update .title { +.log .title { margin: 8px 0; } -.update .media { +.log .media { width: 100%; margin: 24px 0; } -.update figcaption, -.update .caption { +.log figcaption, +.log .caption { margin: 0; margin-top: 8px; font-size: 1rem; @@ -144,64 +161,20 @@ main > * { .media video { width: 100%; height: 100%; - /* border: 2px solid #d4d3ee; */ } -.update .text { +.log .text { margin: 0; margin-top: 16px; white-space: break-spaces; } -/* LYRICS */ - -.lyrics { - flex-grow: 1.2; - - font-size: 48px; - font-family: Bluu; - color: #ada9e0; -} - -.lyrics p { - text-indent: 6ch; -} +/* HIGHLIGHT */ -.karaoke { +.highlight { 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; @@ -218,4 +191,32 @@ p { .issue .current { text-align: center; } + + .description { + display: block; + } + + .updates { + padding: 16px; + } + + .updates > * + * { + margin-top: 48px; + } + + .update { + display: block; + } + + .update blockquote { + padding: 0; + margin: 32px 0; + font-size: 32px; + line-height: 1.4; + text-indent: 32px; + } + + .update .log { + padding-left: 16px; + } } diff --git a/updates.json b/updates.json index 762ac36..48cb933 100644 --- a/updates.json +++ b/updates.json @@ -37,6 +37,7 @@ "date": "October the 22nd, 2021", "title": "He llo wo rld", "text": "", + "quote": "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.", "media": { "type": "video", "src": "./assets/helllo_world.mp4", @@ -47,8 +48,7 @@ { "date": "October the 23rd, 2021", "title": "K-Scroll", - "text": "We bought green curry from HJ 😶 and developed a scroll-to-highlight script starting from the idea behind these text lifeboats. We will use it as a small interactive feature for this diary-devlog, to stay in the karaoke mood. (the scroll-to-highlight, not the curry)", - "media": null + "text": "We bought green curry from HJ 😶 and developed a scroll-to-highlight script starting from the idea behind these text lifeboats. We will use it as a small interactive feature for this diary-devlog, to stay in the karaoke mood. (the scroll-to-highlight, not the curry)" }, { "date": "October the 23rd, 2021", @@ -64,8 +64,8 @@ { "date": "October the 23rd, 2021", "title": "Graceful like a camel in a gutter", - "text": "Both Battiato and Weil's writings are often like a spell of protection, a desire for preservation in the name of a higher, so to say, grace. The kind of state of consciousness that spans from the innermost esoteric knowledge of self-care, to the irrational acceptance of an utter disclosure of one's own intimacy.\nAs the Persian mathematician, philosopher and historian al-Bīrūnī used to compare his on language to \"a camel in a gutter\" to describe its inadequacy when it come to discuss scientific topics, so the entire realm of words has something awkwardly inappropriate when it comes to deal with such a state of grace. However, there's something like a confession in both Battiato and Weil's lyrics, and perhaps it is indeed this confession that somehow manages to carry the burden of this task through the means of the diary and of the song.", - "media": null + "quote": "To ascertain exactly what the miser whosetreasure 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.’", + "text": "Both Battiato and Weil's writings are often like a spell of protection, a desire for preservation in the name of a higher, so to say, grace. The kind of state of consciousness that spans from the innermost esoteric knowledge of self-care, to the irrational acceptance of an utter disclosure of one's own intimacy.\nAs the Persian mathematician, philosopher and historian al-Bīrūnī used to compare his on language to \"a camel in a gutter\" to describe its inadequacy when it come to discuss scientific topics, so the entire realm of words has something awkwardly inappropriate when it comes to deal with such a state of grace. However, there's something like a confession in both Battiato and Weil's lyrics, and perhaps it is indeed this confession that somehow manages to carry the burden of this task through the means of the diary and of the song." }, { "date": "October the 24th, 2021", @@ -82,6 +82,7 @@ "date": "October the 24th, 2021", "title": "No Time No Space - live slice demo", "text": "Tried with the pitchwheel instead of the slider and it seems to work better, because it returns automatically at its default position and it's super handy: the reset smooths out the flow. Otherwise with the fader we would end up with the length of the previous selection already in place for the next one, and that could be annoying, i.e. if you need to select a long slice and then maybe a short one\n\nPS This update reminds me that we need to put some sort of controls for videos. This one has audio and cannot start by itself, try to play it", + "quote": "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.", "media": { "type": "video", "src": "./assets/k-live-slice.mp4", @@ -92,8 +93,7 @@ { "date": "October the 24th, 2021", "title": "", - "text": "Also, these updates cover a lot of different aspects of this project and so maybe we could add some tags to filter the update? Maybe not complex as in the soup-gen or the chat-reader, but just some macro areas like Contents, Dev, Event ecc", - "media": null + "text": "Also, these updates cover a lot of different aspects of this project and so maybe we could add some tags to filter the update? Maybe not complex as in the soup-gen or the chat-reader, but just some macro areas like Contents, Dev, Event ecc" } ] } \ No newline at end of file