test release

main
km0 2 years ago
parent abf01a2426
commit 181c6994cc

@ -0,0 +1,9 @@
const background = document.querySelector("#background");
const releases = document.querySelectorAll(".index li a");
for (const release of releases) {
release.addEventListener("mouseenter", (e) => {
background.src = `img/${release.dataset.bg}.jpg`;
});
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

@ -0,0 +1,41 @@
<!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" />
<title>SI18</title>
<link rel="stylesheet" href="style.css" />
<script src="background.js" defer></script>
</head>
<body>
<img src="img/all.jpg" alt="contributors" id="background" />
<ul class="index">
<li>
<a href="00" data-bg="all">Intro ~ Outro</a>
</li>
<li>
<a href="01" data-bg="01">Yet to Be Named</a>
</li>
<li>
<a href="02" data-bg="02">Uneven Patterns</a>
</li>
<li>
<a href="03" data-bg="03">Emergent Opera</a>
</li>
<li>
<a href="04" data-bg="04">The Parliament</a>
</li>
<li>
<a href="05" data-bg="05">Nested Narratives</a>
</li>
<li>
<a href="06" data-bg="06">Sharing methods for diffractive reading</a>
</li>
<li>
<a href="07" data-bg="07">[[ Unfolding [ ] Implicancies ]]</a>
</li>
</ul>
</body>
</html>

@ -0,0 +1,72 @@
* {
box-sizing: border-box;
}
html,
body {
background-color: #006dfe;
}
.index {
width: 100%;
height: 100vh;
padding: 0 24px;
margin: 0;
display: flex;
justify-content: center;
align-content: center;
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);
}
#background {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
object-fit: cover;
}
@media (max-width: 767.98px) {
#background {
object-fit: contain;
object-position: top;
}
}
Loading…
Cancel
Save