Disable Ace editor on touchscreen devices

Ace doesn't work well with touchscreen devices, so instead we fall back to a
plain textarea.

templates/user/collection.tmpl

@@ -12,6 +12,12 @@ textarea.section.norm {
 	max-height: 20em;
 	resize: vertical;
 }
+@media (pointer: coarse) {
+	.codable {
+		font-size: 0.75em !important;
+		height: 17em !important;
+	}
+}
 </style>
 
 <div class="content-container snug">
@@ -258,18 +264,21 @@ var $customDomain = document.getElementById('domain-alias');
 var $customHandleEnv = document.getElementById('custom-handle-env');
 var $normalHandleEnv = document.getElementById('normal-handle-env');
 
-var opt = {
-	showLineNumbers: false,
-	showPrintMargin: 0,
-	minLines: 10,
-	maxLines: 40,
-};
-var theme = "ace/theme/chrome";
-var cssEditor = ace.edit("css-editor");
-cssEditor.setTheme(theme);
-cssEditor.session.setMode("ace/mode/css");
-cssEditor.setOptions(opt);
-cssEditor.resize(true);
+if (matchMedia('(pointer:fine)').matches) {
+	// Only initialize Ace editor on devices with a mouse
+	var opt = {
+		showLineNumbers: false,
+		showPrintMargin: 0,
+		minLines: 10,
+		maxLines: 40,
+	};
+	var theme = "ace/theme/chrome";
+	var cssEditor = ace.edit("css-editor");
+	cssEditor.setTheme(theme);
+	cssEditor.session.setMode("ace/mode/css");
+	cssEditor.setOptions(opt);
+	cssEditor.resize(true);
+}
 </script>
 
 {{template "footer" .}}