test
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
@ -0,0 +1,54 @@
|
||||
const colophon = document.querySelector(".colophon");
|
||||
const container = document.querySelector(".index");
|
||||
|
||||
fetch("releases.json")
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
buildIndex(data.releases);
|
||||
});
|
||||
|
||||
const buildIndex = function (releases) {
|
||||
container.innerHTML = "";
|
||||
for (const [index, release] of releases.entries()) {
|
||||
let item = document.createElement("li");
|
||||
let link = document.createElement("a");
|
||||
link.href = index.toString().padStart(2, "0");
|
||||
link.innerHTML = index.toString().padStart(2, "0") + ". " + release.title;
|
||||
item.appendChild(link);
|
||||
item.addEventListener("mouseenter", (e) => {
|
||||
buildColophon(release);
|
||||
});
|
||||
container.appendChild(item);
|
||||
}
|
||||
};
|
||||
|
||||
const buildColophon = function (release) {
|
||||
colophon.innerHTML = "";
|
||||
let caretakers = document.createElement("div");
|
||||
caretakers.classList.add("caretakers");
|
||||
|
||||
for (const caretaker of release.caretakers) {
|
||||
caretakers.appendChild(buildAvatar(caretaker));
|
||||
}
|
||||
|
||||
let contributors = document.createElement("ul");
|
||||
contributors.classList.add("contributors");
|
||||
|
||||
for (const contributor of release.contributors) {
|
||||
let contribution = document.createElement("div");
|
||||
for (const person of contributor) {
|
||||
contribution.appendChild(buildAvatar(person));
|
||||
}
|
||||
contributors.appendChild(contribution);
|
||||
}
|
||||
colophon.appendChild(caretakers);
|
||||
colophon.appendChild(contributors);
|
||||
};
|
||||
|
||||
const buildAvatar = function (who) {
|
||||
let avatar = document.createElement("img");
|
||||
avatar.classList.add("avatar");
|
||||
avatar.src = "img/avatar/" + who + ".jpg";
|
||||
avatar.alt = who;
|
||||
return avatar;
|
||||
};
|
||||
@ -0,0 +1,239 @@
|
||||
{
|
||||
"releases": [
|
||||
{
|
||||
"title": "Try Out",
|
||||
"caretakers": [],
|
||||
"contributors": []
|
||||
},
|
||||
{
|
||||
"title": "Yet to be Named",
|
||||
"caretakers": [
|
||||
"Chae",
|
||||
"Mitsa"
|
||||
],
|
||||
"contributors": [
|
||||
[
|
||||
"Alex",
|
||||
"Em"
|
||||
],
|
||||
[
|
||||
"Miri"
|
||||
],
|
||||
[
|
||||
"Kamo"
|
||||
],
|
||||
[
|
||||
"Mitsa",
|
||||
"Gr"
|
||||
],
|
||||
[
|
||||
"Kim",
|
||||
"Chae"
|
||||
],
|
||||
[
|
||||
"Supi",
|
||||
"Jian"
|
||||
],
|
||||
[
|
||||
"Gersande",
|
||||
"Carmen"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Uneven Patterns",
|
||||
"caretakers": [
|
||||
"Kim",
|
||||
"Jian"
|
||||
],
|
||||
"contributors": [
|
||||
[
|
||||
"Em",
|
||||
"Miri"
|
||||
],
|
||||
[
|
||||
"Kamo",
|
||||
"Mitsa",
|
||||
"Supi"
|
||||
],
|
||||
[
|
||||
"Gersande",
|
||||
"Carmen",
|
||||
"Alex"
|
||||
],
|
||||
[
|
||||
"Gr",
|
||||
"Chae"
|
||||
],
|
||||
[
|
||||
"Kim",
|
||||
"Jian"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Emergent Opera",
|
||||
"caretakers": [
|
||||
"Gersande",
|
||||
"Gr",
|
||||
"Kamo"
|
||||
],
|
||||
"contributors": [
|
||||
[
|
||||
"Kamo",
|
||||
"Supi"
|
||||
],
|
||||
[
|
||||
"Gersande"
|
||||
],
|
||||
[
|
||||
"Em",
|
||||
"Jian"
|
||||
],
|
||||
[
|
||||
"Carmen",
|
||||
"Miri"
|
||||
],
|
||||
[
|
||||
"Alex"
|
||||
],
|
||||
[
|
||||
"Chae",
|
||||
"Kim"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "The Parliament",
|
||||
"caretakers": [
|
||||
"Mitsa",
|
||||
"Gr",
|
||||
"Miri"
|
||||
],
|
||||
"contributors": [
|
||||
[
|
||||
"Supi",
|
||||
"Kim"
|
||||
],
|
||||
[
|
||||
"Kamo",
|
||||
"Miri"
|
||||
],
|
||||
[
|
||||
"Mitsa",
|
||||
"Alex"
|
||||
],
|
||||
[
|
||||
"Gersande",
|
||||
"Jian"
|
||||
],
|
||||
[
|
||||
"Em",
|
||||
"Carmen"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Nested Narratives",
|
||||
"caretakers": [
|
||||
"Supi",
|
||||
"Em",
|
||||
"Alex"
|
||||
],
|
||||
"contributors": [
|
||||
[
|
||||
"Miri",
|
||||
"Mitsa"
|
||||
],
|
||||
[
|
||||
"Alex",
|
||||
"Supi"
|
||||
],
|
||||
[
|
||||
"Em",
|
||||
"Kamo"
|
||||
],
|
||||
[
|
||||
"Jian",
|
||||
"Gr"
|
||||
],
|
||||
[
|
||||
"Gersande",
|
||||
"Chae"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Sharing methods for diffractive reading",
|
||||
"caretakers": [
|
||||
"Kamo",
|
||||
"Kim",
|
||||
"Gr"
|
||||
],
|
||||
"contributors": [
|
||||
[
|
||||
"Em",
|
||||
"Supi"
|
||||
],
|
||||
[
|
||||
"Miri"
|
||||
],
|
||||
[
|
||||
"Chae"
|
||||
],
|
||||
[
|
||||
"Carmen",
|
||||
"Jian"
|
||||
],
|
||||
[
|
||||
"Alex",
|
||||
"Mitsa"
|
||||
],
|
||||
[
|
||||
"Chae",
|
||||
"Em"
|
||||
],
|
||||
[
|
||||
"Kamo",
|
||||
"Kim",
|
||||
"Gr"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "[[Unfolding [] implicancies]]",
|
||||
"caretakers": [
|
||||
"Em",
|
||||
"Jian",
|
||||
"Miri"
|
||||
],
|
||||
"contributors": [
|
||||
[
|
||||
"Mitsa"
|
||||
],
|
||||
[
|
||||
"Gr"
|
||||
],
|
||||
[
|
||||
"Kamo"
|
||||
],
|
||||
[
|
||||
"Chae"
|
||||
],
|
||||
[
|
||||
"Kim"
|
||||
],
|
||||
[
|
||||
"Supi"
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Prologue (Working Title)",
|
||||
"caretakers": [
|
||||
"Chae",
|
||||
"Carmen"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,95 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
background-color: peachpuff;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 24px;
|
||||
/* position: absolute; */
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
font-size: 48px;
|
||||
font-weight: normal;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.index {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
padding: 0 24px;
|
||||
margin: 0;
|
||||
|
||||
display: flex;
|
||||
/* justify-content: center; */
|
||||
align-content: flex-start;
|
||||
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.index li {
|
||||
position: relative;
|
||||
padding: 6px 12px;
|
||||
background-color: white;
|
||||
border-radius: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.index a:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.avatar.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.colophon {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 24px;
|
||||
padding: 24px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.colophon .caretakers {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||