From 766e0b392fcbff97401074f302d2a153ad246435 Mon Sep 17 00:00:00 2001
From: Philip Wagner <philip@think-jeckel.de>
Date: Sat, 31 Aug 2024 12:00:30 +0200
Subject: [PATCH] mobile home

---
 assets/style.css        |  1 +
 site/templates/home.php | 88 +++++++++++++++++++++++++----------------
 2 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index a2c0b2c..1d5727c 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -104,6 +104,7 @@ footer { background: var(--white) }
 .content-footer-socials { display: flex; justify-content: space-between; align-items: center; width: 439px; }
 
 @media (max-width: 750px) {
+  #menu { overflow-y: scroll; }
   footer { font-size: 22pt !important; letter-spacing: 0 !important; padding: 11pt !important }
   .headline { padding-left: 79pt }
   .headline h4 { max-width: calc(100dvw - 22pt - 37pt - 37pt - 37pt - 22pt) }
diff --git a/site/templates/home.php b/site/templates/home.php
index 59497f7..dd2ac6d 100644
--- a/site/templates/home.php
+++ b/site/templates/home.php
@@ -8,14 +8,14 @@
 <canvas id="bgCanvas"></canvas>
 
 <script>
-  // 22pt = 29px
-  // 37pt = 49px
-  
-  // w: 29 + 49 + 29
-  // h: 29
-  
-  // w: 29 + 49 + 29
-  // h: 49
+const NORMAL_SMALL = 29
+const NORMAL_BIG = 49
+
+const MOBILE_SMALL = 15
+const MOBILE_BIG = 25
+
+let small = NORMAL_SMALL
+let big = NORMAL_BIG
 
 function setupCanvas(canvas) {
 	const dpr = window.devicePixelRatio || 1
@@ -24,6 +24,15 @@ function setupCanvas(canvas) {
 	canvas.height = rect.height * dpr
 	const ctx = canvas.getContext('2d')
 	ctx.scale(dpr, dpr)
+
+	if (canvas.width > 750) {
+		small = NORMAL_SMALL
+		big = NORMAL_BIG
+	} else {
+		small = MOBILE_SMALL
+		big = MOBILE_BIG
+	}
+
 	return ctx
 }
 
@@ -46,22 +55,20 @@ const colors = ["#f1edeb", "#ff00ff", "#48bd8d", "#8200ff", "#ff6700", "#000000"
 function grid(colorIndex, canvas, ctx) {
 	ctx.strokeStyle = colors[colorIndex]
 
-	// w: 29 + 49 + 29
-	for (let x = 0; x < canvas.width; x += 107) {
+	for (let x = 0; x < canvas.width; x += small + big + small) {
 		ctx.moveTo(x, 0)
 		ctx.lineTo(x, canvas.height)
-		ctx.moveTo(x + 29, 0)
-		ctx.lineTo(x + 29, canvas.height)
-		ctx.moveTo(x + 29 + 49, 0)
-		ctx.lineTo(x + 29 + 49, canvas.height)
+		ctx.moveTo(x + small, 0)
+		ctx.lineTo(x + small, canvas.height)
+		ctx.moveTo(x + small + big, 0)
+		ctx.lineTo(x + small + big, canvas.height)
 	}
 	
-	// h: 29 + 49
-	for (let y = 0; y < canvas.height; y += 78) {
+	for (let y = 0; y < canvas.height; y += small + big) {
 		ctx.moveTo(0, y)
 		ctx.lineTo(canvas.width, y)
-		ctx.moveTo(0, y + 29)
-		ctx.lineTo(canvas.width, y + 29)
+		ctx.moveTo(0, y + small)
+		ctx.lineTo(canvas.width, y + small)
 	}
 	
 	ctx.stroke()
@@ -75,29 +82,31 @@ function bg(colorIndex, canvas, ctx, randomColors) {
 	const e = colors[(colorIndex + Math.round(Math.random() * (colors.length - 1))) % colors.length]
 	const f = colors[(colorIndex + Math.round(Math.random() * (colors.length - 1))) % colors.length]
 
-	// w: 29 + 49 + 29
-	// h: 29 + 49
-	for (let x = 0; x < canvas.width; x += 107) {
-		for (let y = 0; y < canvas.height; y += 78) {
+	for (let x = 0; x < canvas.width; x += small + big + small) {
+		for (let y = 0; y < canvas.height; y += small + big) {
             if (randomColors) ctx.fillStyle = ctx.fillStyle = a
-			ctx.fillRect(x, y, 29, 29)
+			ctx.fillRect(x, y, small, small)
 			if (randomColors) ctx.fillStyle = ctx.fillStyle = b
-			ctx.fillRect(x + 29, y, 49, 29)
+			ctx.fillRect(x + small, y, big, small)
 			if (randomColors) ctx.fillStyle = ctx.fillStyle = c
-			ctx.fillRect(x + 29 + 49, y, 29, 29)
+			ctx.fillRect(x + small + big, y, small, small)
 			
 			if (randomColors) ctx.fillStyle = ctx.fillStyle = d
-			ctx.fillRect(x, y + 29, 29, 49)
+			ctx.fillRect(x, y + small, small, big)
 			if (randomColors) ctx.fillStyle = ctx.fillStyle = e
-			ctx.fillRect(x + 29, y + 29, 49, 49)
+			ctx.fillRect(x + small, y + small, big, big)
 			if (randomColors) ctx.fillStyle = ctx.fillStyle = f
-			ctx.fillRect(x + 29 + 49, y + 29, 29, 49)
+			ctx.fillRect(x + small + big, y + small, small, big)
 		}
 	}
 }
   
 function font(colorIndex, canvas, ctx) {
-	ctx.font = '195px Kobata'
+	if (canvas.width > 750) {
+		ctx.font = '195px Kobata'
+	} else {
+		ctx.font = '100px Kobata'
+	}
 
 	const patterns = [
 		[0],
@@ -118,7 +127,9 @@ function font(colorIndex, canvas, ctx) {
 			x += ctx.measureText(char).width
 
 			if (kerning[char]) {
-				x += kerning[char]
+				let k = kerning[char]
+				if (canvas.width < 750) k = k * 0.51724138
+				x += k
 			}
 
 			if (char == "A" && str[i+1] == "T") {
@@ -130,10 +141,12 @@ function font(colorIndex, canvas, ctx) {
 	const a = patterns[Math.round(Math.random() * (patterns.length - 1))]
 	const b = patterns[Math.round(Math.random() * (patterns.length - 1))]
 
-	ctx.letterSpacing = "0"
-	for (var y = 0; y < canvas.height; y += 312) {
-		word('RE CAPITULATING.', y + 156, colorIndex, a, kerningNormal)
-		word('QUEER', y + 156 + 156, colorIndex, b, kerningWide)
+	const height = ctx.measureText('A').actualBoundingBoxAscent
+
+	ctx.letterSpacing = 0
+	for (var y = 0; y < canvas.height; y += height * 2) {
+		word('RE CAPITULATING.', y + height, colorIndex, a, kerningNormal)
+		word('QUEER', y + height + height, colorIndex, b, kerningWide)
 	}
 }
 
@@ -161,9 +174,14 @@ start()
 
 <style>
 #info { display: none; position: absolute; left: 498px; top: 0; bottom: 0 }
+#info-button { padding-left: calc(498px + 22pt) }
+@media (max-width: 750px) {
+	#info { left: 0; overflow-y: scroll; }
+	#info-button { padding-left: 79pt }
+}
 </style>
 
-<div class="container" style="padding-left: calc(498px + 22pt)">
+<div id="info-button" class="container">
     <button id="info_open" aria-label="Info Open" class="menu-button no-button flex font-kobata text-40 uppercase">Info</button>
 </div>