~ihabunek/hitomezashi: Extract styles

2 files changed, 78 insertions(+), 77 deletions(-)

M index.html
A style.css

M index.html => index.html +4 -77

@@ 3,81 3,8 @@
 <head>
   <meta charset="UTF-8" />
   <title>Hitomezashi Stitch Patterns</title>
-  <style>
-    * {
-      box-sizing: border-box;
-      font-family: monospace;
-    }
-
-    body {
-      overflow: hidden;
-      font-family: monospace;
-      font-size: 14px;
-      margin: 0;
-      padding: 0;
-    }
-
-    #canvas {
-      width: 100%;
-      height: 100vh;
-      cursor: crosshair;
-    }
-
-    #box {
-      background-color: whitesmoke;
-      width: 360px;
-      border: 1px solid black;
-      position: absolute;
-      top: 12px;
-      left: 12px;
-      padding: 8px 16px;
-    }
-
-    .axis {
-      display: flex;
-      align-items: center;
-      margin-top: 8px;
-    }
-
-    .dims {
-      display: flex;
-      align-items: center;
-      margin-top: 8px;
-      margin-bottom: 12px;
-    }
-
-    .dims > input {
-      width: auto;
-    }
-
-    .dims > label {
-      padding: 0 .5rem;
-      margin-right: 2rem;
-      padding-top:  4px;
-    }
-
-    label {
-      white-space: nowrap;
-      cursor: pointer;
-    }
-
-    input {
-      margin-left: 8px;
-      width: 100%;
-      padding: 2px 5px;
-    }
-
-    ul {
-      padding-left: 1rem;
-    }
-
-    li {
-      margin-top: 4px;
-    }
-
-    .mt-1 { margin-top: 4px }
-    .mt-2 { margin-top: 8px }
-  </style>
+  <style type="text/css"></style>
+  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
   <div id="box">


@@ 103,8 30,8 @@
     </div>
     <ul type="square" class="mt-2">
       <li>Change inputs to change patterns</li>
-      <li>Vovels & odd digits are offset</li>
-      <li>Click to color in areas (a bit slow)</li>
+      <li>Vovels &amp; odd digits are offset</li>
+      <li>Click to color in areas</li>
       <li>Inspired by <a href="https://www.youtube.com/watch?v=JbfhzlMk2eY">this video</a></li>
     </ul>
   </div>

A style.css => style.css +74 -0

@@ 0,0 1,74 @@
+* {
+  box-sizing: border-box;
+  font-family: monospace;
+}
+
+body {
+  overflow: hidden;
+  font-family: monospace;
+  font-size: 14px;
+  margin: 0;
+  padding: 0;
+}
+
+#canvas {
+  width: 100%;
+  height: 100vh;
+  cursor: crosshair;
+}
+
+#box {
+  background-color: whitesmoke;
+  width: 360px;
+  border: 1px solid black;
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  padding: 8px 16px;
+}
+
+.axis {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.dims {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  margin-bottom: 12px;
+}
+
+.dims > input {
+  width: auto;
+}
+
+.dims > label {
+  padding: 0 .5rem;
+  margin-right: 2rem;
+  padding-top:  4px;
+}
+
+label {
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+input {
+  margin-left: 8px;
+  width: 100%;
+  padding: 2px 5px;
+}
+
+ul {
+  padding-left: 1rem;
+}
+
+li {
+  margin-top: 4px;
+}
+
+.mt-2 {
+  margin-top: 8px
+}