added eastereggs. spoilers beware

Signed-off-by: Wachtl Enterprises LLC <tyrolyean@escpe.net>

.forgejo/workflows/deploy.yml

@@ -33,6 +33,12 @@ jobs:
           submodules: recursive
           lfs: 'true'
 
+      - name: Replace version and timestamp
+        run: |
+          sed -i -e "s/{{TAG}}/$GITHUB_REF_NAME/g" ./hugo.toml
+          sed -i -e "s/{{COMMIT}}/$GITHUB_SHA/g" ./hugo.toml
+          sed -i -e "s/show_version = false/show_version = true/g" ./hugo.toml
+
       - name: Build website
         run: |
           hugo build --minify

.gitattributes

@@ -6,3 +6,4 @@
 *.ttf filter=lfs diff=lfs merge=lfs -text
 *.woff filter=lfs diff=lfs merge=lfs -text
 *.woff2 filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text

README.md

@@ -23,7 +23,7 @@ This repository contains the <https://it-syndikat.org> or
 
 ## Edit the site
 
-## Dependencies
+### Dependencies
 
 - hugo
 - git

assets/css/its.css

@@ -1,3 +1,9 @@
+:root {
+	--nixie-orange: orange;
+	--nixie-orange-glow: #ffa500;
+	--nixie-green: #17e129;
+}
+
 .sensor-table * {
 	border: none;
 }
@@ -40,8 +46,10 @@ code {
 
 .tube {
 	padding: 0.5rem;
+	width: 1.8rem;
+	text-align: center;
 	box-shadow: inset 0 0 25px 10px rgba(0,0,0,0.45);
-	color: orange;
+	color: var(--nixie-orange);
 	border-radius: 10px 10px 0 0;
 	border: 0.15rem solid rgb(20, 20, 20);
 	position: relative;
@@ -62,7 +70,7 @@ code {
 
 .tube > span {
     color: #FAE48E;
-    text-shadow: 2px 0 3px #ffa500, -2px 0 3px #ffa500, 0 2px 3px #ffa500, 0 -2px 3px #ffa500, 0 0 1rem #ffa500, 0 0 2rem #ffa500, 0 0 2rem #ffa500, 0 0 3rem #ffa500;
+    text-shadow: 2px 0 3px var(--nixie-orange), -2px 0 3px var(--nixie-orange), 0 2px 3px var(--nixie-orange), 0 -2px 3px var(--nixie-orange), 0 0 1rem var(--nixie-orange), 0 0 2rem var(--nixie-orange), 0 0 2rem var(--nixie-orange), 0 0 3rem var(--nixie-orange);
     opacity: 1;
     display: inline-block;
     animation: glow 1s infinite;
@@ -80,13 +88,53 @@ code {
 
 @keyframes glow {
     0%, 100% {
-        text-shadow: 2px 0 3px #ffa500, -2px 0 3px #ffa500, 0 2px 3px #ffa500, 0 -2px 3px #ffa500, 0 0 1rem #ffa500, 0 0 2rem #ffa500, 0 0 2rem #ffa500, 0 0 3rem #ffa500;
+        text-shadow: 2px 0 3px var(--nixie-orange), -2px 0 3px var(--nixie-orange), 0 2px 3px var(--nixie-orange), 0 -2px 3px var(--nixie-orange), 0 0 1rem var(--nixie-orange), 0 0 2rem var(--nixie-orange), 0 0 2rem var(--nixie-orange), 0 0 3rem var(--nixie-orange);
     }
     50% {
-        text-shadow: 2px 0 4px #ffa500, -2px 0 4px #ffa500, 0 2px 4px #ffa500, 0 -2px 4px #ffa500, 0 0 1.5rem #ffa500, 0 0 3rem #ffa500, 0 0 3rem #ffa500, 0 0 4rem #ffa500;
+        text-shadow: 2px 0 4px var(--nixie-orange), -2px 0 4px var(--nixie-orange), 0 2px 4px var(--nixie-orange), 0 -2px 4px var(--nixie-orange), 0 0 1.5rem var(--nixie-orange), 0 0 3rem var(--nixie-orange), 0 0 3rem var(--nixie-orange), 0 0 4rem var(--nixie-orange);
     }
 }
 
+#nyan-cat {
+    position: fixed;
+    top: 50%;
+    left: -200px; /* Start off-screen */
+    transform: translateY(-50%);
+    animation: nyanFly 10s linear infinite;
+}
+
+@keyframes nyanFly {
+    0% {
+        left: -200px;
+    }
+    100% {
+        left: 100%;
+    }
+}
+
+#pac-man {
+	position: absolute;
+	top: 23.5%;
+	left: -100px; /* Start off-screen */
+	z-index: 100;
+	transform: translateY(-50%);
+	transform: rotate(180deg);
+	animation: pacManMove 10s linear forwards;
+}
+
+#pac-man img {
+	width: 50px;
+}
+
+@keyframes pacManMove {
+	0% {
+		left: -100px;
+	}
+	100% {
+		left: 100%;
+	}
+}
+
 /*** FONTS ***/
 @font-face {
   font-family: 'Perfect DOS VGA437';
@@ -210,3 +258,9 @@ code {
 		fill: white;
 	}
 }
+
+@media screen and (max-width: 768px) {
+	.menu-status #status-tube {
+		display: none;
+	}
+}

assets/js/its.js

@@ -2,28 +2,28 @@ const spaceApiUrl = "https://spaceapi.it-syndikat.org/api/";
 let statusValue;
 
 function setSignalColour(colour) {
-  for (const c of ["red", "yellow", "green"]) {
-    document.getElementById(`signal-${c}`).style.display =
-      c == colour ? "block" : "none";
-  }
+	for (const c of ["red", "yellow", "green"]) {
+		document.getElementById(`signal-${c}`).style.display =
+			c == colour ? "block" : "none";
+	}
 }
 
 const hasSensorsWidget = () =>
-  document.getElementsByClassName("widget-sensors").length > 0;
+	document.getElementsByClassName("widget-sensors").length > 0;
 
 async function randomDelay(min, max) {
-  await new Promise((resolve) =>
-    setTimeout(resolve, (Math.random() * (max - min) + min) * 1000),
-  );
+	await new Promise((resolve) =>
+		setTimeout(resolve, (Math.random() * (max - min) + min) * 1000),
+	);
 }
 async function signalGlitch(minDelay, maxDelay) {
-  while (true) {
-    await randomDelay(3, 7);
+	while (true) {
+		await randomDelay(3, 7);
 
-    setSignalColour("yellow");
-    await randomDelay(0.5, 1.5);
-    setSignalColour(statusValue ? "green" : "red");
-  }
+		setSignalColour("yellow");
+		await randomDelay(0.5, 1.5);
+		setSignalColour(statusValue ? "green" : "red");
+	}
 }
 
 /**
@@ -31,52 +31,432 @@ async function signalGlitch(minDelay, maxDelay) {
  * @param {string} content the content to be displayed in the nixie tubes.
  */
 function setNixieContent(content) {
-	let tube_boxes = document.getElementsByClassName('tube-box');
+	content = content.toUpperCase();
+	let tube_boxes = document.getElementsByClassName("tube-box");
 	Array.prototype.forEach.call(tube_boxes, (tube_box, index) => {
 		let tubes = tube_box.getElementsByClassName("tube");
 		Array.prototype.forEach.call(tubes, (tube, index) => {
-			const span = tube.querySelector('span');
+			const span = tube.querySelector("span");
 			if (index < content.length) {
-				span.textContent = content.split('')[index];
+				span.textContent = content.split("")[index];
 			} else {
-				span.textContent = '';
+				span.textContent = "";
 			}
 		});
 	});
 }
 
-window.onload = () => {
-  fetch(spaceApiUrl)
-    .then((response) => response.json()) // Parse the JSON from the response
-    .then((data) => {
-      const coreTemperatureValue = data.sensors.temperature[0].value;
-      const coreHumidityValue = data.sensors.humidity[0].value;
-      statusValue = data.state.open;
+/**
+ * changes the colors of the nixies.
+ * @param {string} color can be a variable or hexcode.
+ */
+function setNixieColor(color) {
+	document.documentElement.style.setProperty('--nixie-orange', color);
+}
 
-      setSignalColour(statusValue === false ? "red" : "green");
+// The Easter Egg Section. Beware of spoilers!
+// the variable names are bad on purpose to prevent spoilers ;)
+/* ദ്ദി •⩊• )
+⠀⠀⠀⠀⠀⠀⠀⠀⢀⣶⣿⣷⣶⣶⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⣿⣿⣿⣿⣷⣤⣤⣴⣶⣶⣶⣶⣶⣶⣶⣶⣶⣦⣤⣤⣀⡀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣤⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⣿⣿⣿⡿⢛⣿⣿⠿⠟⠋⠉⠁⡀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠙⠛⠿⠿⣶⣦⣄⣀⣴⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⣿⣿⣿⣿⣿⣾⠿⠋⠁⠀⠀⠀⠠⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠻⢿⣿⣿⣿⣿⣿⣿⣿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⢀⣴⣿⣿⣿⣿⣿⣿⠟⠁⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢦⡄⠀⠻⣿⣿⣿⣿⣿⣿⣿⣷⡄⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⣴⣿⣿⣿⣿⣿⣿⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢤⡀⠀⠀⠀⠀⠀⠀⠀⠙⢷⡀⠈⢿⣿⣿⣿⣿⣿⣿⣿⣄⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⢾⣿⣿⣿⣿⣿⣿⠏⠀⠀⠀⠀⡀⠀⠀⠀⢠⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⣆⠀⠀⠀⠀⠀⠀⠀⠈⠻⣦⣾⣿⣿⠿⢿⣿⣿⣿⣿⣆⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠻⣿⣿⣿⣿⠃⠀⠀⠀⠀⣠⠂⠀⠀⠀⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣧⡀⠀⠀⠀⠀⠀⠀⠀⠹⣿⣿⣿⣧⠘⢿⣿⣿⣿⣿⣆⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠙⣿⣿⠇⠀⠀⠀⠀⢠⡟⠀⠀⢀⣴⣿⡇⠀⠀⠀⠀⠀⠀⣴⡄⠀⠀⠀⠀⠀⠘⣷⡀⠀⠀⠀⠀⠀⠀⠀⠹⣿⣿⣿⣇⠘⢿⣿⣿⣿⣿⣆⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⢰⣿⡟⠀⠀⠀⠀⠀⣼⠃⠀⢠⣾⠋⠸⣿⠀⡄⠀⠀⠀⠀⣿⣿⣄⠀⠀⢠⡀⠀⠸⣷⡀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⡄⢘⣿⣿⣿⣿⣿⠂⠀⠀
+⠀⠀⠀⠀⠀⠀⣿⣿⣷⠄⠀⠀⠀⢰⣿⠀⣰⡿⠧⠤⣤⣿⡆⣷⠀⠀⠀⠀⣿⠉⢿⣦⠀⠘⣿⣦⡀⢻⣷⡀⠀⠀⠀⠀⠀⠀⢹⣿⣿⣿⣷⣿⣿⣿⣿⡿⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⢸⣿⣿⣿⠀⠀⠀⠀⢸⣿⣰⡿⠁⠀⠀⠀⠘⣿⣿⣇⠀⠀⠀⣿⠀⠠⣿⣷⡶⣿⡿⢿⣮⣿⣇⠀⠀⠀⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⡂⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⣾⡿⢿⣿⠀⠀⠀⠀⣸⣿⣿⣷⣿⣷⣦⣄⠀⣹⣿⣿⡄⠀⠀⣿⠀⠀⠀⠘⠿⣿⣧⠈⠻⣿⣿⡀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⠏⠘⣿⣇⠀⠀⠀⠀
+⠀⠀⠀⠀⢀⣿⠇⢸⡿⢾⡄⠀⠀⣿⣿⠋⢱⣿⣿⣿⣿⣷⡟⢻⣿⣷⡀⠀⣿⡀⢠⣤⢀⣠⣬⣿⣤⣄⡘⢿⡇⠀⠀⠀⢸⡀⠀⢿⣿⣿⣿⣇⠀⠀⢿⣿⠀⠀⠀⠀
+⠀⠀⠀⠀⢸⣿⠀⢸⡇⢸⡇⠀⠀⣿⣿⠀⣿⣿⣿⣿⣯⣉⣿⠀⠹⣿⣿⡄⢹⡇⢈⣴⣿⣿⣿⣿⣿⡿⣿⣿⣇⠀⠀⠀⢸⡇⠀⢸⣿⣿⣿⣿⠀⠀⢸⣿⠂⠀⠀⠀
+⠀⠀⠀⠀⣿⡏⠀⣸⡇⣸⣿⡀⠀⣿⣷⠀⢻⣿⠛⠉⠻⣿⡇⠀⠀⠈⢿⣿⣼⣿⠘⣿⣿⣿⣿⣏⣹⡇⠘⣿⣿⠀⠀⠀⣾⡇⠀⢸⣇⣿⣿⣿⡀⠀⠈⣿⡇⠀⠀⠀
+⠀⠀⠀⢀⣿⠇⠀⣿⣿⣿⣿⣇⠀⣿⡇⠀⠀⠙⠳⠶⠾⠋⠀⠀⠀⠀⠀⠙⠿⣿⣇⢻⣿⠛⠛⠻⣿⡇⠰⣿⡿⠀⠀⢠⣿⣿⣦⡀⣿⣿⣿⣿⡇⠀⠀⣿⣷⠀⠀⠀
+⠀⠀⠀⣸⣿⠀⠀⣿⣿⣿⣿⣿⡄⢹⣿⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠋⠀⠻⠷⠴⠾⠋⠀⠀⣸⡇⠀⠀⣾⣿⣿⡿⢿⣿⣿⣿⣿⡇⠀⠀⢹⣿⠀⠀⠀
+⠀⠀⠀⣿⡇⣴⠀⣿⣿⣿⡏⠹⣿⣾⣿⣿⣧⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⠃⢀⣾⣿⣿⣿⠁⠀⠀⣿⣿⣿⡇⠀⠀⢸⣿⠁⠀⠀
+⠀⠀⢀⣿⠃⣿⢸⣿⣿⣿⡇⠀⠘⢿⣿⣿⣿⣿⡻⢶⣤⣀⡀⠀⠐⠶⠤⠴⠆⠀⠀⠀⠀⠀⠀⢀⣠⣴⣾⡏⣠⣿⣿⣿⡿⠃⠀⠀⠀⢻⣿⣿⡇⠀⠀⠈⣿⡇⠀⠀
+⠀⠀⣸⣿⠀⣿⢸⣿⣿⣿⠀⠀⠀⠈⠻⠟⠻⣿⣿⣿⣿⣿⣿⣿⡷⢶⣶⣶⣦⣶⣶⣶⣶⣶⣿⠿⢟⣿⣿⣾⠟⠉⠉⠉⠀⠀⠀⠀⠀⢸⣿⣿⣿⠀⠀⠀⣿⣇⠀⠀
+⠀⠀⣿⡇⠀⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠈⠛⠿⢿⣿⣟⡹⣷⣴⡿⣿⣅⣰⣿⠋⠙⣿⣄⠀⠸⠿⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⠀⠀⠀⢿⣿⠀⠀
+⠀⢸⣿⠀⠀⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣿⣿⣿⠃⠈⢹⣷⣾⠋⠉⢷⡄⢶⣾⣿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⠀⠀⠀⢸⣿⠀⠀
+⠀⣾⡏⠀⠀⣿⣿⣿⣿⡏⠀⠀⠀⠀⠀⠀⠀⢀⣼⣿⣿⣿⣿⢠⠀⣼⢧⣿⠉⢉⠹⣿⣾⣿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⠀⠀⠀⠸⣿⡄⠀
+⢠⣿⠇⠀⠀⢻⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⣠⣿⣿⣿⣿⣿⣿⢸⢀⣿⠀⣿⠀⠀⠀⠈⢿⣿⣿⣿⣿⣧⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⠀⠀⠀⠀⣿⡇⠀
+⢸⣿⠀⠀⠀⢸⣿⣿⣿⡇⠀⠀⠀⠀⣠⣾⣿⣿⣿⣿⣿⣫⡿⡆⢸⣿⡆⣿⠀⠀⠀⠀⣾⣿⣿⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⣿⣿⠀⠀⠀⠀⣿⣷⠀
+⢸⣿⡄⠀⠀⠈⣿⣿⣿⣧⠀⠀⠀⢠⣿⣿⣿⣿⣿⣿⣻⡟⡹⠁⣼⡟⠃⣿⡀⢸⡄⠀⠘⣿⣿⣿⣿⣿⣿⣿⣦⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⡇⠀⠀⠀⠀⢹⣿⡄
+⢸⣿⣧⠀⠀⠀⢹⣿⣿⣿⠀⠀⠀⢸⣇⣈⣿⣿⣿⣿⣟⡘⠁⠀⣹⣷⣶⣟⠁⠀⢳⣀⣀⣘⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⠃⠀⢰⠀⠀⠘⣿⡇
+⢸⣿⣿⡄⠀⠀⠈⣿⣿⣿⠀⠀⠀⠀⠛⠛⠛⢉⣼⣿⣿⣿⣧⣴⣿⣿⣿⣿⣆⢠⣶⣿⣿⣿⣿⣿⣿⣿⣿⡿⢿⣇⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⠀⠀⣿⠀⠀⠀⣿⣧
+⠘⣿⣿⣷⡀⠀⠀⠸⣿⣿⡆⠀⠀⠀⠀⠀⠀⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣤⣾⡟⠀⠀⠀⠀⠀⠀⠀⣿⣿⠇⠀⢠⣿⠀⠀⠀⣿⣧
+⠀⢻⣿⣿⣷⣄⠀⠀⢻⣿⣷⠀⠀⠀⠀⠀⠀⠀⠙⠿⣿⣿⣟⣻⣿⣿⣿⣿⣿⣿⣟⣻⣿⣿⣷⡿⠟⠁⠀⠉⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⡟⠀⠀⣾⣿⠀⠀⠀⣿⡏
+⠀⠀⠹⣿⣿⣿⣷⣄⠀⢿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠈⢹⣯⣭⣿⣿⣿⣿⢻⣛⣉⣉⣁⣰⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⡿⠁⠀⣼⣿⡏⠀⠀⣼⣿⠁
+⠀⠀⠀⠘⢿⣿⣿⣿⣷⣾⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⠃⢀⣾⣿⣿⠃⢀⣼⣿⠋⠀
+⠀⠀⠀⠀⠀⠙⠻⣿⣿⣿⣿⣿⣿⣦⠀⠀⠀⠀⠀⠀⠀⠈⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⡿⢃⣴⣿⣿⣿⣟⣴⣿⡿⠁⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠈⠙⠛⠛⠛⠿⠿⠃⠀⠀⠀⠀⠀⠀⠀⢹⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⠟⠋⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⠀⣿⣿⣿⣿⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⠿⠿⠿⠟⠛⠛⠛⠋⠁⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠛⠿⠟⠛⠁⠀⢿⣿⣿⣿⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+*/
+// cause everything is better with rainbows.
+function nixieRainbow() {
+	const tubeSpans = document.querySelectorAll('.tube>span');
+	const numberOfSpans = tubeSpans.length;
+	
+	tubeSpans.forEach((span, index) => {
+		const hue = Math.floor((360 / numberOfSpans) * index);
+		const color = `hsl(${hue}, 100%, 50%)`;
+		span.style.color = color;
+		span.style.textShadow = `2px 0 3px ${color}, 
+									-2px 0 3px ${color}, 
+									0 2px 3px ${color}, 
+									0 -2px 3px ${color}, 
+									0 0 1rem ${color}, 
+									0 0 2rem ${color}, 
+									0 0 2rem ${color}, 
+									0 0 3rem ${color}`;
+		span.style.animation = 'none';
+	});
+}
 
-      if (hasSensorsWidget()) {
-        document.getElementById("temperature-display").textContent =
-          `${coreTemperatureValue} °C`;
-        document.getElementById("humidity-display").textContent =
-          `${coreHumidityValue} %`;
-        document.getElementById("status-display").textContent =
-          statusValue === false ? "CLOSED" : "OPEN";
-
-		// status nixie tubes!!
-		const content = statusValue ? "OPEN<3" : "CLOSED";
-		setNixieContent(content);
-	}
-    })
-    .catch((error) => {
-      console.error("Error fetching SpaceAPI data:", error);
-      document.getElementById("temperature-display").textContent =
-        "Failed to load data.";
-      document.getElementById("humidity-display").textContent =
-        "Failed to load data.";
-      document.getElementById("status-display").textContent =
-        "Failed to load state.";
+function resetNixieRainbow() {
+    const tubeSpans = document.querySelectorAll('.tube>span');
+    
+    tubeSpans.forEach((span) => {
+        span.style.color = '';
+        span.style.textShadow = '';
+        span.style.animation = '';
     });
+}
 
-  signalGlitch();
+function handleInput(event) {
+	let typedText = event.target.value;
+
+	setNixieContent(typedText);
+	inputCodeCheck(typedText);
+}
+
+function inputCodeCheck(typedText) {
+	switch(typedText.toLowerCase()) {
+		case "(){:;}":
+			shellShock();
+			break;
+		case "matrix":
+			matrix();
+			break;
+		case "barrel":
+			barrel();
+			break;
+		case "astley":
+			astley();
+			break;
+		case "kawaii":
+			nyan_cat();
+			break;
+		case "pacman":
+			pacman();
+			break;
+		case "gamble":
+			gamble();
+			break;
+		case "drkhsh":
+			drkhsh();
+			break;
+	}
+}
+
+const code = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
+const code_two = [48, 49, 49, 56, 57, 57, 57, 56, 56, 49, 57, 57, 57, 49, 49, 57, 55, 50, 53, 51];
+
+let currentStepOne = 0;
+let currentStepTwo = 0;
+let codeEntered = false;
+
+// Function to check the key sequence
+function checkSequence(e) {
+	if (!codeEntered) {
+		if (e.keyCode === code[currentStepOne]) {
+			currentStepOne++;
+			if (currentStepOne === code.length) {
+				codeEntered = true;
+				currentStepOne = 0;
+				setNixieColor('var(--nixie-green)');
+				setNixieContent("ITCRWD");
+				let search_field = document.getElementsByClassName("widget-search__field")[0];
+				search_field.placeholder = 'Emergency Services';
+			}
+		} else {
+			currentStepOne = 0;
+		}
+	} else {
+		if (e.keyCode === code_two[currentStepTwo]) {
+			currentStepTwo++;
+			if (currentStepTwo === code_two.length) {
+				nixieRainbow();
+				let search_field = document.getElementsByClassName("widget-search__field")[0];
+				search_field.placeholder = 'user@it-syndikat:~$';
+				setTimeout(() => {
+					search_field.value = '';
+					search_field.blur();
+					setNixieContent('UNLCKD');
+				}, 0);
+				search_field.addEventListener('input', handleInput);
+				currentStepTwo = 0;
+				codeEntered = false;
+			}
+		} else {
+			currentStepTwo = 0;
+		}
+	}
+}
+
+// Add event listener for keydown events
+window.addEventListener('keydown', checkSequence);
+
+function shuffleArray(array) {
+	for (let i = array.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1));
+		[array[i], array[j]] = [array[j], array[i]];
+	}
+	return array;
+}
+
+function shuffleString(inputString, charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+[]{}|;:,.<>?') {
+    let characters = inputString.split('');
+
+    for (let i = 0; i < inputString.length; i++) {
+        characters.push(charSet[Math.floor(Math.random() * charSet.length)]);
+    }
+
+    for (let i = characters.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [characters[i], characters[j]] = [characters[j], characters[i]];
+    }
+
+    return characters.join('');
+}
+
+function shellShock() {
+	resetNixieRainbow();
+	setNixieColor('red');
+	let all = document.body.querySelectorAll('*');
+	const shuffledElements = shuffleArray(Array.from(all));
+
+	shuffledElements.forEach((element, index) => {
+		setTimeout(() => {
+			element.style.display = 'none';
+			if (index === shuffledElements.length - 1) {
+				setTimeout(() => {
+					document.body.innerText = "But nobody came.";
+				}, 100);
+			}
+		}, index * 100);
+	});
+}
+
+function matrix() {
+	resetNixieRainbow();
+	setNixieColor('var(--nixie-green)');
+	setInterval(() => {
+		setNixieContent(shuffleString('matrix'));
+	}, 100);
+}
+
+function barrel() {
+	document.body.style.transition = 'transform 5s';
+	document.body.style.transform = 'rotate(360deg)';
+  
+	setTimeout(() => {
+	  document.body.style.transition = '';
+	  document.body.style.transform = '';
+	}, 5000);
+}
+
+function astley() {
+	let primary = document.querySelector('.primary');
+	let sidebar = document.querySelector('.sidebar');
+	primary.style.display = 'none';
+	sidebar.style.display = 'none';
+	let wrapper = document.querySelector('.wrapper.flex');
+	const div = document.createElement('div');
+    div.innerHTML = `
+		<video width="560" height="315" autoplay><source src="/videos/eastereggs/guesswhat.mp4" type="video/mp4"></video>`;
+	wrapper.appendChild(div);
+}
+
+function nyan_cat() {
+    const nyanCatDiv = document.createElement('div');
+    nyanCatDiv.id = 'nyan-cat';
+    
+    const nyanCatImg = document.createElement('img');
+    nyanCatImg.src = '/images/eastereggs/nyancat.gif';
+    nyanCatImg.alt = 'Nyan Cat';
+    
+    nyanCatDiv.appendChild(nyanCatImg);
+    
+    document.body.appendChild(nyanCatDiv);
+}
+
+function pacman() {
+	resetNixieRainbow();
+	setNixieColor('yellow');
+    const pacManDiv = document.createElement('div');
+    pacManDiv.id = 'pac-man';
+    pacManDiv.innerHTML = `
+        <img src="/images/eastereggs/pacman.gif" alt="Pac-Man">
+    `;
+
+    document.body.appendChild(pacManDiv);
+	
+    const elements = document.querySelectorAll('.menu__item, .tube, .tube>span');
+    
+	function checkCollision() {
+        const rect1 = pacManDiv.getBoundingClientRect();
+
+        elements.forEach((element) => {
+            const rect2 = element.getBoundingClientRect();
+
+            if (
+                rect1.left < rect2.left + rect2.width &&
+                rect1.left + rect1.width > rect2.left &&
+                rect1.top < rect2.top + rect2.height &&
+                rect1.top + rect1.height > rect2.top
+            ) {
+				if (element.nodeName === "LI") {
+					element.style.visibility = 'hidden';
+				} else {
+					element.style.display = 'none';
+				}
+            }
+        });
+
+        // Continue checking for collisions
+        requestAnimationFrame(checkCollision);
+    }
+	
+	// Continue checking for collisions
+	requestAnimationFrame(checkCollision);
+}
+
+function gamble() {
+	// make lever
+	let tubeBoxes = document.querySelectorAll('.tube-box');
+    tubeBoxes.forEach(tubeBox => {
+	let lever = document.createElement('button');
+	lever.textContent = 'Go';
+	lever.classList.add('btn');
+	lever.addEventListener('click', startSlotMachine);
+	tubeBox.prepend(lever);
+	// amount display
+	let amountSpan = document.createElement('span');
+	amountSpan.textContent = "1337€";
+	amountSpan.id = "score";
+	tubeBox.insertBefore(amountSpan, lever);
+    });
+}
+
+let intervalId;
+
+function startSlotMachine() {
+	intervalId = setInterval(() => {
+		setNixieContent(shuffleString('gamble'));
+	}, 100);
+
+	setTimeout(stopSlotMachine, 2000);
+}
+
+function stopSlotMachine() {
+	clearInterval(intervalId);
+	// evaluate
+	let matches = countMatches();
+	let score = evaluateScore(matches);
+	applyScore(score);
+}
+
+function countMatches() {
+	let tubes = document.querySelectorAll('.tube>span');
+
+	let symbols = Array.from(tubes).map(tube => tube.textContent);
+	symbols.splice(-6);
+
+	const symbolCounts = symbols.reduce((acc, symbol) => {
+	  acc[symbol] = (acc[symbol] || 0) + 1;
+	  return acc;
+	}, {});
+
+	return Math.max(...Object.values(symbolCounts));
+}
+
+function evaluateScore(matches) {
+	let score;
+	switch (matches) {
+        case 6:
+          score = 1337;
+          break;
+        case 5:
+          score = 420;
+          break;
+        case 4:
+          score = 69;
+          break;
+        case 3:
+          score = 13;
+          break;
+        case 2:
+          score = 5;
+          break;
+        default:
+          score = -25; // No matches or only 1 match
+      }
+	return score;
+}
+
+function applyScore(score) {
+	// ik this is hacky, but it works
+	let scoreSpan = document.querySelectorAll('#score')[1];
+	let scoreNum = parseFloat(scoreSpan.textContent);
+	scoreNum += score;
+	scoreSpan.textContent = `${scoreNum}€`;
+	if(scoreNum <= 0) {
+		setNixieColor('red');
+		setNixieContent('DEATH💀')
+	}
+}
+
+function drkhsh() {
+	resetNixieRainbow();
+	setNixieColor('#a507b5');
+}
+
+window.onload = () => {
+	fetch(spaceApiUrl)
+		.then((response) => response.json()) // Parse the JSON from the response
+		.then((data) => {
+			const coreTemperatureValue = data.sensors.temperature[0].value;
+			const coreHumidityValue = data.sensors.humidity[0].value;
+			statusValue = data.state.open;
+
+			setSignalColour(statusValue === false ? "red" : "green");
+
+			if (hasSensorsWidget()) {
+				document.getElementById("temperature-display").textContent =
+					`${coreTemperatureValue} °C`;
+				document.getElementById("humidity-display").textContent =
+					`${coreHumidityValue} %`;
+				document.getElementById("status-display").textContent =
+					statusValue === false ? "CLOSED" : "OPEN";
+			}
+
+			// status nixie tubes!!
+			const content = statusValue ? "OPEN<3" : "CLOSED";
+			setNixieContent(content);
+		})
+		.catch((error) => {
+			console.error("Error fetching SpaceAPI data:", error);
+			document.getElementById("temperature-display").textContent =
+				"Failed to load data.";
+			document.getElementById("humidity-display").textContent =
+				"Failed to load data.";
+			document.getElementById("status-display").textContent =
+				"Failed to load state.";
+		});
+
+	signalGlitch();
 };

content/de/contact.md

@@ -17,7 +17,7 @@ Anfragen könnt ihr uns gerne per E-Mail an die folgende Adresse senden:
 > Tschamlerstraße 3\
 > A-6020 Innsbruck
 
-[![it-syndikat innsbruck @ openstreetmap.org](/images/uploads/osmap.jpeg "it-syndikat innsbruck @ openstreetmap.org")](https://osm.org/go/0IUHnILQ7?m=&node=1528106414)
+[![it-syndikat innsbruck @ openstreetmap.org](/images/uploads/map.webp "it-syndikat innsbruck @ openstreetmap.org")](https://osm.org/go/0IUHnILQ7?m=&node=1528106414)
 
 [show location on openstreetmap.org](https://osm.org/go/0IUHnILQ7?m=&node=1528106414)
 

content/en/contact.md

@@ -17,7 +17,7 @@ You can reach us over following E-mail address:
 > Tschamlerstraße 3\
 > A-6020 Innsbruck
 
-[![it-syndikat innsbruck @ openstreetmap.org](/images/uploads/osmap.jpeg "it-syndikat innsbruck @ openstreetmap.org")](https://osm.org/go/0IUHnILQ7?m=&node=1528106414)
+[![it-syndikat innsbruck @ openstreetmap.org](/images/uploads/map.webp "it-syndikat innsbruck @ openstreetmap.org")](https://osm.org/go/0IUHnILQ7?m=&node=1528106414)
 
 [show location on openstreetmap.org](https://osm.org/go/0IUHnILQ7?m=&node=1528106414)
 

hugo.toml

@@ -43,7 +43,10 @@ defaultContentLanguageInSubdir = false
   mathjax = false # Enable MathJax
   customCSS = ["css/its.css"] # Include custom CSS files
   customJS = ["js/its.js"] # Include custom JS files
-  imageSizes = [ 320, 640, 960, 1280, 1600, 1920 ]
+  imageSizes = [ 320, 640, 960, 1280, 1920 ]
+  tag = "{{TAG}}"
+  commit = "{{COMMIT}}"
+  show_version = false
 
 [Params.style.vars]
   highlightColor = "#109c11" # matrix green
@@ -69,7 +72,7 @@ defaultContentLanguageInSubdir = false
   single = false # Configure layout for single pages
 
   # Enable widgets in given order
-  widgets = ["search", "languages", "sidemenu", "sensors", "social", "categories", "taglist"]
+  widgets = ["search", "languages", "sidemenu", "sensors", "social", "webring", "categories", "taglist"]
 
 [Params.widgets]
   recent_num = 5 # Set the number of articles in the "Recent articles" widget
@@ -111,6 +114,19 @@ defaultContentLanguageInSubdir = false
 [Params.widgets.taglist]
   cached = true
 
+[[Params.widgets.webring.entities]]
+  alt = "it-syndikat"
+  img = "images/buttons/itsyndikat.gif"
+  url = "https://it-syndikat.org"
+[[Params.widgets.webring.entities]]
+  alt = "drkhsh"
+  img = "images/buttons/drkhsh.gif"
+  url = "https://drkhsh.at"
+[[Params.widgets.webring.entities]]
+  alt = "deneb"
+  img = "images/buttons/deneb.gif"
+  url = "https://leggi.es"
+
 [outputs]
   home = ['html', 'rss', 'atom']
   section = ['html', 'rss', 'atom']

layouts/_default/_markup/render-image.html

@@ -1,64 +1,6 @@
-{{- $image_file := .Destination -}}
-{{- $image := $.Page.Resources.Get $image_file -}}
-<!-- Page-Resources -->
-{{- with $image -}}
-	{{- $image = . -}}
-{{- else -}}
-	<!-- Static-Resources -->
-	{{- with resources.Get $image_file -}}
-		{{- $image = . -}}
-	{{- end -}}
-{{- end -}}
-
-{{- $background_colour := "#020221" -}}
-{{- $alt := .Text -}}
-{{- $label := .Text -}}
-{{- $caption := "" -}}
-{{- if ne .Title "" -}}
-	{{- $caption = .Title | $.Page.RenderString -}}
-	{{- $label = $caption -}}
-{{- end -}}
-{{- $imageSizes := site.Params.imageSizes -}}
-
-{{- with $image -}}
-	{{- $image_width := $image.Width -}}
-	{{- $image_height := $image.Height -}}
-	{{- $fallback_image := ($image.Resize (print "640x jpg " $background_colour)) -}}
-
-<figure role="figure" aria-label="{{- $label | plainify -}}">
-	<a href="{{- $image.RelPermalink -}}">
-		<div class="image-wrapper">
-			<img
-				alt="{{- $alt -}}"
-				title="{{- $label | plainify -}}"
-				width="{{- $image_width -}}"
-				height="{{- $image_height -}}"
-				{{- if (or (strings.HasSuffix $image ".gif") (strings.HasSuffix $image ".svg")) -}}
-					src="{{- $image.RelPermalink -}}"
-				{{ else }}
-					srcset="
-					{{- if le $image.Width (index $imageSizes 0) }}
-						{{- with $image.Resize (print $image.Width "x webp " $background_colour) -}}
-						{{- print .RelPermalink " " .Width "w, " -}}
-						{{- end -}}
-					{{- end -}}
-					{{- with $imageSizes -}}
-						{{- range $index, $size := . -}}
-							{{- if ge $image.Width $size -}}
-								{{- with $image.Resize (print $size "x webp " $background_colour) -}}
-									{{- print .RelPermalink " " $size "w, " -}}
-								{{- end -}}
-							{{- end -}}
-						{{- end -}}
-					{{- end -}}"
-					sizes="(min-width: 1024px) 100vw, 50vw"
-					src="{{- $fallback_image.RelPermalink -}}"
-					decoding="async"
-				{{- end }}
-				loading="lazy"
-			/>
-		</div>
-	</a>
-	<figcaption>{{- $caption -}}</figcaption>
-</figure>
-{{ end }}
+{{ partial "responsive-image.html" (dict
+	"src" .Destination
+	"alt" .Text
+	"caption" .Title
+	"ctx" .
+) }}

layouts/partials/responsive-image.html

@@ -0,0 +1,53 @@
+{{- $ctx := .ctx -}}
+{{- $src := .src -}}
+{{- $alt := .alt -}}
+{{- $class := .class -}}
+{{- $caption := .caption -}}
+
+{{- $img := $ctx.Page.Resources.Get $src -}}
+<!-- Page-Resources -->
+{{- with $img -}}
+	{{- $img = . -}}
+{{- else -}}
+	<!-- Static-Resources -->
+	{{- with resources.Get $src -}}
+		{{- $img = . -}}
+	{{- end -}}
+{{- end -}}
+
+{{- with $img -}}
+{{- $divClass := "image-wrapper" -}}
+{{- $imgClass := (default "responsive-image" $class) -}}
+{{- $dataSzes := "(min-width: 1024px) 100vw, 50vw" -}}
+	<a href="{{ $img.Permalink }}">
+		<img class="{{ $imgClass }}"
+			src="{{ $img.Permalink }}"
+			srcset="
+				{{- with $img.Resize "1280x jpg " -}}
+					{{- print .Permalink " " .Width "w" -}}
+				{{- end -}}, 
+				{{- with site.Params.imageSizes -}}
+					{{- range $i, $size := . -}}
+						{{- if ge $img.Width . -}}
+							{{- if $i }}, {{ end -}}
+							{{- with $img.Resize (print $size "x webp ") -}}
+								{{- print .Permalink " " .Width "w" -}}
+							{{- end -}}
+						{{- end -}}
+					{{- end -}}
+				{{- end -}}"
+			sizes="{{ $dataSzes }}"
+			width="{{ $img.Width }}"
+			height="{{ $img.Height }}"
+			alt="{{ $alt }}"
+			title="{{ $caption }}"
+			decoding="async"
+			loading="lazy"
+		/>
+	</a>
+{{- else -}}
+	<img extra="missing" src="/images/broken.svg"
+		{{- with .Text }} alt="{{ . }}"{{ end -}}
+		{{- with .Title }} title="{{ . }}"{{ end -}}
+	/>
+{{- end -}}

layouts/partials/widgets/nixie.html

@@ -1,9 +1,10 @@
 <div class="tube-box" id="status-tube">
-	<div class="tube"><span>C</span></div>
-	<div class="tube"><span>L</span></div>
-	<div class="tube"><span>O</span></div>
-	<div class="tube"><span>S</span></div>
-	<div class="tube"><span>E</span></div>
-	<div class="tube"><span>D</span></div>
+	<!-- Playing Contra and I need more lives -->
+	<div class="tube"><span>?</span></div>
+	<div class="tube"><span>!</span></div>
+	<div class="tube"><span>?</span></div>
+	<div class="tube"><span>!</span></div>
+	<div class="tube"><span>?</span></div>
+	<div class="tube"><span>!</span></div>
 	<span class="tube-box-title">{{ . }}</span>
 </div>

layouts/partials/widgets/webring.html

@@ -0,0 +1,11 @@
+<div class="widget-webring widget">
+	<h4 class="widget-webring__title widget__title">Webring</h4>
+	<div class="widget-webring__content widget__content">
+		{{- range .Site.Params.widgets.webring.entities -}}
+			<a href="{{ .url }}" target="_blank">
+				{{- $src := resources.Get .img -}}
+				<img class="widget-webring__button" height="31" width="88" alt="{{ .alt }}" src="{{ $src.Permalink }}" />
+			</a>
+		{{- end -}}
+	</div>
+</div>

layouts/shortcodes/img.html

@@ -0,0 +1,10 @@
+{{- $src := .Get "src" -}}
+{{- $alt := .Get "alt" -}}
+{{- $title := .Get "title" -}}
+
+{{ partial "responsive-image.html" (dict
+	"src" $src
+	"alt" $alt
+	"caption" $title
+	"ctx" .
+) }}

static/images/broken.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- old school pixellated netscape broken image icon -->
+<svg width="69px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <g id="borders-and-backgrounds">
+    <path d="M0,0 L10,0 L10,1 L1,1 L1,15 L2,15 L2,16 L0,16 Z" fill="black"></path>
+    <path d="M10,4 l4,0 l0,3 l-1,0 l0,-2 l-3,0 Z" fill="black"></path>
+    <path d="M14,16 l0,-6 l-1,0 l0,5 l-5,0 l0,1 Z" fill="black"></path>
+    <path d="M12,14 l0,-3 l-1,0 l0,2 l-2,0 l0,1 Z" fill="#bcbcc3"></path>
+    <path d="M10,0 l1,0 l0,1 l1,0 l0,1 l1,0 l0,1 l1,0 l0,1 l-1,0 l0,-1 l-1,0 l0,-1 l-1,0 l0,2 l-1,0 Z" fill="#878787"></path>
+    <path d="M2,2 l8,0 l0,3 l2,0 l0,2 l-4,0 l0,5 l-2,0 l0,1 l-2,0 l0,1 l-2,0 Z" fill="#bcbcc3"></path>
+  </g>
+  <g id="lefteye">
+    <path d="M5,3 l2,0 l0,3 l-3,0 l0,-2 l1,0 l0,1 l1,0 l0,-1 l-1,0 Z" fill="#00891e"></path>
+    <path d="M5,4 l1,0 l0,1 l-1,0 Z" fill="#00f248" ></path>
+    <path d="M7,4 l1,0 l0,2 l-1,0 l0,1 l-2,0 l0,-1 l2,0 Z" fill="black" ></path>
+  </g>
+  <g id="righteye">
+    <path d="M8,7 l3,0 l0,2 l-1,0 l0,-1 l-1,0 l0,1 l1,0 l0,1 l-2,0 Z" fill="#0064fb"></path>
+    <path d="M9,8 l1,0 l0,1 l-1,0 Z" fill="#00fbfe"></path>
+    <path d="M10,9 l1,0 l0,1 l-1,0 Z" fill="#003293"></path>
+    <path d="M11,7 l1,0 l0,2 l-1,0 Z" fill="black"></path>
+    <path d="M8,10 l2,0 l0,1 l-2,0 Z" fill="black"></path>
+  </g>
+  <g id="mouth">
+    <path d="M3,8 l1,0 l0,1 l1,0 l0,1 l1,0 l0,1 l1,0 l0,1 l-1,0 l0,-1 l-1,0 l0,-1 l-1,0 l0,-1 l-1,0 Z" fill="#ff3900"></path>
+    <path d="M3,9 l1,0 l0,1 l1,0 l0,1 l1,0 l0,1 l-3,0 Z" fill="#f73ae1"></path>
+    <path d="M3,12 l3,0 l0,1 l-3,0 Z" fill="black"></path>
+  </g>
+</svg>

themes/mainroad

@@ -1 +1 @@
-Subproject commit c5b32fe70c70755f47210c61d68fbdba12af44c0
+Subproject commit 54bca25740e03293a6d1f290649e7d15a8f73c42