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,6 +264,8 @@ var $customDomain = document.getElementById('domain-alias');
 var $customHandleEnv = document.getElementById('custom-handle-env');
 var $normalHandleEnv = document.getElementById('normal-handle-env');
 
+if (matchMedia('(pointer:fine)').matches) {
+	// Only initialize Ace editor on devices with a mouse
 	var opt = {
 		showLineNumbers: false,
 		showPrintMargin: 0,
@@ -270,6 +278,7 @@ cssEditor.setTheme(theme);
 	cssEditor.session.setMode("ace/mode/css");
 	cssEditor.setOptions(opt);
 	cssEditor.resize(true);
+}
 </script>
 
 {{template "footer" .}}