From b447d31cdda1a27599f726cc2066564dbc4ea6a3 Mon Sep 17 00:00:00 2001
From: Daniel Klein <danielklein@airpost.net>
Date: Wed, 27 Feb 2019 20:00:47 +1100
Subject: [PATCH] Move CSS into a separate file

---
 default.css | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html  | 63 +----------------------------------------------------
 2 files changed, 61 insertions(+), 62 deletions(-)
 create mode 100644 default.css

diff --git a/default.css b/default.css
new file mode 100644
index 0000000..e15d9bb
--- /dev/null
+++ b/default.css
@@ -0,0 +1,60 @@
+html {
+    font-family: Helvetica, sans-serif;
+    background-color: #404040;
+    min-width: 320px;
+}
+* {
+    margin: 0;
+    padding: 0;
+}
+
+div#container {
+    width: 60%;
+    line-height: 1.5;
+    margin: 0 auto;
+    padding: 1em;
+    background-color: #f3f3f3;
+}
+
+@media screen and (max-width: 640px) {
+    div#container {
+        width: 288px;
+    }
+}
+
+noscript p {
+    background-color: #ffffff;
+    padding: 1em;
+}
+
+div#tool, div#about, div#note {
+    background-color: #ffffff;
+    padding: 1em;
+}
+
+p {
+    margin-bottom: 1em;
+}
+
+input#ipa-input {
+    width: 240px;
+    text-align: center;
+    display: block;
+    margin: 0 auto;
+}
+input#submit, input#download-button {
+    width: 248px;
+    text-align: center;
+    display: block;
+    margin: 1em auto;
+}
+input#download-button {
+    margin-bottom: 0;
+}
+hr {
+    border: 0;
+    height: 1em;
+}
+h2 {
+    margin-bottom: 0.35em;
+}
diff --git a/index.html b/index.html
index b3880d7..5fdba1b 100644
--- a/index.html
+++ b/index.html
@@ -9,68 +9,7 @@
   <title>Convert IPA phonetic notation text to speech</title>
   <meta name="description" content="A browser-based tool to convert International Phonetic Alphabet (IPA) phonetic notation to speech using the meSpeak.js package.">
 
-  <style type="text/css">
-  html {
-    font-family: Helvetica, sans-serif;
-    background-color: #404040;
-    min-width: 320px;
-  }
-  * {
-    margin: 0;
-    padding: 0;
-  }
-
-  div#container {
-    width: 60%;
-    line-height: 1.5;
-    margin: 0 auto;
-    padding: 1em;
-    background-color: #f3f3f3;
-  }
-
-  @media screen and (max-width: 640px) {
-    div#container {
-      width: 288px;
-    }
-  }
-
-  noscript p {
-    background-color: #ffffff;
-    padding: 1em;
-  }
-
-  div#tool, div#about, div#note {
-    background-color: #ffffff;
-    padding: 1em;
-  }
-
-  p {
-    margin-bottom: 1em;
-  }
-
-  input#ipa-input {
-    width: 240px;
-    text-align: center;
-    display: block;
-    margin: 0 auto;
-  }
-  input#submit, input#download-button {
-    width: 248px;
-    text-align: center;
-    display: block;
-    margin: 1em auto;
-  }
-  input#download-button {
-    margin-bottom: 0;
-  }
-  hr {
-    border: 0;
-    height: 1em;
-  }
-  h2 {
-    margin-bottom: 0.35em;
-  }
-  </style>
+  <link rel="stylesheet" href="default.css"/>
 
   <script type="text/javascript" src="mespeak.js"></script>
   <script type="text/javascript">