Fix website styles for mobile

css/converse.css

@@ -9581,7 +9581,7 @@ body.converse-fullscreen {
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
   color: var(--text-color);
-  font-family: "Helvetica", "Arial", sans-serif;
+  font-family: var(--normal-font);
   font-size: var(--font-size);
   direction: ltr;
   z-index: 1031; }

css/website.css

@@ -5244,7 +5244,7 @@ section h4 {
   align-items: center;
   font-family: 'Baumans', cursive;
   font-size: 6em;
-  margin-top: 1em;
+  margin-top: 2em;
   margin-bottom: 0.5em;
   color: white; }
   .brand-heading .byline {
@@ -5271,6 +5271,18 @@ section h4 {
     .brand-heading .converse-svg-logo .cls-4 {
       fill: white; }
 
+@media (max-width: 767.98px) {
+  .banner-social-buttons {
+    display: none; }
+  .chatroom-name {
+    font-size: 16px; }
+  .brand-heading {
+    flex-direction: column;
+    font-size: 4em;
+    margin-top: 1em; }
+    .brand-heading .byline {
+      margin: auto; } }
+
 .brand-heading__text {
   font-size: 0.9em;
   display: inline-flex;

index.html

@@ -221,8 +221,8 @@
                             or <a href="https://mastodon.xyz/@jcbrand" target="_blank" rel="noopener">Mastodon</a>
                         <li>Chat with me via XMPP at <a href="xmpp:jc@opkode.com" class="xmpp JSnocheck" title="XMPP/Jabber">jc@opkode.com</a></li>
                         <li>For technical support, you can ask on <a href="https://stackoverflow.com/questions/tagged/converse.js">Stack Overflow</a>
-                        <li>The Converse XMPP chatroom: <a href="xmpp:discuss@conference.conversejs.org?join" class="xmpp JSnocheck" title="Converse chat room">discuss@conference.conversejs.org</a>.</li>
-                        <li>Please file bugs and feature requests on <a target="_blank" rel="noopener" href="https://github.com/jcbrand/converse.js/issues">Github</a>.</li>
+                        <li>The Converse XMPP chatroom: <a href="xmpp:discuss@conference.conversejs.org?join" class="xmpp JSnocheck chatroom-name" title="Converse chat room">discuss@conference.conversejs.org</a></li>
+                        <li>Please file bugs and feature requests on <a target="_blank" rel="noopener" href="https://github.com/jcbrand/converse.js/issues">Github</a></li>
                     </ul>
                 </div>
 

sass/_core.scss

@@ -607,30 +607,30 @@ body.converse-fullscreen {
 
 
 @media screen and (min-width: 576px) {
-  #conversejs .offset-sm-2 {
-    margin-left: 16.666667%;
-  }
+    #conversejs .offset-sm-2 {
+        margin-left: 16.666667%;
+    }
 }
 @media screen and (min-width: 768px) {
-  #conversejs .offset-md-2 {
-    margin-left: 16.666667%;
-  }
-  #conversejs .offset-md-3 {
-    margin-left: 25%;
-  }
+    #conversejs .offset-md-2 {
+        margin-left: 16.666667%;
+    }
+    #conversejs .offset-md-3 {
+        margin-left: 25%;
+    }
 }
 @media screen and (min-width: 992px) {
-  #conversejs .offset-lg-2 {
-    margin-left: 16.666667%;
-  }
-  #conversejs .offset-lg-3 {
-    margin-left: 25%;
-  }
+    #conversejs .offset-lg-2 {
+        margin-left: 16.666667%;
+    }
+    #conversejs .offset-lg-3 {
+        margin-left: 25%;
+    }
 }
 @media screen and (min-width: 1200px) {
-  #conversejs .offset-xl-2 {
-    margin-left: 16.666667%;
-  }
+    #conversejs .offset-xl-2 {
+        margin-left: 16.666667%;
+    }
 }
 @media screen and (max-height: 450px) {
   #conversejs {

sass/website.scss

@@ -232,7 +232,7 @@ section {
     align-items: center;
     font-family: 'Baumans', cursive;
     font-size: 6em;
-    margin-top: 1em;
+    margin-top: 2em;
     margin-bottom: 0.5em;
     color: white;
 
@@ -270,6 +270,26 @@ section {
     }
 }
 
+@include media-breakpoint-down(sm) {
+    .banner-social-buttons {
+        display: none;
+    }
+
+    .chatroom-name {
+        font-size: 16px;
+    }
+
+    .brand-heading {
+        flex-direction: column;
+        font-size: 4em;
+        margin-top: 1em;
+
+        .byline {
+            margin: auto;
+        }
+    }
+}
+
 .brand-heading__text {
     font-size: 0.9em;
     display: inline-flex;