Put freaky css into dedicated file becaues of Chrome

Chrome, now you're just frkn w/h me!
kenamick · Nov 11, 2015 · e6554a8 · e6554a8
1 parent a0ed7e4
commit e6554a8
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 51 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -69,6 +69,7 @@ module.exports = function (grunt) {
           { expand: true, src: ['assets/images/*.png', 'assets/images/*.gif', 'assets/images/*.jpg'], dest: 'dist/' },
           { expand: true, src: ['assets/sfx/*.ogg', 'assets/sfx/*.m4a'], dest: 'dist/' },
           { expand: true, src: ['assets/fonts/*'], dest: 'dist/' },
+          { expand: true, flatten: true, src: ['css/*.css'], dest: 'dist/css/' },
           { expand: true, flatten: true, src: ['lib/*'], dest: 'dist/lib/' },
           { expand: true, flatten: true, src: ['LICENSE'], dest: 'dist/' },
           { expand: true, src: ['index.html'], dest: 'dist/' }

diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,56 @@
+@font-face {
+    font-family: 'Jura';
+    font-style: normal;
+    font-weight: 500;
+    src: url('../assets/fonts/Jura-Medium.ttf') format('truetype');
+}
+@font-face {
+    font-family: 'bmspa';
+    src: url('../assets/fonts/bmspa.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+* {
+  margin: 0;
+  padding: 0;
+  cursor: default;
+}
+body, html { 
+  margin:0; 
+  padding: 0; 
+  overflow:hidden; 
+  height: 100%; 
+  font-family: 'Jura', Arial, sans-serif; 
+  font-size:20px 
+}
+body, html {
+  background: rgb(224,226,228); /* Old browsers */
+  background: -moz-linear-gradient(top,  rgba(224,226,228,1) 0%, rgba(185,187,189,1) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,226,228,1)), color-stop(100%,rgba(185,187,189,1))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  rgba(224,226,228,1) 0%,rgba(185,187,189,1) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  rgba(224,226,228,1) 0%,rgba(185,187,189,1) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  rgba(224,226,228,1) 0%,rgba(185,187,189,1) 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  rgba(224,226,228,1) 0%,rgba(185,187,189,1) 100%); /* W3C */
+}
+#game { 
+  position: absolute;
+  top: 0;
+  left: 50%;
+  -webkit-transform: translate(-50%, 0%);
+  -moz-transform: translate(-50%, 0%);
+  -ms-transform: translate(-50%, 0%);
+  -o-transform: translate(-50%, 0%);
+  transform: translate(-50%, 0%);
+  width: 400px;
+  height: 640px;
+  border: 1px solid #999; 
+  color:white; 
+  -webkit-box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, .5);
+  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, .5);
+}
+p.sorry {
+  margin: 0 auto;
+  text-align: center;
+  font-size: 12px;
+  visibility: hidden;
+}
diff --git a/index.html b/index.html
@@ -7,57 +7,7 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <title>Strider</title>
-  <style>
-    @font-face {
-        font-family: 'Jura';
-        font-style: normal;
-        font-weight: 500;
-        src: url('assets/fonts/Jura-Medium.ttf') format('truetype');
-    }
-    @font-face {
-        font-family: 'bmspa';
-        src: url('assets/fonts/bmspa.ttf') format('truetype');
-        font-weight: normal;
-        font-style: normal;
-    }
-    * {
-      margin: 0;
-      padding: 0;
-      cursor: default;
-    }
-    body, html { margin:0; padding: 0; overflow:hidden; height: 100%; font-family: 'Jura', Arial, sans-serif; font-size:20px }
-    body, html {
-      background: rgb(224,226,228); /* Old browsers */
-      background: -moz-linear-gradient(top,  rgba(224,226,228,1) 0%, rgba(185,187,189,1) 100%); /* FF3.6+ */
-      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,226,228,1)), color-stop(100%,rgba(185,187,189,1))); /* Chrome,Safari4+ */
-      background: -webkit-linear-gradient(top,  rgba(224,226,228,1) 0%,rgba(185,187,189,1) 100%); /* Chrome10+,Safari5.1+ */
-      background: -o-linear-gradient(top,  rgba(224,226,228,1) 0%,rgba(185,187,189,1) 100%); /* Opera 11.10+ */
-      background: -ms-linear-gradient(top,  rgba(224,226,228,1) 0%,rgba(185,187,189,1) 100%); /* IE10+ */
-      background: linear-gradient(to bottom,  rgba(224,226,228,1) 0%,rgba(185,187,189,1) 100%); /* W3C */
-    }
-    #game { 
-      position: absolute;
-      top: 0;
-      left: 50%;
-      -webkit-transform: translate(-50%, 0%);
-      -moz-transform: translate(-50%, 0%);
-      -ms-transform: translate(-50%, 0%);
-      -o-transform: translate(-50%, 0%);
-      transform: translate(-50%, 0%);
-      width: 400px;
-      height: 640px;
-      border: 1px solid #999; 
-      color:white; 
-      -webkit-box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, .5);
-      box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, .5);
-    }
-    p.sorry {
-      margin: 0 auto;
-      text-align: center;
-      font-size: 12px;
-      visibility: hidden;
-    }
-  </style>
+  <link rel="stylesheet" type="text/css" media="screen" href="css/main.css">
 </head>
 <body>
   <div id="game"></div>