Major overhaul of styling

Switched to Sass stylesheets

.gitignore

@@ -19,3 +19,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# now using sass, ignore built css
+src/**/*.css

package.json

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "big-number": "^0.4.0",
+    "node-sass-chokidar": "0.0.3",
+    "npm-run-all": "^4.0.2",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
@@ -12,8 +14,11 @@
     "redux": "^3.7.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build-css": "node-sass-chokidar src/ -o src/",
+	"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
+	"start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build": "npm run build-css && react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }

src/Components/Game.js

@@ -8,6 +8,8 @@ import Stats from './Stats';
 import { loadGame, saveGame, clearSave, tick, addNanites, buyBuilding } from '../Actions/gameActions';
 import { prettifyNumber, updateTitleTag } from '../Utilities/utilities';
 
+import greenNebula from '../Images/greenNebula.jpg';
+
 class Game extends Component {
 	constructor(props) {
 		super(props);
@@ -33,6 +35,29 @@ class Game extends Component {
 
 	render() {
 		return (
+			<div style={{height: '100vh', width: '100vw'}}>
+				<div id="leftPanel" style={{backgroundImage: 'url(' + greenNebula + ')'}}>
+					<div id="banner">
+						<h2>{this.displayNaniteValue()} nanites</h2>
+						<small>{prettifyNumber(BigNumber(this.props.nanitesPerSecond).div(10))} per second</small>
+					</div>
+					<div id="bigNanite" onClick={() => this.props.addNanites(100)}>
+						<h1 className="text-center">Imagine an image of a nanite here</h1>
+					</div>
+				</div>
+				<div id="centerPanel">
+					<h2 className="text-center">Statistics</h2>
+					<Stats nanites={this.props.naniteHundredths}
+							nanitesPerSecond={this.props.nanitesPerSecond}
+							generatedNanites={this.props.nanitesGenerated}
+							handGeneratedNanites={this.props.nanitesHandGenerated}
+							buildingsOwned={this.props.buildingsOwned} />
+				</div>
+				<div id="rightPanel">
+					<h2 className="text-center">Buildings</h2>
+					{this.renderBuildings()}
+				</div>
+			{/*
 			<div className="container">
 				<div className="row text-center">
 					<div className="col-xs-12">
@@ -62,6 +87,8 @@ class Game extends Component {
 				<h3>Buildings</h3>
 				{this.renderBuildings()}
 			</div>
+			*/}
+			</div>
 		);
 	}
 }

src/index.css

@@ -1,15 +1,82 @@
-@import url('https://fonts.googleapis.com/css?family=Orbitron');
-
+@import url("https://fonts.googleapis.com/css?family=Orbitron");
 body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
   background-color: #000;
   color: #080;
-  font-family: 'Orbitron', sans-serif;
-}
+  font-family: 'Orbitron', sans-serif; }
+
+#leftPanel {
+  height: 100%;
+  width: 41.66667%;
+  float: left;
+  position: relative;
+  background-size: cover; }
+  @media (max-width: 768px) {
+    #leftPanel {
+      width: 100%; } }
+
+#banner {
+  position: absolute;
+  top: 10%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  text-align: center; }
+
+#bigNanite {
+  position: absolute;
+  width: 250px;
+  height: 250px;
+  top: calc(40% - 125px);
+  left: calc(50% - 125px);
+  background-color: rgba(0, 0, 0, 0.7);
+  border: 1px solid #080;
+  padding: 0.4em;
+  cursor: pointer; }
+  #bigNanite:hover {
+    width: 275px;
+    height: 275px;
+    top: calc(40% - 137.5px);
+    left: calc(50% - 137.5px); }
+  #bigNanite:active {
+    width: 250px;
+    height: 250px;
+    top: calc(40% - 125px);
+    left: calc(50% - 125px); }
+  @media (max-width: 768px) {
+    #bigNanite, #bigNanite:hover {
+      width: 250px;
+      height: 250px;
+      top: calc(60% - 125px);
+      left: calc(50% - 125px); }
+    #bigNanite:active {
+      width: 275px;
+      height: 275px;
+      top: calc(60% - 137.5px);
+      left: calc(50% - 137.5px); } }
+
+#centerPanel {
+  height: 100%;
+  width: 25%;
+  float: left;
+  padding: 1em; }
+  @media (max-width: 768px) {
+    #centerPanel {
+      height: auto;
+      width: 100%; } }
+
+#rightPanel {
+  height: 100%;
+  width: 33.33333%;
+  float: left;
+  padding: 1em;
+  overflow: auto; }
+  @media (max-width: 768px) {
+    #rightPanel {
+      height: auto;
+      width: 100%; } }
 
 .building {
-	border: 1px solid #080;
-	padding: 1em;
-}
+  border: 1px solid #080;
+  padding: 1em; }

src/index.scss

@@ -0,0 +1,109 @@
+@import url('https://fonts.googleapis.com/css?family=Orbitron');
+
+$themeGreen: #080;
+$transBG: rgba(0, 0, 0, 0.7);
+$naniteSize: 250px;
+$engorgedNaniteSize: $naniteSize * 1.1;
+$naniteOffset: $naniteSize / 2;
+$engorgedOffset: $engorgedNaniteSize / 2;
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background-color: #000;
+  color: $themeGreen;
+  font-family: 'Orbitron', sans-serif;
+}
+
+#leftPanel {
+	height: 100%;
+	width: 5 / 12 * 100%;
+	float: left;
+	position: relative;
+	background-size: cover;
+
+	@media(max-width: 768px) {
+		width: 100%;
+	}
+}
+
+#banner {
+	position: absolute;
+	top: 10%;
+	width: 100%;
+	background-color: $transBG;
+	text-align: center;
+}
+
+#bigNanite {
+	position: absolute;
+	width: $naniteSize;
+	height: $naniteSize;
+	top: calc(40% - #{$naniteOffset});
+	left: calc(50% - #{$naniteOffset});
+	background-color: $transBG;
+	border: 1px solid $themeGreen;
+	padding: 0.4em;
+	cursor: pointer;
+
+	&:hover {
+		width: $engorgedNaniteSize;
+		height: $engorgedNaniteSize;
+		top: calc(40% - #{$engorgedOffset});
+		left: calc(50% - #{$engorgedOffset});
+	}
+
+	&:active{
+		width: $naniteSize;
+		height: $naniteSize;
+		top: calc(40% - #{$naniteOffset});
+		left: calc(50% - #{$naniteOffset});
+	}
+
+	@media (max-width: 768px) {
+		&, &:hover {
+			width: $naniteSize;
+			height: $naniteSize;
+			top: calc(60% - #{$naniteOffset});
+			left: calc(50% - #{$naniteOffset});
+		}
+
+		&:active {
+			width: $engorgedNaniteSize;
+			height: $engorgedNaniteSize;
+			top: calc(60% - #{$engorgedOffset});
+			left: calc(50% - #{$engorgedOffset});
+		}
+	}
+}
+
+#centerPanel {
+	height: 100%;
+	width: 3 / 12 * 100%;
+	float:left;
+	padding: 1em;
+
+	@media(max-width: 768px) {
+		height: auto;
+		width: 100%;
+	}
+}
+
+#rightPanel {
+	height: 100%;
+	width: 4 / 12 * 100%;
+	float: left;
+	padding: 1em;
+	overflow: auto;
+
+	@media (max-width: 768px) {
+		height: auto;
+		width: 100%;
+	}
+}
+
+.building {
+	border: 1px solid #080;
+	padding: 1em;
+}