5 files changed, 58 insertions, 61 deletions

diff --git a/Makefile b/Makefile
index 02db249..098fb4d 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,4 @@
 .PHONY: serve
 
 serve:
-	python -m http.server
+	python -m http.server 8080
diff --git a/mobile.css b/mobile.css
index 3d721de..a6ddd29 100644
--- a/mobile.css
+++ b/mobile.css
@@ -4,6 +4,8 @@ body {
     align-items: stretch;
     margin: 0;
 
+    background-color: #eee;
+
     position: absolute;
     top: 0;
     left: 0;
@@ -45,6 +47,9 @@ body {
     margin: 0;
     overflow: scroll;
     flex-basis: 50%;
+
+    background-color: #ddd;
+
     border-style: solid;
     border-top-width: 1px;
     border-left-width: 0;
@@ -60,6 +65,10 @@ body {
     display: none;
 }
 
+#instructions .current {
+    background-color: yellow;
+}
+
 #instructions .step.current {
     display: list-item;
 }
@@ -72,9 +81,13 @@ body {
     display: block;
     float: right;
     padding: 2ex;
+
+    background-color: #fde;
+    border: 1px solid #aaa;
 }
 
 #die .value {
+    text-align: center;
     padding-bottom: 1ex;
 }
 
@@ -84,6 +97,24 @@ body {
     padding: 0;
     word-spacing: -6px; /* TODO: 0 doesn't work. And for some reason whitespace is being renderded between <li> elements? */
     width: 8em; /* TODO: this shouldn't be hard coded. */
+
+    background-color: ivory;
+    border: 1px solid black;
+}
+
+#nucleotide-selector,
+.genome:not(.locked) {
+    cursor: pointer;
+}
+
+#nucleotide-selector li:hover,
+.genome:not(.locked) .nucleotide:hover {
+    background-color: orange;
+}
+
+.genome .nucleotide.selected,
+.genome:not(.locked) .nucleotide.selected:hover {
+    background-color: red;
 }
 
 #nucleotide-selector li {
@@ -99,10 +130,17 @@ body {
     margin: 0.5ex;
 }
 
+.genome.locked {
+    cursor: text
+}
+
 .genome>ol {
     display: inline-flex;
     flex-wrap: wrap;
     padding: 0;
+    border: 1px solid black;
+
+    background-color: white;
 }
 
 .genome .nucleotide {
diff --git a/print.css b/print.css
index cbbfff0..bbbec05 100644
--- a/print.css
+++ b/print.css
@@ -1,4 +1,9 @@
+* {
+    box-sizing: border-box;
+}
+
 body {
+    display: flex;
     background-color: white;
 }
 
@@ -18,10 +23,19 @@ body {
     display: none;
 }
 
-#genome-history {
-    top: 0;
-    left: 0;
-    width: 100%;
+.genome>ol {
+    display: inline-flex;
+    flex-wrap: wrap;
+    padding: 0;
+    margin: 1ex;
+}
+
+.genome .nucleotide {
+    display: inline-flex;
+    height: 3ex;
+    width: 2em;
+    justify-content: space-around;
+    align-items: center;
 }
 
 .genome .nucleotide.selected {
diff --git a/rules.mjs b/rules.mjs
index 76dc210..ebe7b0b 100644
--- a/rules.mjs
+++ b/rules.mjs
@@ -266,7 +266,7 @@ class Rules {
 	}
 	this.enterState()
     }
-
+v
     get iterations() {
         return Number(this.remainingIterations.innerText)
     }
@@ -292,7 +292,6 @@ class Rules {
             this.currentGenome.selectedNucleotide = n
             const g = this.currentGenome.clone()
             window.g = g
-            console.log(g)
             this.genomeList.push(g)
         })
 
diff --git a/style.css b/style.css
index 1d4f71c..635d6ed 100644
--- a/style.css
+++ b/style.css
@@ -1,57 +1,3 @@
-* {
-    box-sizing: border-box;
-}
-
 .hidden {
     display: none !important;
 }
-
-body {
-    background-color: #eee;
-}
-
-#instructions {
-    background-color: #ddd;
-}
-
-#instructions .current {
-    background-color: yellow;
-}
-
-#die {
-    background-color: #fde;
-    border: 1px solid #aaa;
-}
-
-#die .value {
-    text-align: center;
-}
-
-#nucleotide-selector {
-    background-color: ivory;
-    border: 1px solid black;
-}
-
-.genome.locked {
-    cursor: text
-}
-
-.genome>ol {
-    border: 1px solid black;
-    background-color: white;
-}
-
-#nucleotide-selector,
-.genome:not(.locked) {
-    cursor: pointer;
-}
-
-#nucleotide-selector li:hover,
-.genome:not(.locked) .nucleotide:hover {
-    background-color: orange;
-}
-
-.genome .nucleotide.selected,
-.genome:not(.locked) .nucleotide.selected:hover {
-    background-color: red;
-}