diff --git a/index.html b/index.html
index eca194ff5c27f8df35b3d99c66f4078cde50ac3c..c926c6bb5ff128264a398fc5b9c58489e24bfe0a 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,16 @@
<!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">
- <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>
+ <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 class="btn btn-primary" onclick="javascript: { gameOfLife.stepGame(); render(); }">Step</button>
+ </div>
</div>
-
<script src="gameOfLife.js"></script>
<script src="render.js"></script>
<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
diff --git a/style.css b/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..fc2272b2d5b6a59d51803510bacd98e2da307771
--- /dev/null
+++ b/style.css
@@ -0,0 +1,16 @@
+.cell {
+ fill: #ddd;
+ stroke: #444;
+ cursor: pointer;
+}
+.cell:hover {
+ fill: #c4c4c4;
+}
+.cell.alive {
+ fill: #88f;
+}
+.cell.alive:hover {
+ fill: #5555ff;
+}
+
+/*# sourceMappingURL=style.css.map */
diff --git a/style.css.map b/style.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..081986fa2e0ab7ee07af35edbd3ca1b5939ba6dd
--- /dev/null
+++ b/style.css.map
@@ -0,0 +1 @@
+{"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
diff --git a/style.scss b/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..460a0c3cb7eaf00952ac902e522528c0658fd804
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,21 @@
+$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%);
+ }
+}
+