Fix up some stylesheets.

Print stylesheet is fairly visible now.

3 files changed, 41 insertions, 19 deletions

diff --git a/mobile.css b/mobile.css
index 4bdb760..92d62e2 100644
--- a/mobile.css
+++ b/mobile.css
@@ -1,14 +1,8 @@
-* {
-    padding: 0;
-    margin: 0;
-}
-
 body {
     display: flex;
     flex-wrap: nowrap;
     flex-direction: column;
     align-items: stretch;
-    margin: 0;
 
     background-color: #ddd;
 
@@ -31,7 +25,6 @@ body {
 
 #errors p {
     padding: 1ex 1em;
-    margin: 0;
 }
 
 #errors button {
@@ -42,7 +35,6 @@ body {
 }
 
 #genome-list {
-    margin: 0;
     overflow: scroll;
     align-self: stretch;
     flex-basis: 50%;
@@ -66,10 +58,6 @@ body {
     border-top: 1px dashed black;
 }
 
-.genome {
-    padding: 0;
-}
-
 .genome.locked {
     cursor: text
 }
@@ -109,7 +97,6 @@ body {
 
 #instructions {
     padding: 1ex;
-    margin: 0;
     overflow: scroll;
     flex-basis: 50%;
 
@@ -164,7 +151,6 @@ body {
 #nucleotide-selector {
     position: relative;
     white-space: nowrap;
-    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. */
 
@@ -195,7 +181,6 @@ body {
 }
 
 #amino-acid-selector p {
-    margin: 0;
     padding: 10px;
 
     border-bottom: 1px dashed black;
@@ -209,7 +194,6 @@ body {
     display: flex;
     flex-wrap: wrap;
 
-    margin: 0;
     padding: 10px;
 
     list-style-type: none;
diff --git a/print.css b/print.css
index bbbec05..3739ec6 100644
--- a/print.css
+++ b/print.css
@@ -23,11 +23,44 @@ body {
     display: none;
 }
 
-.genome>ol {
+#genome-list {
+    width: 100%;
+}
+
+#genome-list .initial,
+#genome-list .history,
+#genome-list .final {
+    padding-left: 2.5em;
+}
+
+#genome-list .initial {
+    border-bottom: 1px dashed black;
+}
+
+#genome-list .final {
+    border-top: 1px dashed black;
+}
+
+.genome {
     display: inline-flex;
     flex-wrap: wrap;
-    padding: 0;
-    margin: 1ex;
+}
+
+.genome .codon {
+    display: inline-block;
+    margin: 0.5ex;
+    border: 1px solid black;
+}
+
+.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 {
diff --git a/style.css b/style.css
index 635d6ed..4cb289f 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,8 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+
 .hidden {
     display: none !important;
 }