render/base.css

@@ -1,6 +1,6 @@
 @font-face {
 	font-family: "Noto Color Emoji";
-	src: url("./fonts/NotoColorEmoji/NotoColorEmoji-Regular.ttf");
+	src: url("./fonts/NotoColorEmoji/Noto-COLRv1-noflags.ttf");
 }
 @font-face {
 	font-family: "OpenMojiDemoFont";
@@ -10,7 +10,10 @@
 	font-family: "OpenMojiDemoFont";
 	src: url("OpenMoji-color-colr1_svg.woff2") format("woff2");
 }*/
-
+@font-face {
+	font-family: "Twemoji Mozilla Built";
+	src: url("./fonts/Mozilla/Twemoji.Mozilla.ttf");
+}
 
 
 html, body {
@@ -30,11 +33,11 @@ h1,h2,h3,h4,h5 {
 }
 
 .emoji {
+	/*font-family: "Twemoji Mozilla Built", sans-serif;*/
 	/*font-family: "Noto Color Emoji", sans-serif;*/
 	font-family: "OpenMojiDemoFont", sans-serif;
-	/*font-weight: 400;
+	font-weight: 400;
-	font-style: regular;
+	font-style: normal;
-	*/
 }
 .emoji:after {
 	font-variant-emoji: emoji; /* experimental and only in firefox :( */
@@ -241,6 +244,9 @@ body.min { /* split feature */
 	position: absolute;
 	animation: flash var(--animation-duration) infinite;
 }
+.block-gold.anim_off {
+	animation: none;
+}
 
 
 :root {

render/index.js

@@ -39,9 +39,10 @@ function channelWithEmoji(value) {
 	}
 	const emoji = replacements[value];
 	if (emoji) {
-		return [Tag('div', {"class": "emoji"}, emoji, [
+		return [
+			Tag('span', {"class": "emoji"}, emoji),
 			Tag("span", {"class": "text-left-margin"}, value)
-		])];
+		];
 	} else {
 		return [];
 	}
@@ -163,7 +164,9 @@ function buildData(table, images, data, sort) {
 	for (let block of images.querySelectorAll(".image-container")) {
 		block.addEventListener("click", function() {
 			let diffElement = this.querySelector(".block-diff");
+			let goldElement = this.querySelector(".block-gold");
 			diffElement.classList.toggle("show_diff");
+			goldElement.classList.toggle("anim_off");
 		});
 	};
 
@@ -197,6 +200,9 @@ const loadFromLocalStorage = (key) => {
 }
 
 
+
+
+
 window.onload = () => {
 	const linkElements = document.querySelectorAll('link[rel^="stylesheet"][data-theme]');
 	function updateLinkRel(linkElements, id) {
@@ -438,6 +444,26 @@ window.onload = () => {
 		gridContainer.classList.toggle("reversed");
 	}
 
+
+
+	// stop animation when not in viewport
+	function handleIntersection(entries, observer) {
+		for (let entry of entries) {
+			if (!entry.isIntersecting) {
+				entry.target.classList.add("anim_off");
+			} else {
+				entry.target.classList.remove("anim_off");
+			}
+		}
+	}
+	const observer = new IntersectionObserver(handleIntersection, {
+		root: null,
+		threshold: 0.1
+	});
+	for (let element of document.querySelectorAll(".block-gold")) {
+		observer.observe(element);
+	}
+
 }