CSS/HTML: Nicer styling of branding on the login page

css/converse.css

@@ -9566,8 +9566,9 @@ body.converse-fullscreen {
     margin-bottom: 2em;
     margin-left: -2.7em;
     word-spacing: 5px; }
-  #conversejs-bg .converse-brand__text .subdued {
-    opacity: 0.25; }
+
+#conversejs-bg .subdued, #conversejs .subdued {
+  opacity: 0.35; }
 
 #conversejs {
   bottom: 0;
@@ -9594,15 +9595,34 @@ body.converse-fullscreen {
   #conversejs .brand-heading-container {
     text-align: center; }
   #conversejs .brand-heading {
-    font-size: 200%;
     display: inline-flex;
-    align-items: flex-end;
+    flex-direction: row;
+    align-items: flex-start;
     font-family: var(--branding-font);
-    color: var(--link-color); }
+    color: var(--link-color);
+    margin-bottom: 1em; }
+    #conversejs .brand-heading .brand-name {
+      color: var(--link-color);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: -0.5em; }
+    #conversejs .brand-heading .brand-name__text {
+      font-size: 120%;
+      vertical-align: text-bottom; }
+    #conversejs .brand-heading .byline {
+      margin: 0;
+      font-family: var(--heading-font);
+      font-size: 0.25em;
+      opacity: 0.55;
+      margin-left: -4em;
+      word-spacing: 5px;
+      margin-top: -15px; }
     #conversejs .brand-heading .converse-svg-logo {
-      height: 1.2em;
+      color: var(--link-color);
+      height: 1.5em;
       margin-right: 0.25em;
-      margin-bottom: -0.3em; }
+      margin-bottom: -0.25em; }
       #conversejs .brand-heading .converse-svg-logo .cls-1 {
         isolation: isolate; }
       #conversejs .brand-heading .converse-svg-logo .cls-2 {
@@ -10063,7 +10083,7 @@ body.converse-fullscreen {
 
 #conversejs form.converse-form {
   background: white;
-  padding: 1.5em; }
+  padding: 1.2rem; }
   #conversejs form.converse-form legend {
     color: var(--text-color);
     font-size: 125%;
@@ -10786,10 +10806,6 @@ body.converse-fullscreen {
       padding-bottom: 1em; }
       #conversejs #controlbox .conn-feedback p.feedback-subject.error {
         font-weight: bold; }
-  #conversejs #controlbox .brand-heading-container .brand-heading {
-    text-align: center; }
-  #conversejs #controlbox .brand-heading-container .brand-name {
-    font-size: 120%; }
   #conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel {
     padding-top: 0;
     padding-bottom: 0; }
@@ -11009,12 +11025,11 @@ body.converse-fullscreen {
   #conversejs.converse-mobile #controlbox .brand-heading-container {
     flex: 0 0 100%;
     max-width: 100%;
-    margin-bottom: 1em;
-    text-align: center; }
+    margin-top: 5em;
+    margin-bottom: 1em; }
     #conversejs.converse-fullscreen #controlbox .brand-heading-container .brand-heading,
     #conversejs.converse-mobile #controlbox .brand-heading-container .brand-heading {
-      font-size: 150%;
-      font-size: 600%;
+      font-size: 500%;
       padding: 0.7em 0 0 0;
       opacity: 0.8;
       color: var(--brand-heading-color); }
@@ -11133,9 +11148,15 @@ body.converse-fullscreen {
       #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) {
         display: none; }
       #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
-        display: block; }
-  #conversejs.converse-overlayed .converse-chatboxes .chatbox .box-flyout {
-    margin-left: 30px; } }
+        display: block; } }
+
+#conversejs.converse-overlayed .brand-heading {
+  padding-top: 0.8rem;
+  padding-left: 0.8rem;
+  width: 100%; }
+
+#conversejs.converse-overlayed .converse-svg-logo {
+  height: 1em; }
 
 #conversejs #converse-modals .set-xmpp-status {
   margin: 1em; }

dist/converse.js

@@ -93077,7 +93077,7 @@ return __p
 var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
 module.exports = function(o) {
 var __t, __p = '';
-__p += '<!-- src/templates/converse_brand_heading.html -->\n<span class="brand-heading-container">\n    <div class="brand-heading">\n        <a href="https://conversejs.org" target="_blank" rel="noopener">\n            <svg class="converse-svg-logo"\n                xmlns:svg="http://www.w3.org/2000/svg"\n                xmlns="http://www.w3.org/2000/svg"\n                xmlns:xlink="http://www.w3.org/1999/xlink"\n                viewBox="0 0 364 364">\n                <title>Converse</title>\n                <g class="cls-1" id="g904">\n                    <g data-name="Layer 2">\n                        <g data-name="Layer 7">\n                            <path\n                                class="cls-3"\n                                d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />\n                            <path\n                                class="cls-4"\n                                d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />\n                        </g>\n                    </g>\n                </g>\n            </svg>\n            <span class="brand-name">converse</span>\n        </a>\n    </div>\n</span>\n';
+__p += '<!-- src/templates/converse_brand_heading.html -->\n<span class="brand-heading-container">\n    <a class="brand-heading" href="https://conversejs.org" target="_blank" rel="noopener">\n        <svg class="converse-svg-logo"\n            xmlns:svg="http://www.w3.org/2000/svg"\n            xmlns="http://www.w3.org/2000/svg"\n            xmlns:xlink="http://www.w3.org/1999/xlink"\n            viewBox="0 0 364 364">\n            <title>Converse</title>\n            <g class="cls-1" id="g904">\n                <g data-name="Layer 2">\n                    <g data-name="Layer 7">\n                        <path\n                            class="cls-3"\n                            d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />\n                        <path\n                            class="cls-4"\n                            d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />\n                    </g>\n                </g>\n            </g>\n        </svg>\n        <span class="brand-name">\n            <span class="brand-name__text">converse<span class="subdued">.js</span></span>\n        </span>\n    </a>\n</span>\n';
 return __p
 };
 
@@ -93624,7 +93624,7 @@ return __p
 var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
 module.exports = function(o) {
 var __t, __p = '', __e = _.escape;
-__p += '<!-- src/templates/inverse_brand_heading.html -->\n<div class="row">\n    <div class="container brand-heading-container">\n        <h1 class="brand-heading brand-heading--inverse">\n            <svg class="converse-svg-logo"\n                xmlns:svg="http://www.w3.org/2000/svg"\n                xmlns="http://www.w3.org/2000/svg"\n                xmlns:xlink="http://www.w3.org/1999/xlink"\n                viewBox="0 0 364 364">\n                <title>Converse</title>\n                <g class="cls-1" id="g904">\n                    <g data-name="Layer 2">\n                        <g data-name="Layer 7">\n                            <path\n                                class="cls-3"\n                                d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />\n                            <path\n                                class="cls-4"\n                                d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />\n                        </g>\n                    </g>\n                </g>\n            </svg>\n            <span class="brand-name">converse</span>\n        </h1>\n        <p class="brand-subtitle">' +
+__p += '<!-- src/templates/inverse_brand_heading.html -->\n<div class="row">\n    <div class="container brand-heading-container">\n        <h1 class="brand-heading brand-heading--inverse">\n            <svg class="converse-svg-logo"\n                xmlns:svg="http://www.w3.org/2000/svg"\n                xmlns="http://www.w3.org/2000/svg"\n                xmlns:xlink="http://www.w3.org/1999/xlink"\n                viewBox="0 0 364 364">\n                <title>Converse</title>\n                <g class="cls-1" id="g904">\n                    <g data-name="Layer 2">\n                        <g data-name="Layer 7">\n                            <path\n                                class="cls-3"\n                                d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />\n                            <path\n                                class="cls-4"\n                                d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />\n                        </g>\n                    </g>\n                </g>\n            </svg>\n            <span class="brand-name">\n                <span class="brand-name__text">converse<span class="subdued">.js</span></span>\n                <p class="byline">messaging freedom</p>\n            </span>\n        </h1>\n        <p class="brand-subtitle">' +
 __e(o.version_name) +
 '</p>\n        <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a> </p>\n        <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> it into your own language</p>\n    </div>\n</div>\n';
 return __p

sass/_controlbox.scss

@@ -164,15 +164,6 @@
             }
         }
 
-        .brand-heading-container {
-            .brand-heading {
-                text-align: center;
-            }
-            .brand-name {
-                font-size: 120%;
-            }
-        }
-
         #converse-login-panel, #converse-register-panel {
             padding-top: 0;
             padding-bottom: 0;
@@ -486,11 +477,10 @@
 
         .brand-heading-container {
             @include make-col(12);
+            margin-top: 5em;
             margin-bottom: 1em;
-            text-align: center;
             .brand-heading {
-                font-size: 150%;
-                font-size: 600%;
+                font-size: 500%;
                 padding: 0.7em 0 0 0;
                 opacity: 0.8;
                 color: var(--brand-heading-color);
@@ -605,14 +595,15 @@
             }
         }
     }
-    #conversejs.converse-overlayed {
-        .converse-chatboxes {
-            .chatbox { 
-                .box-flyout {
-                    margin-left: 30px; // Counteracts Bootstrap margins, but
-                                       // not clear why needed...
-                }
-            }
-        }
+}
+
+#conversejs.converse-overlayed {
+    .brand-heading {
+        padding-top: 0.8rem;
+        padding-left: 0.8rem;
+        width: 100%;
+    }
+    .converse-svg-logo {
+        height: 1em;
     }
 }

sass/_core.scss

@@ -75,9 +75,12 @@ body.converse-fullscreen {
             margin-left: -2.7em;
             word-spacing: 5px;
         }
-        .subdued {
-            opacity: 0.25;
-        }
+    }
+}
+
+#conversejs-bg, #conversejs {
+    .subdued {
+        opacity: 0.35;
     }
 }
 
@@ -123,16 +126,41 @@ body.converse-fullscreen {
     }
 
     .brand-heading {
-        font-size: 200%;
         display: inline-flex;
-        align-items: flex-end;
+        flex-direction: row;
+        align-items: flex-start;
         font-family: var(--branding-font);
         color: var(--link-color);
+        margin-bottom: 1em;
+
+        .brand-name {
+            color: var(--link-color);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-top: -0.5em;
+        }
+
+        .brand-name__text {
+            font-size: 120%;
+            vertical-align: text-bottom;
+        }
+
+        .byline {
+            margin: 0;
+            font-family: var(--heading-font);
+            font-size: 0.25em;
+            opacity: 0.55;
+            margin-left: -4em;
+            word-spacing: 5px;
+            margin-top: -15px;
+        }
 
         .converse-svg-logo {
-            height: 1.2em;
+            color: var(--link-color);
+            height: 1.5em;
             margin-right: 0.25em;
-            margin-bottom: -0.3em;
+            margin-bottom: -0.25em;
             .cls-1 {
                 isolation: isolate;
             }

sass/_forms.scss

@@ -62,7 +62,7 @@
 
         &.converse-form {
             background: white;
-            padding: 1.5em;
+            padding: 1.2rem;
             legend {
                 color: var(--text-color);
                 font-size: 125%;

src/templates/converse_brand_heading.html

@@ -1,26 +1,26 @@
 <span class="brand-heading-container">
-    <div class="brand-heading">
-        <a href="https://conversejs.org" target="_blank" rel="noopener">
-            <svg class="converse-svg-logo"
-                xmlns:svg="http://www.w3.org/2000/svg"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-                viewBox="0 0 364 364">
-                <title>Converse</title>
-                <g class="cls-1" id="g904">
-                    <g data-name="Layer 2">
-                        <g data-name="Layer 7">
-                            <path
-                                class="cls-3"
-                                d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />
-                            <path
-                                class="cls-4"
-                                d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />
-                        </g>
+    <a class="brand-heading" href="https://conversejs.org" target="_blank" rel="noopener">
+        <svg class="converse-svg-logo"
+            xmlns:svg="http://www.w3.org/2000/svg"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="0 0 364 364">
+            <title>Converse</title>
+            <g class="cls-1" id="g904">
+                <g data-name="Layer 2">
+                    <g data-name="Layer 7">
+                        <path
+                            class="cls-3"
+                            d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />
+                        <path
+                            class="cls-4"
+                            d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />
                     </g>
                 </g>
-            </svg>
-            <span class="brand-name">converse</span>
-        </a>
-    </div>
+            </g>
+        </svg>
+        <span class="brand-name">
+            <span class="brand-name__text">converse<span class="subdued">.js</span></span>
+        </span>
+    </a>
 </span>

src/templates/inverse_brand_heading.html

@@ -20,7 +20,10 @@
                     </g>
                 </g>
             </svg>
-            <span class="brand-name">converse</span>
+            <span class="brand-name">
+                <span class="brand-name__text">converse<span class="subdued">.js</span></span>
+                <p class="byline">messaging freedom</p>
+            </span>
         </h1>
         <p class="brand-subtitle">{{{o.version_name}}}</p>
         <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a> </p>