feat: Update card script

- Use vanilla instead of jQuery
- Remove super script
- Remove event for dither variant
- Reindent

source/screens/demo/examples/card.njk

@@ -9,13 +9,15 @@ tags:
 {% extends "demo/_default.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 
-{% block title %}{{ title }}{% endblock %}
+{% block title %}{{ title }}
+{% endblock %}
 
 {% block head %}
 	{{ super() }}
 {% endblock %}
 
 {% block body %}
+
 	<!-- {{ page.fileSlug }}.page -->
 	<div class="card_bkg">
 		<div id="dither"></div>
@@ -45,7 +47,7 @@ tags:
 		{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
 	</div>
 	<div class="card_box">
-    <div id="jsCardHover">
+		<div id="js_content">
 			<p>Titel<br/>und Beschreibung</p>
 			<h1>{{ ph.name() }}</h1>
 			<p>
@@ -58,51 +60,40 @@ tags:
 {% endblock %}
 
 {% block script %}
-  {{ super() }}
 	<script>
-    $(document).ready(function () {
-      // composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
+		const flag = document.getElementById("flag");
+		let colors = new Array();
+		let iId = undefined;
+		let position = 0;
 
-      var colors = new Array();
-      var position = 0;
-
-      for (var i = 1; i <= $("#flag").children().length; i++) {
-        colors.push($("#triangle-" + i).attr("fill"));
+		for (let i = 1; i <= flag.childElementCount; i++) {
+			colors.push(document.getElementById("triangle-" + i).getAttribute("fill"));
 		}
 
-      $('#jsCardHover').on({
-        mouseenter: function () {
-          // $('#flag').addClass('effect');
-          // $('#flag').css('opacity', 0);
-          $('#flag')
-            .stop()
-            .fadeOut(10000);
-          this.iid = setInterval(function () {
-            for (var i = 1; i <= colors.length; i++) {
+		// console.log(colors);
+
+		document.getElementById('js_content').addEventListener('mouseenter', () => {
+			iId = setInterval(() => {
+				for (let i = 1; i <= colors.length; i++) {
 					position++;
+
 					if (position >= colors.length) {
 						position = 0;
 					}
-              $("#triangle-" + i).attr("fill", colors[position]);
+
+					document.getElementById("triangle-" + i).setAttribute("fill", colors[position]);
 				}
+
 				position++;
+
 				if (position >= colors.length) {
 					position = 0;
 				}
 			}, 600);
-        },
-        mouseleave: function () {
-          // $('#flag').removeClass('effect');
-          // $('#flag').css('opacity', 1);
-          $('#flag')
-            .stop()
-            .fadeIn(1000);
-          this.iid && clearInterval(this.iid);
-        },
-        click: function () {
-          $("#dither").toggle();
-        }
 		});
+
+		document.getElementById('js_content').addEventListener('mouseleave', () => {
+			iId && clearInterval(iId);
 		});
 	</script>
 {% endblock %}