cms, contents and a bit of dasein
Co-authored-by: grgrce <grgrce@users.noreply.github.com>master
parent
0c2e43a1b6
commit
6c56b80f42
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
@ -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,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…
Reference in New Issue