Initial work on integrating the new logo

css/website.css

@@ -5208,14 +5208,24 @@ section h4 {
   font-size: 1.5em; }
 
 .brand-heading {
-  font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
-  font-weight: normal;
-  font-size: 2em;
-  text-align: center;
-  margin-top: 1.5em; }
-
-.brand-heading .icon-conversejs {
-  font-size: 60%; }
+  display: inline-flex;
+  align-items: flex-end;
+  font-family: 'Baumans', cursive;
+  font-size: 6em;
+  margin-top: 1em;
+  color: white; }
+  .brand-heading .converse-svg-logo {
+    height: 1.2em;
+    margin-right: 0.25em; }
+    .brand-heading .converse-svg-logo .cls-1 {
+      isolation: isolate; }
+    .brand-heading .converse-svg-logo .cls-2 {
+      opacity: 0.5;
+      mix-blend-mode: multiply; }
+    .brand-heading .converse-svg-logo .cls-3 {
+      fill: white; }
+    .brand-heading .converse-svg-logo .cls-4 {
+      fill: white; }
 
 .brand-heading-embedded {
   margin-top: 1.5em; }
@@ -5227,8 +5237,6 @@ section h4 {
 @media (min-width: 767px) {
   .intro {
     padding: 0; }
-  .brand-heading {
-    font-size: 80px; }
   .intro-text {
     font-size: 25px; } }
 

index.html

@@ -13,6 +13,7 @@
     <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>
@@ -34,6 +35,8 @@
 		</button>
 		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
 			<span class="page-scroll">
+
+
 				<a class="navbar-brand" href="#intro"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
 			</span>
 			<ul class="navbar-nav mt-2 mt-lg-0">
@@ -69,7 +72,28 @@
     <section id="intro" class="intro" class="container">
         <div class="row">
             <div class="col-md-12 col-md-offset-2">
-                <h1 class="brand-heading converse-brand-heading"><i class="icon-conversejs"></i>Converse</h1>
+                <h1 class="brand-heading converse-brand-heading">
+                    <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>converse</span></h1>
+
                 <p class="intro-text">A free and open-source XMPP chat client in your browser</p>
                 <p>Try out the <a href="/fullscreen.html">fullpage</a> version</p>
                 <p>
@@ -232,9 +256,6 @@
                        <a href="https://liberapay.com/jcbrand" target="_blank" rel="noopener">Liberapay</a> or
                        <a href="https://opkode.com/contact.html" target="_blank" rel="noopener">contact us</a>.
                     </p>
-                    <p>Sponsorships of €50 or more will appear on this website and the online
-                       <a href="/docs/html/index.html">Converse documentation</a>.
-                    </p>
                 </div>
             </div>
         </div>

sass/website.scss

@@ -161,6 +161,7 @@ a:hover, a:focus {
     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;
@@ -191,14 +192,30 @@ section {
 }
 
 .brand-heading {
-    font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
-    font-weight: normal;
-    font-size: 2em;
-    text-align: center;
-    margin-top: 1.5em;
-}
-.brand-heading .icon-conversejs {
-    font-size: 60%;
+    display: inline-flex;
+    align-items: flex-end;
+    font-family: 'Baumans', cursive;
+    font-size: 6em;
+    margin-top: 1em;
+    color: white;
+
+    .converse-svg-logo {
+        height: 1.2em;
+        margin-right: 0.25em;
+        .cls-1 {
+            isolation: isolate;
+        }
+        .cls-2 {
+            opacity: 0.5;
+            mix-blend-mode: multiply;
+        }
+        .cls-3{
+            fill: white;
+        }
+        .cls-4{
+            fill: white;
+        }
+    }
 }
 
 .brand-heading-embedded {
@@ -212,9 +229,6 @@ section {
   .intro {
     padding: 0;
   }
-  .brand-heading {
-    font-size: 80px;
-  }
   .intro-text {
     font-size: 25px;
   }