XPUB
/
SI16
57
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Landing page init and sticker mode

Browse Source
master
km0 3 years ago
parent 8aa08e0318
commit 5d95a02784
9 changed files with 190 additions and 13 deletions
Show Stats Download Patch File Download Diff File

5
README.md
Unescape Escape View File

@ -1,4 +1,3 @@
SI16-VLTK
==========
# LEARNING HOW TO WALK WHILE CAT-WALKING
Change me.
eheh

36
index.html
Unescape Escape View File

@ -1,11 +1,37 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SI16</title>
<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>Learning how to walk while cat-walking</title>
<link rel="stylesheet" href="style.css" />
<!-- <script src="position.js" defer></script> -->
<script src="sticker.js" defer></script>
</head>
<body>
hello world
<!-- <div class="container" id="container">
<button class="about-button">?</button>
<h1 class="title">Learning how to walk while cat-walking</h1>
<h2 class="info">Special Issue 16 - XPUB - 2021</h2>
</div> -->
<div id="sticker-container"></div>
<ul class="informations-list" id="information-list">
<li class="info">Special Issue 16</li>
<li class="info">Experimental Publishing</li>
<li class="info">Learning how to walk while cat-walking</li>
<li class="info">A vernacular API</li>
<li class="deco"><img src="/static/svg/function_2b.svg" /></li>
<li class="info">17.12.2021</li>
<li class="info">Varia</li>
<li class="deco"><img src="/static/svg/home_1b.svg" /></li>
<li class="info">Rotterdam</li>
<li class="info">Replace</li>
<li class="info">Map</li>
<li class="info">Etc</li>
<li class="deco"><img src="/static/svg/etc_1b.svg" /></li>
</ul>
</body>
</html>

1
static/svg/etc_1b.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.44 57.59"><defs><style>.cls-1{fill:none;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:2.5px;}.cls-2{fill:#1d1d1b;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M37.57,40.72a3.5,3.5,0,0,0-3,1.72,3.36,3.36,0,0,0-5.64-.13,3.78,3.78,0,1,0-.22,3.42,3.36,3.36,0,0,0,5.86.25,3.49,3.49,0,1,0,3-5.26Z"/><path class="cls-1" d="M54.2,30.74h0c-18-15.2-25.7,33.17-18-15.2S1.13,57.06,1.13,57.06"/><path class="cls-2" d="M27.66,42.21l-.07-.06.39.51,0-.07.25.6,0-.09.09.66v-.1l-.08.66a.35.35,0,0,1,0-.13l-.25.6a.64.64,0,0,1,.08-.14l-.39.51.13-.13-.51.39.13-.07-.6.25a.27.27,0,0,1,.12,0l-.66.09h.17l-.67-.09a.86.86,0,0,1,.23.06l-.59-.25a1.61,1.61,0,0,1,.33.2l-.51-.39c.12.09.22.19.33.29a1.77,1.77,0,0,0,.8.52,2.32,2.32,0,0,0,1.93,0,1.77,1.77,0,0,0,.8-.52l.39-.5a2.55,2.55,0,0,0,.35-1.27l-.09-.66a2.52,2.52,0,0,0-.65-1.1,2.39,2.39,0,0,0-.23-.22c-.19-.16-.4-.31-.6-.47l-.13-.09L28,41.1l-.07,0c-.21-.09-.43-.19-.65-.27l-.14,0a7.11,7.11,0,0,0-.79-.1h-.07c-.11,0-.56.07-.67.09h0a2.37,2.37,0,0,0-.4.15,3.17,3.17,0,0,0-.38.17l-.3.23-.29.23-.07.07-.21.27-.21.27,0,0a.08.08,0,0,0,0,.05c-.1.2-.19.42-.27.62l0,.11v0c0,.18-.07.49-.09.67v.08c0,.11.07.58.09.68s0,0,0,.06v0h0l.25.6,0,.05.2.26.21.27.05,0a2,2,0,0,0,.81.52,2.32,2.32,0,0,0,1.93,0,1.92,1.92,0,0,0,.8-.52l.39-.51A2.43,2.43,0,0,0,28.39,44l-.09-.66a2.53,2.53,0,0,0-.64-1.11Z"/><path class="cls-2" d="M24.53,45.94c3.21,0,3.22-5,0-5s-3.23,5,0,5Z"/><path class="cls-2" d="M31.38,46.65c3.22,0,3.22-5,0-5s-3.22,5,0,5Z"/><path class="cls-2" d="M37.52,46.41c3.22,0,3.22-5,0-5s-3.22,5,0,5Z"/><path class="cls-2" d="M33.5,46.18c3.22,0,3.23-5,0-5s-3.22,5,0,5Z"/><path class="cls-2" d="M24.44,47.91c3.21,0,3.22-5,0-5s-3.23,5,0,5Z"/><path class="cls-2" d="M38.37,47.31c3.22,0,3.22-5,0-5s-3.22,5,0,5Z"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
static/svg/function_2b.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.85 42.98"><defs><style>.cls-1{fill:none;}.cls-1,.cls-2{stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:2.5px;}.cls-2{fill:#1d1d1b;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M33.83,1.25H52s8.19,23.61,0,40.29"/><circle class="cls-2" cx="40.03" cy="35.54" r="6.19"/><path class="cls-1" d="M22.87,41.73h-18s-8.12-23.61,0-40.3"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 465 B

1
static/svg/home_1b.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.12 50.84"><defs><style>.cls-1{fill:#1d1d1b;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:2.5px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="cls-1" cx="14.37" cy="9.08" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="3.67" cy="8.8" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="11.95" cy="16.11" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="6.09" cy="21.24" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="11.95" cy="23.04" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="14.37" cy="30.93" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="16.79" cy="38.5" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="19.21" cy="44.53" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="38.03" cy="47.06" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="52.45" cy="33.51" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="40.45" cy="39.02" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="45.12" cy="46.66" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="45.12" cy="28.45" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="38.03" cy="30.98" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="38.03" cy="17.38" rx="2.42" ry="2.53"/><ellipse class="cls-1" cx="38.03" cy="3.78" rx="2.42" ry="2.53"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
static/svg/replacement_2.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74.26 64.97"><defs><style>.cls-1{fill:none;}.cls-1,.cls-2{stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:2.5px;}.cls-2{fill:#1d1d1b;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M67,43.1c-18.84-94.16-51.85,0-51.85,0"/><circle class="cls-1" cx="11.78" cy="53.19" r="10.53"/><circle class="cls-2" cx="67.01" cy="43.1" r="6"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 459 B

1
static/svg/vernacular-map_sg5.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54.03 61.73"><defs><style>.cls-1{fill:none;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:2.5px;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="27.22" x2="27.22" y2="61.73"/><line class="cls-1" x1="53.18" y1="6.81" x2="27.22" y2="30.86"/><line class="cls-1" x1="50.16" y1="50.9" x2="27.22" y2="30.86"/><line class="cls-1" x1="0.6" y1="45.42" x2="27.22" y2="30.86"/><circle class="cls-1" cx="12.18" cy="21.12" r="9.74"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 554 B

57
sticker.js
Unescape Escape View File

@ -0,0 +1,57 @@
const informations = document.getElementById("information-list");
const stickerContainer = document.getElementById("sticker-container");
infoList = Array.from(informations.children);
loopIndex = 0;
let windowWidth;
let windowHeight;
let palette = ["#9EDAE2", "#9FD3A8", "#F7D8E8", "#F9F5B0", "#FFC496"];
window.addEventListener("load", () => {
getSize();
let color = palette[(palette.length * Math.random()) | 0];
document.documentElement.style.setProperty("--background", color);
});
window.addEventListener("resize", (e) => {
getSize();
});
function getSize() {
windowWidth = stickerContainer.clientWidth;
windowHeight = stickerContainer.clientHeight;
}
function percentagePosition(e, target) {
let targetRect = target.getBoundingClientRect();
let x = e.clientX - targetRect.left;
let y = e.clientY - targetRect.top;
return { x: ((x / windowWidth) * 100).toFixed(2), y: ((y / windowHeight) * 100).toFixed(2) };
}
window.addEventListener("click", (e) => {
placeSticker(percentagePosition(e, stickerContainer), infoList[loopIndex]);
// Cringe sorry
if (loopIndex < infoList.length - 1) {
loopIndex++;
} else {
loopIndex = 0;
}
});
function placeSticker(position, element) {
let sticker = element.cloneNode(true);
sticker.classList.add("sticker");
sticker.style.left = position.x + "%";
sticker.style.top = position.y + "%";
sticker.style.transform = `
translate(-50%, -50%)
rotate(${Math.random() * 40 - 20}deg)
`;
stickerContainer.appendChild(sticker);
}

90
style.css
Unescape Escape View File

@ -0,0 +1,90 @@
:root {
--thickness: 1px;
--background: #9fd3a8;
--font: Arial, Helvetica, sans-serif;
}
html,
body {
margin: 0;
background-color: var(--background);
font-size: 24px;
font-family: var(--font);
height: 100vh;
}
/* .container {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
margin: 0 auto;
justify-content: start;
align-items: center;
}
.about-button {
width: 200px;
height: 200px;
border: var(--thickness) solid currentColor;
background-color: var(--background);
border-radius: 50%;
font-size: 48px;
}
.about-button:hover {
background-color: white;
cursor: pointer;
} */
/* .title, */
.info {
display: inline-block;
padding: 8px;
background-color: var(--background);
border: var(--thickness) solid currentColor;
margin: 0;
}
#sticker-container {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 100;
}
.sticker {
position: absolute;
user-select: none;
border: var(--thickness) solid currentColor;
border-radius: 16px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.sticker.info {
background-color: white;
}
.informations-list {
display: none;
}
.sticker.deco {
background-color: white;
min-width: 64px;
min-height: 64px;
padding: 16px;
}
li {
list-style: none;
}
Write Preview
Loading…
Cancel
Save