Use future for headings

css/converse.css

@@ -6834,8 +6834,9 @@ body.reset {
   font-weight: normal;
   font-style: normal; }
 .icon-conversejs {
-  padding-right: 0.2em;
+  padding-right: 0.5em;
   font-family: 'Converse-js';
+  font-size: 80%;
   speak: none;
   font-style: normal;
   font-weight: normal;
@@ -6849,6 +6850,13 @@ body.reset {
 .icon-conversejs:before {
   content: "\e600"; }
 
+.converse-brand-heading {
+  font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
+  font-size: 6em;
+  font-weight: normal; }
+  .converse-brand-heading .icon-conversejs {
+    font-size: 60%; }
+
 #conversejs {
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
@@ -6858,6 +6866,10 @@ body.reset {
   direction: ltr;
   display: block;
   z-index: 1031; }
+  #conversejs .brand-heading {
+    font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; }
+    #conversejs .brand-heading .icon-conversejs {
+      font-size: 80%; }
   #conversejs .converse-chatboxes {
     z-index: 1031;
     position: fixed;
@@ -6988,6 +7000,8 @@ body.reset {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale; }
   #conversejs .btn {
+    font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
+    font-weight: normal;
     color: #fff; }
     #conversejs .btn .fa {
       color: #fff;
@@ -7213,7 +7227,7 @@ body.reset {
     margin: 0; }
 
 @media screen and (max-width: 575px) {
-  body .brand-heading {
+  body .converse-brand-heading {
     font-size: 3.75em; }
 
   #conversejs:not(.converse-embedded) .chatbox .chat-body {
@@ -7355,6 +7369,7 @@ body.reset {
         width: 100%;
         height: 100vh; } }
   #conversejs .chatbox .chat-title {
+    font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
     color: white;
     display: block;
     line-height: 20px;
@@ -7810,6 +7825,7 @@ body.reset {
   #conversejs #controlbox .controlbox-section {
     margin: 1em 0 0 0; }
     #conversejs #controlbox .controlbox-section .controlbox-heading {
+      font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
       margin: 0 0 0.5em 0;
       text-transform: uppercase; }
   #conversejs #controlbox .dropdown a {
@@ -7959,6 +7975,7 @@ body.reset {
   text-align: left;
   padding: 0.3em 0; }
   #conversejs .list-container .rooms-toggle {
+    font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
     display: block;
     color: #666;
     padding: 0 0 0.5rem 0; }
@@ -8082,6 +8099,7 @@ body.reset {
       text-shadow: 0 1px 0 #FAFAFA;
       margin: 0.75em 0 0.75em 0; }
       #conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
+        font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
         color: #666;
         display: block;
         width: 100%;
@@ -8292,8 +8310,8 @@ body.reset {
         padding: 0.5em; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
-          padding: 0.3em 0;
-          font-weight: bold; }
+          font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
+          padding: 0.3em 0; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
           width: 100%; }
@@ -8541,7 +8559,11 @@ body.reset {
     padding-bottom: 0.25rem;
     display: block; }
     #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
-      font-weight: bold; }
+      font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
+      font-size: 115%; }
+      #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author .badge {
+        font-size: 80%;
+        font-family: "Helvetica", "Arial", sans-serif; }
     #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
       padding-left: 0.25em;
       color: #8c8c8c; }

css/inverse.css

@@ -6834,8 +6834,9 @@ body.reset {
   font-weight: normal;
   font-style: normal; }
 .icon-conversejs {
-  padding-right: 0.2em;
+  padding-right: 0.5em;
   font-family: 'Converse-js';
+  font-size: 80%;
   speak: none;
   font-style: normal;
   font-weight: normal;
@@ -6849,6 +6850,13 @@ body.reset {
 .icon-conversejs:before {
   content: "\e600"; }
 
+.converse-brand-heading {
+  font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
+  font-size: 6em;
+  font-weight: normal; }
+  .converse-brand-heading .icon-conversejs {
+    font-size: 60%; }
+
 #conversejs {
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
@@ -6858,6 +6866,10 @@ body.reset {
   direction: ltr;
   display: block;
   z-index: 1031; }
+  #conversejs .brand-heading {
+    font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; }
+    #conversejs .brand-heading .icon-conversejs {
+      font-size: 80%; }
   #conversejs .converse-chatboxes {
     z-index: 1031;
     position: fixed;
@@ -6988,6 +7000,8 @@ body.reset {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale; }
   #conversejs .btn {
+    font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
+    font-weight: normal;
     color: #fff; }
     #conversejs .btn .fa {
       color: #fff;
@@ -7213,7 +7227,7 @@ body.reset {
     margin: 0; }
 
 @media screen and (max-width: 575px) {
-  body .brand-heading {
+  body .converse-brand-heading {
     font-size: 3.75em; }
 
   #conversejs:not(.converse-embedded) .chatbox .chat-body {
@@ -7406,6 +7420,7 @@ body {
         width: 100%;
         height: 100vh; } }
   #conversejs .chatbox .chat-title {
+    font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
     color: white;
     display: block;
     line-height: 24px;
@@ -7880,6 +7895,7 @@ body {
   #conversejs #controlbox .controlbox-section {
     margin: 1em 0 0 0; }
     #conversejs #controlbox .controlbox-section .controlbox-heading {
+      font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
       margin: 0 0 0.5em 0;
       text-transform: uppercase; }
   #conversejs #controlbox .dropdown a {
@@ -8134,6 +8150,7 @@ body {
       text-shadow: 0 1px 0 #FAFAFA;
       margin: 0.75em 0 0.75em 0; }
       #conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
+        font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
         color: #666;
         display: block;
         width: 100%;
@@ -8226,6 +8243,7 @@ body {
   text-align: left;
   padding: 0.3em 0; }
   #conversejs .list-container .rooms-toggle {
+    font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
     display: block;
     color: #666;
     padding: 0 0 0.5rem 0; }
@@ -8431,8 +8449,8 @@ body {
         padding: 0.5em; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
-          padding: 0.3em 0;
-          font-weight: bold; }
+          font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
+          padding: 0.3em 0; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
           width: 100%; }
@@ -8726,7 +8744,11 @@ body {
     padding-bottom: 0.25rem;
     display: block; }
     #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
-      font-weight: bold; }
+      font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
+      font-size: 115%; }
+      #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author .badge {
+        font-size: 80%;
+        font-family: "Helvetica", "Arial", sans-serif; }
     #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
       padding-left: 0.25em;
       color: #8c8c8c; }

css/theme.css

@@ -16,8 +16,8 @@ h4,
 h5,
 h6 {
   margin: 0 0 35px;
-  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 700;
+  font-family: Futura,Trebuchet MS,Arial,sans-serif;
+  font-weight: normal;
   letter-spacing: 1px;
 }
 p {
@@ -131,11 +131,19 @@ a:focus {
 .outro {
   background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #384955, #655361, #85505f);
 }
+
+
 .brand-heading {
+    font-family: Futura,Trebuchet MS,Arial,sans-serif;
+    font-weight: normal;
     font-size: 2em;
     text-align: center;
     margin-top: 2.5em;
 }
+.brand-heading .icon-conversejs {
+    font-size: 60%;
+}
+
 .brand-heading-embedded {
     margin-top: 1.5em;
 }
@@ -242,7 +250,7 @@ a:focus {
   }
 }
 .btn {
-  font-family: FontAwesome;
+  font-family: Futura,Trebuchet MS,Arial,sans-serif;
   font-weight: 400;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;

dev.html

@@ -17,7 +17,7 @@
 <body class="reset">
     <div class="content">
         <div class="inner-content">
-            <h1 class="brand-heading"><i class="icon-conversejs"></i> Converse</h1>
+            <h1 class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</h1>
         </div>
     </div>
 
@@ -37,8 +37,8 @@
             notify_all_room_messages: [
                 'discuss@conference.conversejs.org'
             ],
-            bosh_service_url: 'http://chat.example.org:5280/http-bind/',
-            // bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
+            // bosh_service_url: 'http://chat.example.org:5280/http-bind/',
+            bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
             message_archiving: 'always',
             debug: true
         });

index.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Converse.js</title>
+    <title>Converse</title>
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -74,7 +74,7 @@
 
     <section class="intro" class="container">
         <div class="row">
-            <h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
+            <h1 class="brand-heading converse-brand-heading"><i class="icon-conversejs"></i>Converse</h1>
             <div class="col-md-8 col-md-offset-2">
                 <p class="intro-text">A free and open-source XMPP chat client in your browser</p>
                 <p>Now also available in a fullscreen version.
@@ -105,7 +105,7 @@
     <section id="about" class="container content-section text-center">
         <div class="row">
             <div class="col-lg-8 col-lg-offset-2">
-                <h2><strong>Converse.js</strong> is written in Javascript and runs in your browser.</h2>
+                <h2>Converse is written in JavaScript and runs in your browser.</h2>
                 <p>You can start using it here immediately, or you can <a href="/docs/html/index.html">integrate it into your own website</a>.</p>
                 <p>Take a look at the <a href="/demo">demo page</a> for other examples of how Converse.js can be configured and used.</a>
 

sass/_chatbox.scss

@@ -136,6 +136,7 @@
             }
         }
         .chat-title {
+            font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; 
             color: white;
             display: block;
             line-height: $line-height-large;

sass/_chatrooms.scss

@@ -124,8 +124,8 @@
                     padding: 0.5em;
 
                     .occupants-heading {
+                        font-family: $heading-font; 
                         padding: 0.3em 0;
-                        font-weight: bold;
                     }
 
                     .chatroom-features {

sass/_controlbox.scss

@@ -244,6 +244,7 @@
             margin: 1em 0 0 0;
 
             .controlbox-heading {
+                font-family: $heading-font; 
                 margin: 0 0 0.5em 0;
                 text-transform: uppercase;
             }

sass/_core.scss

@@ -22,8 +22,9 @@ body.reset {
 }
 
 .icon-conversejs {
-    padding-right: 0.2em;
+    padding-right: 0.5em;
     font-family: 'Converse-js';
+    font-size: 80%;
     speak: none;
     font-style: normal;
     font-weight: normal;
@@ -39,6 +40,15 @@ body.reset {
     content: "\e600";
 }
 
+.converse-brand-heading {
+    font-family: $heading-font; 
+    font-size: 6em;
+    font-weight: normal;
+    .icon-conversejs {
+        font-size: 60%;
+    }
+}
+
 #conversejs {
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
@@ -49,6 +59,13 @@ body.reset {
     display: block;
     z-index: 1031; // One more than bootstrap navbar
 
+    .brand-heading {
+        font-family: $heading-font; 
+        .icon-conversejs {
+            font-size: 80%;
+        }
+    }
+
     .converse-chatboxes {
         z-index: 1031; // One more than bootstrap navbar
         position: fixed;
@@ -230,6 +247,8 @@ body.reset {
     }
 
     .btn {
+        font-family: $heading-font; 
+        font-weight: normal;
         color: #fff;
         .fa {
             color: #fff;
@@ -455,7 +474,7 @@ body.reset {
 
 @media screen and (max-width: 575px) {
     body {
-      .brand-heading {
+      .converse-brand-heading {
         font-size: 3.75em;
       }
     }

sass/_messages.scss

@@ -136,7 +136,12 @@
                 display: block;
 
                 .chat-msg-author {
-                    font-weight: bold;
+                    font-family: $heading-font; 
+                    font-size: 115%;
+                    .badge {
+                        font-size: 80%;
+                        font-family: $normal_font;
+                    }
                 }
                 .chat-msg-time {
                     padding-left: 0.25em;

sass/_roomslist.scss

@@ -4,6 +4,7 @@
         padding: 0.3em 0;
 
         .rooms-toggle {
+            font-family: $heading-font; 
             display: block;
             color: $text-color;
             padding: 0 0 0.5rem 0;

sass/_roster.scss

@@ -66,6 +66,7 @@
                 &:hover {
                     color: $dark-gray-color;
                 }
+                font-family: $heading-font; 
                 color: $text-color;
                 display: block;
                 width: 100%;

sass/_variables.scss

@@ -107,6 +107,9 @@ $small-mobile-chat-height: 300px !default;
 
 $font-path: "../fonticons/fonts/" !default;
 
+$normal-font: "Helvetica", "Arial", sans-serif;
+$heading-font: Futura,Helvetica,Trebuchet MS,Arial,sans-serif !default;
+
 $chatroom-head-color: $red !default;
 $chatroom-color-light: $light-red !default;
 $chatroom-color-dark: $darkest-red !default;