chore(checker): align to center etc. (#508)

saschanaz · web-flow · commit e8b86cf7c235 · 2020-11-30T11:55:56.000+01:00
diff --git a/README.md b/README.md
@@ -10,6 +10,8 @@ This is a parser for [Web IDL](https://heycam.github.io/webidl/), a language
 [to specify web APIs in interoperable way](https://heycam.github.io/webidl/#introduction).
 This library supports both Node.js and the browser environment.
 
+Try the online checker [here](/checker).
+
 ## Installation
 
 Just the usual. For Node:
diff --git a/checker/index.html b/checker/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
   <title>WebIDL 2 Checker</title>
 
   <script type="module">
@@ -55,14 +56,23 @@
     });
   </script>
   <style>
+    html {
+      font-family: sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    body, textarea {
+      max-width: 100%;
+    }
     textarea {
       font-family: monospace;
     }
   </style>
 </head>
 
 <body>
-  <h2>WebIDL Checker</h2>
+  <h1>WebIDL Checker</h1>
   <p>This is an online checker for WebIDL built on the <a href="https://github.com/w3c/webidl2.js">webidl2.js</a>
     project.</p>
   <p>Enter your WebIDL to check below:</p>
