move styles

maccman · May 24, 2012 · 99055c5 · 99055c5
1 parent 642f70b
commit 99055c5
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 111 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ Any color inputs will now automatically be shimmed.
 
     <input type="color" value="#FF0000">
 
-You may also want to include the default styles, located in `index.html`.
+You may also want to include the default styles, located in `site/styles.css`.
 
 ## Building
 

diff --git a/index.html b/index.html
@@ -19,117 +19,9 @@
       font-family: 'Helvetica Neue', Helvetica, Arial Geneva, sans-serif;
       font-size: 12px;
     }
-
-    .colorCanvas {
-      -webkit-user-select: none;
-      display: -webkit-box;
-      -webkit-box-orient: horizontal;
-      -webkit-box-align: stretch;
-      -webkit-box-pack: start;
-      display: -moz-box;
-      -moz-box-orient: horizontal;
-      -moz-box-align: stretch;
-      -moz-box-pack: start;
-      width: 425px;
-    }
-
-    .colorCanvas canvas {
-      display: block;
-    }
-
-    .colorCanvas label {
-      display: block;
-      overflow: hidden;
-    }
-
-    .colorCanvas label span {
-      display: block;
-      float: left;
-      width: 30px;
-      line-height: 25px;
-    }
-
-    .colorCanvas label span:after {
-      content: ':';
-    }
-
-    .colorCanvas label input {
-      width: 60px;
-    }
-
-    .colorCanvas .spectrum,
-    .colorCanvas .gradient,
-    .colorCanvas .alpha {
-      cursor: pointer;
-      position: relative;
-      overflow: visible;
-    }
-
-    .colorCanvas .position {
-      position: absolute;
-      left: 0;
-      top: 0;
-      pointer-events: none;
-      z-index: 100;
-    }
-
-    .colorCanvas .gradient .position {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      border: 2px solid #000;
-      margin: -4px 0 0 -4px;
-    }
-
-    .colorCanvas .spectrum .position,
-    .colorCanvas .alpha .position {
-      height: 2px;
-      background: #000;
-      width: 10px;
-      margin-top: -1px;
-    }
-
-    .colorCanvas .preview {
-      background: url("site/grid.png") repeat;
-    }
-
-    .colorCanvas .alpha {
-      background: url("site/grid.png") repeat;
-      margin: 0 6px 0 0;
-    }
-
-    .colorCanvas .controls {
-      overflow: hidden;
-    }
-
-    .colorCanvas .preview {
-      margin: 5px 0 5px 0;
-    }
-
-    .colorCanvas .preview,
-    .colorCanvas .preview .inner {
-      height: 55px;
-    }
-
-    .colorCanvas .original {
-      height: 5px;
-    }
-
-    .colorCanvasInput {
-      width: 30px;
-      height: 20px;
-      background-image: url("site/grid.png");
-    }
-
-    .popup {
-      background: #FFF;
-      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
-      border-radius: 5px;
-      padding: 8px;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
   </style>
+
+  <link rel="stylesheet" href="site/styles.css" type="text/css" charset="utf-8">
 </head>
 <body>
   <h1>ColorCanvas</h1>

diff --git a/site/styles.css b/site/styles.css
@@ -0,0 +1,108 @@
+.colorCanvas {
+  -webkit-user-select: none;
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  -webkit-box-align: stretch;
+  -webkit-box-pack: start;
+  display: -moz-box;
+  -moz-box-orient: horizontal;
+  -moz-box-align: stretch;
+  -moz-box-pack: start;
+  width: 425px;
+}
+
+.colorCanvas canvas {
+  display: block;
+}
+
+.colorCanvas label {
+  display: block;
+  overflow: hidden;
+}
+
+.colorCanvas label span {
+  display: block;
+  float: left;
+  width: 30px;
+  line-height: 25px;
+}
+
+.colorCanvas label span:after {
+  content: ':';
+}
+
+.colorCanvas label input {
+  width: 60px;
+}
+
+.colorCanvas .spectrum,
+.colorCanvas .gradient,
+.colorCanvas .alpha {
+  cursor: pointer;
+  position: relative;
+  overflow: visible;
+}
+
+.colorCanvas .position {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  z-index: 100;
+}
+
+.colorCanvas .gradient .position {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 2px solid #000;
+  margin: -4px 0 0 -4px;
+}
+
+.colorCanvas .spectrum .position,
+.colorCanvas .alpha .position {
+  height: 2px;
+  background: #000;
+  width: 10px;
+  margin-top: -1px;
+}
+
+.colorCanvas .preview {
+  background: url("site/grid.png") repeat;
+}
+
+.colorCanvas .alpha {
+  background: url("site/grid.png") repeat;
+  margin: 0 6px 0 0;
+}
+
+.colorCanvas .controls {
+  overflow: hidden;
+}
+
+.colorCanvas .preview {
+  margin: 5px 0 5px 0;
+}
+
+.colorCanvas .preview,
+.colorCanvas .preview .inner {
+  height: 55px;
+}
+
+.colorCanvas .original {
+  height: 5px;
+}
+
+.colorCanvasInput {
+  width: 30px;
+  height: 20px;
+  background-image: url("site/grid.png");
+}
+
+.popup {
+  background: #FFF;
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  padding: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}