Add new sponsor and some website style improvements

css/converse.css

@@ -6883,7 +6883,7 @@ body.reset {
     z-index: 1031;
     position: fixed;
     bottom: 0;
-    height: 2.7rem;
+    height: 3em;
     right: 0; }
   #conversejs ::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */

css/website.css

@@ -117,6 +117,11 @@ a:hover, 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); }
 
+section h2 {
+  color: #E7A151; }
+section h3 {
+  color: #89B7CD; }
+
 .brand-heading {
   font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
   font-weight: normal;
@@ -181,7 +186,9 @@ a:hover, a:focus {
   -moz-animation-timing-function: linear; }
 
 .content-section {
-  padding-top: 100px; }
+  padding-top: 100px;
+  padding-top: 100px;
+  min-height: 100vh; }
 
 .donate-section {
   width: 100%;
@@ -194,7 +201,6 @@ a:hover, a:focus {
 
 @media (min-width: 767px) {
   .content-section {
-    padding-top: 150px;
     padding-bottom: 50px; }
 
   .donate-section {
@@ -304,6 +310,8 @@ ul.features {
   clear: both;
   font-size: 1.4em;
   padding: 2em 0 6em 0; }
+  .sponsors ul {
+    padding: 0; }
 
 .sponsors h2 {
   text-align: center; }

index.html

@@ -5,7 +5,7 @@
     <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" />
-    <meta name="description" content="Converse.js: An XMPP chat client which can be integrated into any website" />
+    <meta name="description" content="Converse: An XMPP chat client which can be integrated into any website" />
     <meta name="author" content="JC Brand" />
     <meta name="keywords" content="xmpp chat webchat converse.js" />
 
@@ -107,7 +107,7 @@
             <div class="col-lg-8 col-lg-offset-2">
                 <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>
+                <p>Take a look at the <a href="/demo">demo page</a> for other examples of how Converse can be configured and used.</a>
 
                 <p>
                     You can connect to any publically accessible <a href="http://xmpp.org" target="_blank" rel="noopener">XMPP/Jabber</a> server,
@@ -193,7 +193,7 @@
                             or <a href="https://mastodon.xyz/@jcbrand" target="_blank" rel="noopener">Mastodon</a>
                         <li>Chat with me via XMPP at <a href="xmpp:jc@opkode.com" class="xmpp JSnocheck" title="XMPP/Jabber">jc@opkode.com</a></li>
                         <li>For technical support, you can ask on <a href="http://stackoverflow.com/questions/tagged/converse.js">Stack Overflow</a>
-                        <li>The Converse.js XMPP chatroom: <a href="xmpp:discuss@conference.conversejs.org" class="xmpp JSnocheck" title="Converse.js chat room">discuss@conference.conversejs.org</a>.</li>
+                        <li>The Converse XMPP chatroom: <a href="xmpp:discuss@conference.conversejs.org" class="xmpp JSnocheck" title="Converse chat room">discuss@conference.conversejs.org</a>.</li>
                         <li>Please file bugs and feature requests on <a target="_blank" rel="noopener" href="https://github.com/jcbrand/converse.js/issues">Github</a>.</li>
                     </ul>
                 </div>
@@ -217,17 +217,19 @@
             <div class="row">
                 <div class="col-lg-8 col-lg-offset-2" style="margin-top: 3em">
                     <div class="sponsors">
-                        <h2>Converse.js is supported by:</h2>
+                        <h2>Converse is supported by:</h2>
                         <ul>
-                            <li><a href="https://www.keycdn.com/" target="_blank" rel="noopener"><img style="height: 3em" src="/logo/keycdn.svg" alt="KeyCDN"></a></li>
-                            <li><a href="https://wikisuite.org" target="_blank" rel="noopener"><img style="height: 4em" src="/logo/wikisuite-white.png" alt="WikiSuite"></a></li>
+                            <li><a href="https://www.keycdn.com/?utm_source=conversejs" target="_blank" rel="noopener"><img style="height: 3em" src="/logo/keycdn.svg" alt="KeyCDN"></a></li>
+                            <li><a href="https://wikisuite.org/?utm_source=conversejs" target="_blank" rel="noopener"><img style="height: 4em" src="/logo/wikisuite-white.png" alt="WikiSuite"></a></li>
+                            <li><a href="https://hostpresto.com/?utm_source=conversejs" target="_blank" rel="noopener"><img style="height: 3em" src="/logo/hostpresto.png" alt="HostPresto"></a></li>
                         </ul>
                     </div>
 
-                    <p class="sponsors-text">Converse.js is a software commons; available at no cost to you or anyone else.
-                       Sponsorships allow us to fund further development and improvements and are greatly appreciated.
-                       If you'd like to sponsor this project, please visit <a href="https://www.patreon.com/jcbrand" target="_blank" rel="noopener">Patreon</a>
-                       or <a href="https://liberapay.com/jcbrand" target="_blank" rel="noopener">Liberapay</a>.
+                    <p class="sponsors-text">Converse is a software commons, available at no cost to you or anyone else.
+                       Sponsorships allow us to fund further development and improvements.
+                       If you'd like to sponsor this project, please visit <a href="https://www.patreon.com/jcbrand" target="_blank" rel="noopener">Patreon</a>,
+                       <a href="https://liberapay.com/jcbrand" target="_blank" rel="noopener">Liberapay</a> or
+                       <a href="http://opkode.com/contact" target="_blank" rel="noopener">contact us</a>.
                     </p>
                 </div>
             </div>

sass/_core.scss

@@ -89,7 +89,7 @@ body.reset {
         z-index: 1031; // One more than bootstrap navbar
         position: fixed;
         bottom: 0;
-        height: 2.7rem;
+        height: 3em;
         right: 0;
     }
 

sass/_website.scss

@@ -113,29 +113,37 @@ a:hover, a:focus {
 .features-section,
 .outro,
 .intro {
-  width: 100%;
-  padding: 100px 0;
-  text-align: center;
-  color: #fff;
+    width: 100%;
+    padding: 100px 0;
+    text-align: center;
+    color: #fff;
 }
 .intro {
-  background: url(images/header.jpg) no-repeat bottom center scroll;
-  background-color: #211018;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  background-size: cover;
-  -o-background-size: cover;
+    background: url(images/header.jpg) no-repeat bottom center scroll;
+    background-color: #211018;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    -o-background-size: cover;
 }
 .features-section {
-  background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #85505f, #384955, #655361);
+    background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #85505f, #384955, #655361);
 }
 .features-section a {
-  color: #82B397;
+    color: #82B397;
 }
 .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);
+    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);
 }
 
+section {
+    h2 {
+        color: #E7A151;
+    }
+    h3 {
+        color: #89B7CD;
+    }
+}
 
 .brand-heading {
     font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
@@ -205,25 +213,26 @@ a:hover, a:focus {
 }
 
 .content-section {
-  padding-top: 100px;
+    padding-top: 100px;
+    padding-top: 100px;
+    min-height: 100vh;
 }
 .donate-section {
-  width: 100%;
-  padding: 50px 0;
-  color: #ffffff;
-  background-color: #211018;
+    width: 100%;
+    padding: 50px 0;
+    color: #ffffff;
+    background-color: #211018;
 }
 .donate-section p.bitcoin-header {
-  margin: 0 0 5px;
+    margin: 0 0 5px;
 }
 @media (min-width: 767px) {
-  .content-section {
-    padding-top: 150px;
-    padding-bottom: 50px;
-  }
-  .donate-section {
-    padding: 100px 0;
-  }
+    .content-section {
+        padding-bottom: 50px;
+    }
+    .donate-section {
+        padding: 100px 0;
+    }
 }
 .btn {
   font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
@@ -332,6 +341,9 @@ ul.features {
     clear: both;
     font-size: 1.4em;
     padding: 2em 0 6em 0;
+    ul {
+        padding: 0;
+    }
 }
 .sponsors h2 {
     text-align: center;