From 82907f451ef8503f91305324707031163ce2bcc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sat, 3 Feb 2024 18:44:05 +0100
Subject: [PATCH] style: text over axes

---
 src/lib/ScreenInfo.svelte |  2 +-
 src/lib/TestCard.svelte   | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/lib/ScreenInfo.svelte b/src/lib/ScreenInfo.svelte
index 4e5a1d9..4e5e1cb 100644
--- a/src/lib/ScreenInfo.svelte
+++ b/src/lib/ScreenInfo.svelte
@@ -45,7 +45,7 @@
 	}
 
 	.window {
-		margin-top: 1em;
+		margin-top: calc(1em / 0.8);
 		font-size: 0.8em;
 	}
 </style>
diff --git a/src/lib/TestCard.svelte b/src/lib/TestCard.svelte
index de93e06..da59543 100644
--- a/src/lib/TestCard.svelte
+++ b/src/lib/TestCard.svelte
@@ -24,7 +24,7 @@
 	onMount(() => {
 		window.addEventListener('dblclick', () => {
 			document.body.requestFullscreen();
-		})
+		});
 	});
 </script>
 
@@ -42,7 +42,9 @@
 	<Axes />
 
 	<div class="outer"></div>
-	<div class="inner">
+	<div class="inner"></div>
+
+	<div class="info">
 		<ScreenInfo />
 	</div>
 
@@ -84,9 +86,6 @@
 		width: calc(var(--block-size) * var(--circle-blocks));
 		height: calc(var(--block-size) * var(--circle-blocks));
 
-		display: flex;
-		justify-content: center;
-		align-items: center;
 		border: 1px solid white;
 		background: rgba(0, 0, 0, 0.66);
 		border-radius: 50%;
@@ -106,6 +105,14 @@
 		opacity: 0.5;
 	}
 
+	.info {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 10;
+	}
+
 	.column {
 		position: absolute;
 		top: 50%;