Move CSS into a separate file

itinerarium · Feb 27, 2019 · 2512e52 · 2512e52
1 parent 5998323
commit 2512e52
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 62 deletions.
diff --git a/default.css 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
@@ -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">