Added scss and generated css

29fae6cf · Will Billingsley · fd036995 · 29fae6cf · 29fae6cf · 29fae6cf
Commit 29fae6cf authored 6 years ago by Will Billingsley
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
 <html>
  <title>Conway's Game of Life</title>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

+  <div class="container">
    <h1>Conway's Game of Life</h1>
    <svg xmlns="http://www.w3.org/2000/svg" id="game" width="640" height="400"></svg>
    <div>
-      <button onclick="javascript: { gameOfLife.stepGame(); render(); }">Step</button>
+        <button class="btn btn-primary" onclick="javascript: { gameOfLife.stepGame(); render(); }">Step</button>
+    </div>
  </div>
-

  <script src="gameOfLife.js"></script>
  <script src="render.js"></script>
@@ -16,15 +18,6 @@
    render()
  </script>

-  <style>
-    .cell {
-      fill: #ddd;
-      stroke: #444;
-      cursor: pointer;
-    }
-    .cell.alive {
-      fill: #88f;
-    }
-  </style>
+  <link rel="stylesheet" href="style.css" />

 </html>
\ No newline at end of file
--- a/style.css
+++ b/style.css
+.cell {
+  fill: #ddd;
+  stroke: #444;
+  cursor: pointer;
+}
+.cell:hover {
+  fill: #c4c4c4;
+}
+.cell.alive {
+  fill: #88f;
+}
+.cell.alive:hover {
+  fill: #5555ff;
+}
+
+/*# sourceMappingURL=style.css.map */
--- a/style.css.map
+++ b/style.css.map
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAIA;EACE,MAJY;EAKZ,QAJa;EAKb;;AAEA;EACE;;AAGF;EACE,MAdY;;AAgBd;EACE","file":"style.css"}
\ No newline at end of file
--- a/style.scss
+++ b/style.scss
+$primary-color: #88f;
+$empty-color: #ddd;
+$border-color: #444;
+
+.cell {
+  fill: $empty-color;
+  stroke: $border-color;
+  cursor: pointer;
+
+  &:hover {
+    fill: darken($empty-color, 10%);  
+  }
+
+  &.alive {
+    fill: $primary-color;
+  }
+  &.alive:hover {
+    fill: darken($primary-color, 10%);
+  }
+}
+