character page is a little cleaner on phone; text doesn't cut off at load

src/static/css/all.css

@@ -161,8 +161,6 @@ img {
 }
 .top a:hover {
     color: #A88AA8;
-    /*font-family: 'mitochondriaregular', sans-serif;*/
-    /*font-size: .73em;*/
     font-weight: bold;
 }
 .top a:visited {

src/static/css/char.css

@@ -1,6 +1,7 @@
 .content-grid { 
     display: grid;
-    grid-template-columns: 16ch 50ch 1fr;
+    /*grid-template-columns: 16ch 50ch 1fr;*/
+    grid-template-columns: 25% 60% 1fr;
     grid-template-rows: 5em repeat(2, auto);
     grid-column-gap: 0px;
     grid-row-gap: 0px;
@@ -22,6 +23,7 @@
     grid-column-gap: 0px;
     grid-row-gap: 1.5em; 
     padding-bottom: 1.5em; 
+    word-wrap: break-word;
 }
 .portrait { grid-area: 1 / 3 / 3 / 4;
     width: 100%;}

src/static/css/nav.css

@@ -5,6 +5,7 @@ footer {
     text-align: center;
     padding-top: 0.5em;
     padding-bottom: 1em;
+    word-wrap: break-word;
 }
 footer a:link {
     color: #C0AAC0;
@@ -14,9 +15,7 @@ footer a:visited {
 }
 footer a:hover {
     color: #E1B9E6;
-    /*font-family: 'mitochondriaregular', sans-serif;*/
 }
 footer a:active {
     color: #C0AAC0;
-    /*font-family: 'mitochondriaregular', sans-serif;*/
 }