Added extra room name text on mobile

public/script.js

@@ -49,7 +49,10 @@ if (roomName) {
         isSystem: true,
     })
 
-    if (window.screen.width < 1000) toggleOpen()
+    if (window.screen.width < 1000) {
+        toggleOpen()
+        document.querySelector("#roomName").innerText = roomName
+    }
 }
 
 menuButton.addEventListener("click", toggleOpen)

public/style.css

@@ -38,7 +38,7 @@ body {
     width: 0;
     overflow: hidden;
     align-items: center;
-    transition: width 0.6s;
+    transition: width 0.6s, padding 0.6s;
     display: flex;
     z-index: 1;
     color: white;
@@ -79,6 +79,7 @@ body {
 
 #rooms.opened {
     width: 18vw;
+    padding: 20px;
 }
 
 #rooms:not(.opened) + div nav {
@@ -121,8 +122,8 @@ a {
     grid-template-columns: 1fr 500px;
 }
 
-nav:first-child a {
-    font-size: 1.5em !important;
+nav span {
+    font-size: 2em;
 }
 
 footer {

views/index.ejs

@@ -76,7 +76,7 @@
                         />
                     </svg>
                 </button>
-                <a href="#">Home</a><a href="#">Also home</a>
+                <span id="roomName"></span>
                 <div id="change-name">
                     <span id="name-display"></span>
                     <button class="button-circle">