cms, contents and a bit of dasein

Co-authored-by: grgrce <grgrce@users.noreply.github.com>
master
km0 3 years ago
parent 0c2e43a1b6
commit 6c56b80f42

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

107
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);
}

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

@ -1,53 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<script src='../faccine.js' defer></script>
<link href="style.css" rel="stylesheet">
<title>k-pub</title>
</head>
<body>
<pre class="smirk"style='font-size:0.7em'><b><a id='smirk' href="../index.html" ></a></b></pre>
<div class="main">
<div class="lyrics">
<h1>Battiato feat. Simone Weil Karaoke</h1>
<p>
" 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."
</p>
<p>
"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."
</p>
<p>
"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."
</p>
</div>
<div class="documentation">
<h3 class="info">an enchanting reading-choir featuring Simone Weil's diaries and Franco Battiato's songs.</h3>
<p>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.</p>
<img src="assets/karaokedocu.jpg" alt="try1">
<p> tryouts with vvvv and Laibach feat. MissKeta </p>
</div>
</div>
</body>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="style.css" rel="stylesheet" />
<script src="cms.js" defer></script>
<title>🎵 K-PUB</title>
</head>
<body>
<header>
<h1>
KARAOKE <br />
REPUBLISHING
</h1>
<div class="issue">
<div class="current">ISSUE _ 01</div>
<h2>Simone Weil & Franco Battiato</h2>
</div>
</header>
<main>
<div class="lyrics">
<p>
<span class="karaoke">"To ascertain exactly what the miser whose </span>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."
</p>
<p>
"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."
</p>
<p>
"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."
</p>
</div>
<div class="documentation">
<div class="description">
<h2 class="info">
An enchanting reading-in-choir featuring Simone Weil's diaries through the
musical intuitions of Franco Battiato
</h2>
<p>
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.
</p>
</div>
<div class="updates" id="updates-container">
<!-- <div class="update">
<div class="date">October the 22nd, 2021</div>
<h3 class="title">Not every update needs a title</h3>
<figure class="media">
<img
src="./assets/keta_laibach.jpg"
alt="Note that the alt is not just a copy of the caption."
/>
<figcaption>
Some updates have an image, some others a video, some others again
nothing at all. Please use super lightweight contents, the year is
2021.
</figcaption>
</figure>
<p class="text">
The text is not always relevant, but sometimes all we need is a bold
statement and a join tea party.
</p>
</div> -->
</div>
</div>
</main>
</body>
</html>

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

@ -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"
}
}
]
}
Loading…
Cancel
Save