Adjust UI scaling

src/ui/intro-tutorial.js

@@ -6,7 +6,7 @@ export default function startTutorial() {
 		{
 			popover: {
 				title: 'Greetings',
-				description: 'This is a very short introduction to Slay the Web. Follow me...',
+				description: 'This is a very short introduction to Slay the Web. Follow me... (press enter)',
 			},
 		},
 		{

src/ui/styles/app.css

@@ -5,7 +5,7 @@
 }
 
 html {
-	font-size: 2.2vw;
+	font-size: max(16px, min(1.7vmin, 24px));
 	line-height: 1.4;
 	color: var(--text);
 	cursor: url(/images/cursors/default.png), auto;
@@ -19,20 +19,6 @@ html {
 	background-repeat: no-repeat;
 }
 
-/* Minimum font size */
-@media (max-width: 900px) {
-	html {
-		font-size: 15px;
-	}
-}
-
-/* Maximum font size */
-@media (min-width: 1000px) {
-	html {
-		font-size: 20px;
-	}
-}
-
 html,
 button,
 input,
@@ -342,9 +328,12 @@ h2 {
 .Hand .Card {
 	margin-left: -1.5rem;
 	cursor: grab;
-	cursor: url(/images/cursors/grab-open.png) 10 0, auto;
+	cursor:
+		url(/images/cursors/grab-open.png) 10 0,
+		auto;
+}
+.Hand .Card-inner {
 }
-.Hand .Card-inner {}
 .Hand .Card[disabled] {
 	cursor: not-allowed;
 }
@@ -489,7 +478,8 @@ h2 {
 		height: 100%;
 	}
 
-	.Card:not([data-card-upgraded]) {}
+	.Card:not([data-card-upgraded]) {
+	}
 	.Card[data-card-upgraded] {
 		display: none;
 	}
@@ -520,5 +510,4 @@ h2 {
 }
 
 .driver-popover .driver-popover-footer button {
-
 }