draw imprint as canvas

footer.js

@@ -1,3 +1,44 @@
-'use strict';
+"use strict";
+
+const footer = document.getElementById("footer");
+const canvas = document.getElementById("imprint");
+const ctx = canvas.getContext("2d");
+
+const draw = () => {
+	canvas.width = footer.clientWidth;
+	ctx.font = "14px sans-serif";
+
+	const words = decodeURIComponent(Array.prototype.map.call(atob("TGVnYWwgY29udGFjdDogTWlsYW4gUMOkc3NsZXIsIEFtIFN0YWRlcmhvZiA4YSA0Mjc5OSBMZWljaGxpbmdlbiwgRW1haWw6IG1lQHBiYi5sYwo="), function(c) { return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2); }).join("")).split(" ");
+	let lines = [""];
+	let i = 0;
+
+	console.log("!")
+	while (words.length) {
+		while (words.length) {
+			if (ctx.measureText(lines[i] + words[0]).width < canvas.width) {
+				lines[i] += words.shift() + " ";
+			} else {
+				break;
+			}
+		}
+		lines.push("");
+		i++;
+	}
+
+	canvas.height = lines.length * 25;
+	ctx.font = "14px sans-serif";
+	ctx.fillStyle = "white";
+	ctx.textAlign = "center";
+
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+	for (let i = 0; i < lines.length; i++) {
+		ctx.fillText(lines[i], canvas.width/2, (i+1) * 25);
+	}
+};
+
+window.addEventListener("resize", () => {
+	draw();
+});
+
+window.onready = draw();
 
-document.getElementById('footer').innerHTML = decodeURIComponent(Array.prototype.map.call(atob('TGVnYWwgY29udGFjdDogTWlsYW4gUMOkc3NsZXIsIEFtIFN0YWRlcmhvZiA4YSA0Mjc5OSBMZWljaGxpbmdlbiwgRW1haWw6IG1lQHBiYi5sYwo='), function(c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join(''));

index.html

@@ -30,7 +30,7 @@
 					<img src="email.svg" class="link">
 				</a>
 			</div>
-			<p id="footer"></p>
+			<p id="footer"><canvas id="imprint"></canvas></p>
 		</div>
 		<script type="text/javascript" src="footer.js"></script>
 		<!-- <canvas id="canvas"></canvas>

style.css

@@ -11,7 +11,7 @@ body {
 #content {
 	text-align: center;
 	background-color: rgba(0, 0, 0, .6);
-	width: 100vw;
+	width: 100%;
 	max-width: 550px;
 	min-height: 100vh;
 	margin: auto;
@@ -22,8 +22,9 @@ body {
 }
 
 #footer {
-	font-size: .8em;
 	margin: 10px;
+	width: 100%;
+	display: flex;
 }
 
 #profile {
@@ -48,10 +49,6 @@ img.link {
 	height: 100px;
 }
 
-canvas {
-	position: fixed;
-}
-
 @media (max-width: 600px) {
 	#profile {
 		width: 60vmin;