Add initial/final genome displays

1 files changed, 72 insertions, 43 deletions

diff --git a/mobile.css b/mobile.css
index ef541e1..4bdb760 100644
--- a/mobile.css
+++ b/mobile.css
@@ -1,10 +1,16 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
 body {
     display: flex;
+    flex-wrap: nowrap;
     flex-direction: column;
     align-items: stretch;
     margin: 0;
 
-    background-color: #eee;
+    background-color: #ddd;
 
     position: absolute;
     top: 0;
@@ -35,13 +41,72 @@ body {
     margin-bottom: 5px;
 }
 
-#genome-history {
+#genome-list {
     margin: 0;
     overflow: scroll;
     align-self: stretch;
     flex-basis: 50%;
 }
 
+#genome-list .initial,
+#genome-list .history,
+#genome-list .final {
+    padding-left: 2.5em;
+}
+
+#genome-list .initial {
+    border-bottom: 1px dashed black;
+}
+
+#genome-list .history {
+    background-color: #eee;
+}
+
+#genome-list .final {
+    border-top: 1px dashed black;
+}
+
+.genome {
+    padding: 0;
+}
+
+.genome.locked {
+    cursor: text
+}
+
+.genome .codon {
+    display: inline-block;
+    margin: 5px;
+    border: 1px solid black;
+
+    background-color: white;
+}
+
+.genome .codon>ol {
+    padding: 1ex 0.5em;
+}
+
+.genome .codon .amino-acid {
+    border-top: 1px solid black;
+    text-align: center;
+    padding-top: 0.5ex;
+    padding-bottom: 0.5ex;
+}
+
+.genome .nucleotide {
+    display: inline-block;
+    width: 28px;
+    font-size: 18px;
+    text-align: center;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.genome .nucleotide span {
+    display: inline-block;
+}
+
 #instructions {
     padding: 1ex;
     margin: 0;
@@ -57,6 +122,11 @@ body {
     border-bottom-width: 0;
 }
 
+#instructions ol,
+#instructions ul {
+    padding-left: 2.5em;
+}
+
 #instructions .step {
     padding: 5px;
 }
@@ -183,44 +253,3 @@ body {
     background-color: ivory;
     border: 1px solid black;
 }
-
-.genome>ol {
-    padding: 0;
-}
-
-.genome.locked {
-    cursor: text
-}
-
-.genome .codon {
-    display: inline-block;
-    margin: 5px;
-    border: 1px solid black;
-
-    background-color: white;
-}
-
-.genome .codon>ol {
-    padding: 1ex 0.5em;
-}
-
-.genome .codon .amino-acid {
-    border-top: 1px solid black;
-    text-align: center;
-    padding-top: 0.5ex;
-    padding-bottom: 0.5ex;
-}
-
-.genome .nucleotide {
-    display: inline-block;
-    width: 28px;
-    font-size: 18px;
-    text-align: center;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    align-items: center;
-}
-
-.genome .nucleotide span {
-    display: inline-block;
-}