+
diff --git a/lib/spawnSticker.js b/lib/spawnSticker.js
new file mode 100644
index 0000000..e7c85d5
--- /dev/null
+++ b/lib/spawnSticker.js
@@ -0,0 +1,46 @@
+// A lightweight sticker spawner to stick elements on your html page
+const stickerSpawners = document.querySelectorAll("[data-sticker]");
+var throttleSpawn = throttle(spawnSticker, 400);
+
+Array.from(stickerSpawners).forEach((spawner) => {
+ spawner.addEventListener("mousemove", (e) => throttleSpawn(e));
+});
+
+function spawnSticker(e) {
+ var rect = e.target.getBoundingClientRect();
+ let position = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+ let content = e.target.dataset.sticker;
+ e.originalTarget.appendChild(createSticker(content, position));
+}
+
+
+function createSticker(content, position) {
+ sticker = document.createElement("span");
+ sticker.classList.add("sticker");
+ sticker.innerHTML = content;
+ sticker.style.left = position.x + "px";
+ sticker.style.top = position.y + "px";
+
+ sticker.style.transform = `
+ translate(-50%, -50%)
+ rotate(${Math.random() * 40 - 20}deg)
+ `;
+
+ return sticker;
+}
+
+
+// from https://stackoverflow.com/questions/27078285/simple-throttle-in-javascript
+
+function throttle (callback, limit) {
+ var waiting = false; // Initially, we're not waiting
+ return function () { // We return a throttled function
+ if (!waiting) { // If we're not waiting
+ callback.apply(this, arguments); // Execute users function
+ waiting = true; // Prevent future invocations
+ setTimeout(function () { // After a period of time
+ waiting = false; // And allow future invocations
+ }, limit);
+ }
+ }
+}
\ No newline at end of file
diff --git a/sticker.css b/sticker.css
new file mode 100644
index 0000000..0f46a47
--- /dev/null
+++ b/sticker.css
@@ -0,0 +1,12 @@
+.sticker {
+ position: absolute;
+ user-select: none;
+ border: 1px solid currentColor;
+ border-radius: 12px;
+ white-space: nowrap;
+ background-color: white;
+ font-size: 18px;
+ padding: 0 6px;
+ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+ text-decoration: none;
+}
diff --git a/stylesheet.css b/stylesheet.css
index 8e9eb66..c4265d1 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -16,6 +16,7 @@
@import 'fonts.css';
@import 'mobile.css' screen and (max-width: 900px);
+@import 'sticker.css';
body{
min-width: 720px;
@@ -127,6 +128,28 @@ section#issues{
font-family: 'special-issue-14';
}
+.issue#special-issue-16{
+ font-family: 'special-issue-16';
+}
+
+#special-issue-16 .issue-title {
+ font-weight: bold;
+ font-style: italic;
+}
+
+#special-issue-16 .issue-title {
+ font-weight: bold;
+ font-style: italic;
+}
+
+#special-issue-16 {
+ position: relative;
+}
+
+#special-issue-16 * {
+ position: relative;
+}
+
/* SECTIONS: INTRO + INFO */
section#intro.endpoint,