Remove icomoon fonts and use Bauman and the new logo for branding

.gitignore

@@ -12,6 +12,7 @@
 .idea
 .su?
 .sass-cache
+pip-selfcheck.json
 
 3rdparty/libsignal-protocol-javascript/
 *.map

css/converse.css

@@ -5,6 +5,12 @@
  * Copyright (c) 2013-2018, JC Brand <jc@opkode.com>
  * Licensed under the Mozilla Public License
  */
+@font-face {
+  font-family: 'Baumans';
+  font-style: normal;
+  font-weight: 400;
+  src: local("Baumans Regular"), local("Baumans-Regular"), url(webfonts/baumans.ttf) format("truetype"); }
+
 @font-face {
   font-family: 'ConverseFontAwesomeBrands';
   font-style: normal;
@@ -9351,7 +9357,7 @@ readers do not read off random characters that represent icons */
   --mobile-chat-width: 100%;
   --mobile-chat-height: 400px;
   --normal-font: "Helvetica", "Arial", sans-serif;
-  --heading-font: futura, 'Century Gothic', 'URW Gothic L', Verdana, sans-serif;
+  --heading-font: 'Baumans', cursive;
   --heading-display: block;
   --heading-color: white;
   --chatroom-head-color: #E77051;
@@ -9470,13 +9476,6 @@ readers do not read off random characters that represent icons */
 body.reset {
   margin: 0; }
 
-@font-face {
-  font-family: 'Converse-js';
-  src: url("webfonts/icomoon/fonts/icomoon.eot?wvi0ht");
-  src: url("webfonts/icomoon/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("webfonts/icomoon/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("webfonts/icomoon/fonts/icomoon.woff?wvi0ht") format("woff"), url("webfonts/icomoon/fonts/icomoon.svg?wvi0ht#icomoon") format("svg");
-  font-weight: normal;
-  font-style: normal; }
-
 .icon-conversejs {
   padding-right: 0.5em;
   font-family: 'Converse-js';
@@ -9598,7 +9597,26 @@ body.reset {
     text-align: center; }
   #conversejs .brand-heading {
     font-size: 200%;
+    display: inline-flex;
+    align-items: flex-end;
     font-family: var(--heading-font); }
+    #conversejs .brand-heading:hover .brand-name {
+      color: var(--link-color); }
+    #conversejs .brand-heading .converse-svg-logo {
+      height: 1.2em;
+      margin-right: 0.25em;
+      margin-bottom: -0.3em; }
+      #conversejs .brand-heading .converse-svg-logo .cls-1 {
+        isolation: isolate; }
+      #conversejs .brand-heading .converse-svg-logo .cls-2 {
+        opacity: 0.5;
+        mix-blend-mode: multiply; }
+      #conversejs .brand-heading .converse-svg-logo .cls-3 {
+        fill: var(--link-color); }
+      #conversejs .brand-heading .converse-svg-logo .cls-4 {
+        fill: var(--link-color); }
+  #conversejs .brand-heading--inverse .converse-svg-logo {
+    margin-bottom: 0em; }
   #conversejs .popover {
     position: fixed; }
   #conversejs .converse-chatboxes {
@@ -9700,7 +9718,6 @@ body.reset {
     font-weight: normal;
     font-size: 90%; }
   #conversejs .btn {
-    font-family: var(--heading-font);
     font-weight: normal;
     color: #fff; }
     #conversejs .btn .fa, #conversejs .btn .far, #conversejs .btn .fas {

css/fonts.css

@@ -1,3 +1,9 @@
+@font-face {
+  font-family: 'Baumans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Baumans Regular'), local('Baumans-Regular'), url(webfonts/baumans.ttf) format('truetype');
+}
 @font-face {
   font-family: 'ConverseFontAwesomeBrands';
   font-style: normal;

css/webfonts/icomoon/fonticons/fonts/icomoon.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon" horiz-adv-x="512">
-<font-face units-per-em="512" ascent="438.8571428571429" descent="-73.14285714285714" />
-<missing-glyph horiz-adv-x="512" />
-<glyph unicode="&#x20;" horiz-adv-x="128" d="" />
-<glyph unicode="&#xe600;" glyph-name="conversejs" horiz-adv-x="410" d="M33.015 447.986c-18.29 0-33.005-14.716-33.005-33.006v-384.702c0-18.289 14.716-33.024 33.005-33.024h343.955c18.289 0 33.024 14.734 33.024 33.024v384.702c0 18.29-14.734 33.006-33.024 33.006h-343.955zM40.939 440.833h328.786c17.749 0 32.049-14.301 32.049-32.049v-126.414l-49.425-56.1h-286.825l-5.535-4.597-50.344-58.178-0.809 88.756 0.257 2.685c-0.116 1.109-0.184 2.224-0.184 3.365v150.482c0 17.749 14.283 32.049 32.031 32.049zM283.212 386.719c-29.102 0-52.698-23.577-52.698-52.679s23.595-52.699 52.698-52.699c29.103 0 52.699 23.596 52.699 52.698s-23.596 52.68-52.699 52.68zM124.749 165.96c0.451 0.011 0.906 0 1.361 0 29.102 0 52.679-23.577 52.679-52.68s-23.577-52.698-52.679-52.698c-29.102 0-52.698 23.596-52.698 52.698 0 28.648 22.864 51.958 51.338 52.68z" />
-</font></defs></svg>

css/webfonts/icomoon/fonticons/selection.json

@@ -1,98 +0,0 @@
-{
-  "IcoMoonType": "selection",
-  "icons": [
-    {
-      "icon": {
-        "width": 820,
-        "paths": [
-          "M66.030 0.028c-36.579 0-66.011 29.432-66.011 66.011v769.403c0 36.579 29.432 66.048 66.011 66.048h687.91c36.579 0 66.048-29.468 66.048-66.048v-769.403c0-36.579-29.468-66.011-66.048-66.011h-687.91zM81.878 14.334h657.571c35.498 0 64.098 28.602 64.098 64.098v252.827l-98.85 112.2h-573.65l-11.069 9.194-100.689 116.356-1.618-177.512 0.514-5.37c-0.232-2.218-0.368-4.448-0.368-6.731v-300.964c0-35.498 28.565-64.098 64.061-64.098zM566.423 122.563c-58.205 0-105.397 47.155-105.397 105.359s47.191 105.397 105.397 105.397c58.205 0 105.397-47.191 105.397-105.397s-47.191-105.359-105.397-105.359zM249.498 564.081c0.903-0.022 1.812 0 2.721 0 58.205 0 105.359 47.155 105.359 105.359s-47.155 105.397-105.359 105.397c-58.205 0-105.397-47.191-105.397-105.397 0-57.296 45.728-103.916 102.676-105.359z"
-        ],
-        "attrs": [
-          {
-            "opacity": 1,
-            "visibility": false
-          }
-        ],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": [
-          "conversejs"
-        ],
-        "grid": 16
-      },
-      "attrs": [
-        {
-          "opacity": 1,
-          "visibility": false
-        }
-      ],
-      "properties": {
-        "order": 94,
-        "id": 9,
-        "prevSize": 32,
-        "code": 58880,
-        "name": "conversejs",
-        "ligatures": ""
-      },
-      "setIdx": 0,
-      "setId": 9,
-      "iconIdx": 9
-    }
-  ],
-  "height": 1024,
-  "metadata": {
-    "name": "icomoon"
-  },
-  "preferences": {
-    "fontPref": {
-      "prefix": "icon-",
-      "metadata": {
-        "fontFamily": "icomoon",
-        "majorVersion": 1,
-        "minorVersion": 0
-      },
-      "showGlyphs": true,
-      "metrics": {
-        "emSize": 512,
-        "baseline": 14.285714285714285,
-        "whitespace": 25
-      },
-      "resetPoint": 58880,
-      "showQuickUse": true,
-      "quickUsageToken": false,
-      "showMetrics": true,
-      "showMetadata": true,
-      "ie7": false,
-      "includeMetadata": false,
-      "embed": false,
-      "cssVars": false,
-      "showSelector": true,
-      "showVersion": true,
-      "postfix": "",
-      "selector": "",
-      "classSelector": ".conversejs",
-      "autoHost": false
-    },
-    "imagePref": {
-      "color": 0,
-      "height": 32,
-      "columns": 16,
-      "margin": 16,
-      "png": false,
-      "sprites": true
-    },
-    "historySize": 100,
-    "showCodes": true,
-    "gridSize": 16,
-    "showLiga": true,
-    "showGrid": true,
-    "showGlyphs": true,
-    "showQuickUse": false,
-    "search": "",
-    "showQuickUse2": true,
-    "showSVGs": true,
-    "quickUsageToken": {
-      "UntitledProject": "NTM5OWJhMDg1M2ZlZjhjOGUxODNmOGExNDdiZDU3ZjUjMSMxNDg3NDQ2NzgyIyMj"
-    }
-  }
-}

css/webfonts/icomoon/fonticons/style.css

@@ -1,29 +0,0 @@
-@font-face {
-  font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?x0id2b');
-  src:  url('fonts/icomoon.eot?x0id2b#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?x0id2b') format('truetype'),
-    url('fonts/icomoon.woff?x0id2b') format('woff'),
-    url('fonts/icomoon.svg?x0id2b#icomoon') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-[class^="icon-"], [class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-conversejs:before {
-  content: "\e600";
-}

css/webfonts/icomoon/fonts/icomoon.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon" horiz-adv-x="512">
-<font-face units-per-em="512" ascent="438.8571428571429" descent="-73.14285714285714" />
-<missing-glyph horiz-adv-x="512" />
-<glyph unicode="&#x20;" horiz-adv-x="128" d="" />
-<glyph unicode="&#xe600;" glyph-name="conversejs" horiz-adv-x="410" d="M33.015 447.986c-18.29 0-33.005-14.716-33.005-33.006v-384.702c0-18.289 14.716-33.024 33.005-33.024h343.955c18.289 0 33.024 14.734 33.024 33.024v384.702c0 18.29-14.734 33.006-33.024 33.006h-343.955zM40.939 440.833h328.786c17.749 0 32.049-14.301 32.049-32.049v-126.414l-49.425-56.1h-286.825l-5.535-4.597-50.344-58.178-0.809 88.756 0.257 2.685c-0.116 1.109-0.184 2.224-0.184 3.365v150.482c0 17.749 14.283 32.049 32.031 32.049zM283.212 386.719c-29.102 0-52.698-23.577-52.698-52.679s23.595-52.699 52.698-52.699c29.103 0 52.699 23.596 52.699 52.698s-23.596 52.68-52.699 52.68zM124.749 165.96c0.451 0.011 0.906 0 1.361 0 29.102 0 52.679-23.577 52.679-52.68s-23.577-52.698-52.679-52.698c-29.102 0-52.698 23.596-52.698 52.698 0 28.648 22.864 51.958 51.338 52.68z" />
-</font></defs></svg>

css/webfonts/icomoon/selection.json

@@ -1,98 +0,0 @@
-{
-  "IcoMoonType": "selection",
-  "icons": [
-    {
-      "icon": {
-        "width": 820,
-        "paths": [
-          "M66.030 0.028c-36.579 0-66.011 29.432-66.011 66.011v769.403c0 36.579 29.432 66.048 66.011 66.048h687.91c36.579 0 66.048-29.468 66.048-66.048v-769.403c0-36.579-29.468-66.011-66.048-66.011h-687.91zM81.878 14.334h657.571c35.498 0 64.098 28.602 64.098 64.098v252.827l-98.85 112.2h-573.65l-11.069 9.194-100.689 116.356-1.618-177.512 0.514-5.37c-0.232-2.218-0.368-4.448-0.368-6.731v-300.964c0-35.498 28.565-64.098 64.061-64.098zM566.423 122.563c-58.205 0-105.397 47.155-105.397 105.359s47.191 105.397 105.397 105.397c58.205 0 105.397-47.191 105.397-105.397s-47.191-105.359-105.397-105.359zM249.498 564.081c0.903-0.022 1.812 0 2.721 0 58.205 0 105.359 47.155 105.359 105.359s-47.155 105.397-105.359 105.397c-58.205 0-105.397-47.191-105.397-105.397 0-57.296 45.728-103.916 102.676-105.359z"
-        ],
-        "attrs": [
-          {
-            "opacity": 1,
-            "visibility": false
-          }
-        ],
-        "isMulticolor": false,
-        "isMulticolor2": false,
-        "tags": [
-          "conversejs"
-        ],
-        "grid": 16
-      },
-      "attrs": [
-        {
-          "opacity": 1,
-          "visibility": false
-        }
-      ],
-      "properties": {
-        "order": 94,
-        "id": 9,
-        "prevSize": 32,
-        "code": 58880,
-        "name": "conversejs",
-        "ligatures": ""
-      },
-      "setIdx": 0,
-      "setId": 9,
-      "iconIdx": 9
-    }
-  ],
-  "height": 1024,
-  "metadata": {
-    "name": "icomoon"
-  },
-  "preferences": {
-    "fontPref": {
-      "prefix": "icon-",
-      "metadata": {
-        "fontFamily": "icomoon",
-        "majorVersion": 1,
-        "minorVersion": 0
-      },
-      "showGlyphs": true,
-      "metrics": {
-        "emSize": 512,
-        "baseline": 14.285714285714285,
-        "whitespace": 25
-      },
-      "resetPoint": 58880,
-      "showQuickUse": true,
-      "quickUsageToken": false,
-      "showMetrics": true,
-      "showMetadata": true,
-      "ie7": false,
-      "includeMetadata": false,
-      "embed": false,
-      "cssVars": false,
-      "showSelector": true,
-      "showVersion": true,
-      "postfix": "",
-      "selector": "",
-      "classSelector": ".conversejs",
-      "autoHost": false
-    },
-    "imagePref": {
-      "color": 0,
-      "height": 32,
-      "columns": 16,
-      "margin": 16,
-      "png": false,
-      "sprites": true
-    },
-    "historySize": 100,
-    "showCodes": true,
-    "gridSize": 16,
-    "showLiga": true,
-    "showGrid": true,
-    "showGlyphs": true,
-    "showQuickUse": false,
-    "search": "",
-    "showQuickUse2": true,
-    "showSVGs": true,
-    "quickUsageToken": {
-      "UntitledProject": "NTM5OWJhMDg1M2ZlZjhjOGUxODNmOGExNDdiZDU3ZjUjMSMxNDg3NDQ2NzgyIyMj"
-    }
-  }
-}

css/webfonts/icomoon/style.css

@@ -1,29 +0,0 @@
-@font-face {
-  font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?x0id2b');
-  src:  url('fonts/icomoon.eot?x0id2b#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?x0id2b') format('truetype'),
-    url('fonts/icomoon.woff?x0id2b') format('woff'),
-    url('fonts/icomoon.svg?x0id2b#icomoon') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-[class^="icon-"], [class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-conversejs:before {
-  content: "\e600";
-}

dist/converse.js

@@ -93014,7 +93014,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            <i class="icon-conversejs"></i><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    <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';
 return __p
 };
 
@@ -93561,7 +93561,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"><i class="icon-conversejs"></i>Converse</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">converse</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

index.html

@@ -13,7 +13,6 @@
     <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
     <link type="text/css" rel="stylesheet" media="screen" href="/css/font-awesome.min.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="/css/website.css" />
-    <link href="https://fonts.googleapis.com/css?family=Baumans" rel="stylesheet">
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
     <script type="text/javascript" src="/src/website.js"></script>
     <script type="text/javascript" src="analytics.js"></script>
@@ -37,7 +36,7 @@
 			<span class="page-scroll">
 
 
-				<a class="navbar-brand" href="#intro"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
+				<a class="navbar-brand" href="#intro"><span class="converse-brand-heading">Converse</span></a>
 			</span>
 			<ul class="navbar-nav mt-2 mt-lg-0">
 				<!-- Hidden li included to remove active class from about link when scrolled up past about section -->

sass/_core.scss

@@ -10,16 +10,6 @@ body.reset {
     margin: 0;
 }
 
-@font-face {
-    font-family: 'Converse-js';
-    src: url($font-path + 'icomoon.eot?wvi0ht');
-    src:  url($font-path + 'icomoon.eot?wvi0ht#iefix') format('embedded-opentype'),
-          url($font-path + 'icomoon.ttf?wvi0ht') format('truetype'),
-          url($font-path + 'icomoon.woff?wvi0ht') format('woff'),
-          url($font-path + 'icomoon.svg?wvi0ht#icomoon') format('svg');
-    font-weight: normal;
-    font-style: normal;
-}
 
 .icon-conversejs {
     padding-right: 0.5em;
@@ -146,7 +136,38 @@ body.reset {
 
     .brand-heading {
         font-size: 200%;
+        display: inline-flex;
+        align-items: flex-end;
         font-family: var(--heading-font);
+        &:hover {
+            .brand-name {
+                color: var(--link-color);
+            }
+        }
+        .converse-svg-logo {
+            height: 1.2em;
+            margin-right: 0.25em;
+            margin-bottom: -0.3em;
+            .cls-1 {
+                isolation: isolate;
+            }
+            .cls-2 {
+                opacity: 0.5;
+                mix-blend-mode: multiply;
+            }
+            .cls-3 {
+                fill: var(--link-color);
+            }
+            .cls-4 {
+                fill: var(--link-color);
+            }
+        }
+    }
+
+    .brand-heading--inverse {
+        .converse-svg-logo {
+            margin-bottom: 0em;
+        }
     }
 
     .popover {
@@ -299,7 +320,6 @@ body.reset {
     }
 
     .btn {
-        font-family: var(--heading-font);
         font-weight: normal;
         color: #fff;
         .fa, .far, .fas {

sass/_variables.scss

@@ -1,8 +1,6 @@
 $mobile_landscape_height: 450px !default;
 $mobile_portrait_length: 480px !default;
 
-$font-path: "webfonts/icomoon/fonts/" !default;
-
 #conversejs, .converse-content {
     --subdued-color: #A8ABA1;
     --subdued-color-lighten-25-percent: #e6e7e4; // lighten(#A8ABA1, 25%)
@@ -94,7 +92,7 @@ $font-path: "webfonts/icomoon/fonts/" !default;
     // --font-path: "webfonts/icomoon/fonts/";
 
     --normal-font: "Helvetica", "Arial", sans-serif;
-    --heading-font: futura, 'Century Gothic', 'URW Gothic L', Verdana, sans-serif;
+    --heading-font: 'Baumans', cursive;
     --heading-display: block;
     --heading-color: white;
 

sass/font-awesome.scss

@@ -1,3 +1,10 @@
+@font-face {
+  font-family: 'Baumans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Baumans Regular'), local('Baumans-Regular'), url(webfonts/baumans.ttf) format('truetype');
+}
+
 @font-face {
   font-family: 'ConverseFontAwesomeBrands';
   font-style: normal;

sass/website.scss

@@ -202,7 +202,6 @@ a {
     margin-top: -4em;
     height: calc(100vh + 4em);
     background: url(images/header.jpg) no-repeat bottom center scroll;
-    // 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);
     background-color: #211018;
     -webkit-background-size: cover;
     -moz-background-size: cover;

src/templates/converse_brand_heading.html

@@ -1,7 +1,26 @@
 <span class="brand-heading-container">
     <div class="brand-heading">
         <a href="https://conversejs.org" target="_blank" rel="noopener">
-            <i class="icon-conversejs"></i><span class="brand-name">converse</span>
+            <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>
+                </g>
+            </svg>
+            <span class="brand-name">converse</span>
         </a>
     </div>
 </span>

src/templates/inverse_brand_heading.html

@@ -1,6 +1,27 @@
 <div class="row">
     <div class="container brand-heading-container">
-        <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse</h1>
+        <h1 class="brand-heading brand-heading--inverse">
+            <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>
+                </g>
+            </svg>
+            <span class="brand-name">converse</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>
         <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>