From 29fae6cfa8c3e1a629d5e6b5c77bbc0012b1644e Mon Sep 17 00:00:00 2001
From: William Billingsley <wbilling@une.edu.au>
Date: Tue, 17 Jul 2018 05:21:21 +1000
Subject: [PATCH] Added scss and generated css
---
index.html | 23 ++++++++---------------
style.css | 16 ++++++++++++++++
style.css.map | 1 +
style.scss | 21 +++++++++++++++++++++
4 files changed, 46 insertions(+), 15 deletions(-)
create mode 100644 style.css
create mode 100644 style.css.map
create mode 100644 style.scss
diff --git a/index.html b/index.html
index eca194f..c926c6b 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 0000000..fc2272b
--- /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 0000000..081986f
--- /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 0000000..460a0c3
--- /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%);
+ }
+}
+
--
GitLab