Positioning of logo and text

css/website.css

@@ -5134,12 +5134,6 @@ a {
 .hidden {
   display: none !important; }
 
-.byline {
-  font-family: 'Muli', sans-serif;
-  font-size: 28px;
-  opacity: 0.5;
-  margin-bottom: 2em; }
-
 #about p {
   opacity: 0.9; }
 
@@ -5247,19 +5241,26 @@ section h4 {
 
 .brand-heading {
   display: inline-flex;
-  align-items: flex-end;
+  align-items: center;
   font-family: 'Baumans', cursive;
   font-size: 6em;
   margin-top: 1em;
-  margin-bottom: 0;
+  margin-bottom: 0.5em;
   color: white; }
+  .brand-heading .byline {
+    font-family: 'Muli', sans-serif;
+    font-size: 20px;
+    opacity: 0.5;
+    margin-bottom: 2em;
+    margin-left: -75px; }
   .brand-heading .subdued {
     opacity: 0.15;
     font-size: 95%;
     word-spacing: 50px; }
   .brand-heading .converse-svg-logo {
     height: 1.2em;
-    margin-right: 0.25em; }
+    margin-right: 0.25em;
+    margin-bottom: 0.1em; }
     .brand-heading .converse-svg-logo .cls-1 {
       isolation: isolate; }
     .brand-heading .converse-svg-logo .cls-2 {
@@ -5270,6 +5271,12 @@ section h4 {
     .brand-heading .converse-svg-logo .cls-4 {
       fill: white; }
 
+.brand-heading__text {
+  font-size: 0.9em;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center; }
+
 .brand-heading-embedded {
   margin-top: 1.5em; }
 
@@ -5277,6 +5284,12 @@ section h4 {
   .intro {
     padding: 0; } }
 
+.intro-text {
+  font-size: 1.1em;
+  opacity: 0.8;
+  margin-bottom: 0;
+  padding-bottom: 1em; }
+
 .btn-circle {
   width: 70px;
   height: 70px;

index.html

@@ -89,11 +89,15 @@
                         </g>
                     </g>
                 </svg>
-                converse<span class="subdued">.js</span></h1>
-                <p class="byline">messaging freedom</p>
+                <span class="brand-heading__text">
+                    <span>converse<span class="subdued">.js</span></span>
+                    <p class="byline">messaging freedom</p>
+                </span>
+                </h1>
+
                 <p class="intro-text">A free and open-source XMPP chat client in your browser</p>
-                <p>Try the <a href="/fullscreen.html">fullpage</a> version</p>
-                <p>
+                <p class="intro-text">Try the <a href="/fullscreen.html">fullpage</a> version</p>
+                <p style="padding-top: 1.5em">
                 <a href="https://inverse.chat/#converse/room?jid=discuss@conference.conversejs.org"
                    target="_blank" rel="noopener"><img src="https://inverse.chat/badge.svg?room=discuss@conference.conversejs.org"/></a>
                 </p>

sass/website.scss

@@ -97,13 +97,6 @@ a {
     display: none !important;
 }
 
-.byline {
-    font-family: 'Muli', sans-serif;
-    font-size: 28px;
-    opacity: 0.5;
-    margin-bottom: 2em;
-}
-
 #about {
     p {
         opacity: 0.9;
@@ -236,13 +229,21 @@ section {
 
 .brand-heading {
     display: inline-flex;
-    align-items: flex-end;
+    align-items: center;
     font-family: 'Baumans', cursive;
     font-size: 6em;
     margin-top: 1em;
-    margin-bottom: 0;
+    margin-bottom: 0.5em;
     color: white;
 
+    .byline {
+        font-family: 'Muli', sans-serif;
+        font-size: 20px;
+        opacity: 0.5;
+        margin-bottom: 2em;
+        margin-left: -75px;
+    }
+
     .subdued {
         opacity: 0.15;
         font-size: 95%;
@@ -252,6 +253,7 @@ section {
     .converse-svg-logo {
         height: 1.2em;
         margin-right: 0.25em;
+        margin-bottom: 0.1em;
         .cls-1 {
             isolation: isolate;
         }
@@ -268,6 +270,13 @@ section {
     }
 }
 
+.brand-heading__text {
+    font-size: 0.9em;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
 .brand-heading-embedded {
     margin-top: 1.5em;
 }
@@ -276,6 +285,14 @@ section {
     padding: 0;
   }
 }
+
+.intro-text {
+    font-size: 1.1em;
+    opacity: 0.8;
+    margin-bottom: 0;
+    padding-bottom: 1em;
+}
+
 .btn-circle {
     width: 70px;
     height: 70px;