Fix the mobile view

server/conf/connection_screens.py

@@ -24,6 +24,9 @@ from django.conf import settings
 
 from evennia import utils
 
+# Note: Can't really do unicode like
+#      |b ⋅•⋅⋅•⋅⊰⋅•⋅⋅•⋅∙∘☽༓☾∘∙•⋅⋅⋅•⋅⋅⊰⋅•⋅⋅•⋅ |n
+
 CONNECTION_SCREEN = """
 Wha...what is this place?
 
@@ -31,25 +34,22 @@ You followed his instructions. Head to the city park, and on the woodsy side, tu
 
 Just keep following the red kerchiefs, until...
 
-     |b ⋅•⋅⋅•⋅⊰⋅•⋅⋅•⋅∙∘☽༓☾∘∙•⋅⋅⋅•⋅⋅⊰⋅•⋅⋅•⋅ |n
-
 Welcome to the World of |g{}|n, version {}!
 
 This is a game. One that hearkens back to earlier age, where, with limited graphics, we created worlds built of words. A story game where you type instructions to manipulate the story.
 
-If you have an existing account, connect to it by typing:
+If you have an existing account, connect to it by typing (in the lower boxed area if you are on the web):
 
-      |wconnect <username> <password>|n
+  |wconnect <username> <password>|n
 
 If you need to create an account, (in the box at the bottom of the screen) type the following (without the <>'s):
 
-      |wcreate <username> <password>|n
+  |wcreate <username> <password>|n
 
 If you have spaces in your username, enclose it in quotes.
 
 After you've logged in Enter |whelp me start|n for more the getting started guide.
 
-     |b ⋅•⋅⋅•⋅⊰⋅•⋅⋅•⋅∙∘☾༓☽∘∙•⋅⋅⋅•⋅⋅⊰⋅•⋅⋅•⋅ |n
 """.format(
     settings.SERVERNAME, utils.get_evennia_version("short")
 )

web/static/webclient/css/custom.css

@@ -21,12 +21,6 @@ div.out {
     line-height: 1.4em;
 }
 
-@media screen and (max-width: 480px) {
-  div.out {
-    line-height: 1.4em;
-  }
-}
-
 input[type=textarea]:focus {
   background-color: lightblue;
 }
@@ -42,11 +36,11 @@ textarea.inputfield {
     color: #26201a;
     background-color: #E3ECDE;
 
-    background-image: url('../../website/images/prompt-icon.png');
+    /* background-image: url('../../website/images/prompt-icon.png'); */
-    background-size: 34px;
+    /* background-size: 34px; */
-    background-position: 4px 4px;
+    /* background-position: 4px 4px; */
-    background-repeat: no-repeat;
+    /* background-repeat: no-repeat; */
-    padding-left: 40px;
+    /* padding-left: 40px; */
 
     border-color: brown;
     border-radius: 8px;
@@ -63,8 +57,22 @@ textarea.inputfield {
 textarea.inputfield:focus {
     color: #26201a;
     background-color: #E3ECDE;
-    background-image: url('../../website/images/prompt-icon-on.png');
+    /* background-image: url('../../website/images/prompt-icon-on.png'); */
-    background-size: 34px;
+    /* background-size: 34px; */
+}
+
+@media screen and (max-width: 480px) {
+  div.out {
+    font-size: 18px;
+    line-height: 1.4em;
+  }
+  .lm_content {
+      height: 2.0em;
+  }
+  textarea.inputfield {
+      margin-left: 0px;
+      margin-right: 0px;
+  }
 }
 
 .color-010 {

web/static/website/css/moss-styles.css

@@ -25,8 +25,9 @@ h1,h2,h3 {
 h1 {
     color: #B63F31;
     /* color: #423222; */
-    text-shadow: 5px 5px 10px #E3ECDE;
+    text-shadow: 5px 5px 5px #E3ECDE;
     font-size: 5.0vw;
+    font-weight: 900;
     /* text-align: justify; */
     text-align: center;
     line-height: 80%;
@@ -62,13 +63,25 @@ a.playbutton {
     padding: 14px 37px;
     text-decoration: none;
     text-shadow: 0px 1px 0px #283966;
-    margin: auto;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 @media screen and (max-width: 480px) {
-  #instructions {
+    h1 {
-      display: none;
+        font-size: 8.0vw;
-  }
+    }
+    p.buttons {
+        bottom: 1%;
+        left:50%;
+        margin-left:-120px;
+    }
+    #play {
+        padding: 6px 12px;
+    }
+    #instructions {
+        display: none;
+    }
 }
 #scrolled-instructions {
     display: none;