Make background darker and add new logo

css/converse.css

@@ -9299,7 +9299,7 @@ readers do not read off random characters that represent icons */
 #conversejs .invisible {
   visibility: hidden !important; }
 
-#conversejs, .converse-content {
+#conversejs, #conversejs-bg, .converse-fullscreen {
   --subdued-color: #A8ABA1;
   --subdued-color-lighten-25-percent: #e6e7e4;
   --chat-status-online: #3AA569;
@@ -9313,7 +9313,7 @@ readers do not read off random characters that represent icons */
   --link-color-darken-20-percent: #345566;
   --link-color-lighten-10-percent: #79a5ba;
   --dark-link-color: #206485;
-  --global-background-color: #578EA9;
+  --global-background-color: #397491;
   --inverse-link-color: white;
   --text-shadow-color: #FAFAFA;
   --text-color: #666;
@@ -9480,26 +9480,28 @@ readers do not read off random characters that represent icons */
   --list-item-open-color: #444;
   --list-item-open-hover-color: #444; }
 
-body.reset {
-  margin: 0; }
+body.converse-fullscreen {
+  margin: 0;
+  background-color: var(--global-background-color); }
 
-.converse-brand {
+#conversejs-bg .converse-brand {
   display: flex;
   justify-content: space-between;
+  margin-top: 15vh;
   -webkit-animation-name: fadein;
   -moz-animation-name: fadein;
   animation-name: fadein;
   -webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
-  -webkit-animation-duration: 750ms;
-  -moz-animation-duration: 750ms;
-  animation-duration: 750ms;
+  -webkit-animation-duration: 5s;
+  -moz-animation-duration: 5s;
+  animation-duration: 5s;
   -webkit-animation-timing-function: ease;
   -moz-animation-timing-function: ease;
   animation-timing-function: ease; }
 
-.converse-brand__padding {
+#conversejs-bg .converse-brand__padding {
   position: relative;
   width: 100%;
   min-height: 1px;
@@ -9507,57 +9509,63 @@ body.reset {
   padding-left: 15px;
   padding: 0; }
   @media (min-width: 768px) {
-    .converse-brand__padding {
+    #conversejs-bg .converse-brand__padding {
       flex: 0 0 33.33333%;
       max-width: 33.33333%; } }
   @media (min-width: 992px) {
-    .converse-brand__padding {
+    #conversejs-bg .converse-brand__padding {
       flex: 0 0 25%;
       max-width: 25%; } }
   @media (min-width: 1200px) {
-    .converse-brand__padding {
+    #conversejs-bg .converse-brand__padding {
       flex: 0 0 16.66667%;
       max-width: 16.66667%; } }
 
-.converse-brand__heading {
+#conversejs-bg .converse-brand__heading {
   position: relative;
   width: 100%;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
-  padding: 0; }
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  margin: auto; }
   @media (min-width: 768px) {
-    .converse-brand__heading {
+    #conversejs-bg .converse-brand__heading {
       font-size: 4em;
       flex: 0 0 66.66667%;
       max-width: 66.66667%; } }
   @media (min-width: 992px) {
-    .converse-brand__heading {
+    #conversejs-bg .converse-brand__heading {
       font-size: 5em;
       flex: 0 0 75%;
       max-width: 75%; } }
   @media (min-width: 1200px) {
-    .converse-brand__heading {
+    #conversejs-bg .converse-brand__heading {
       font-size: 6em;
       flex: 0 0 83.33333%;
       max-width: 83.33333%; } }
+  #conversejs-bg .converse-brand__heading svg {
+    margin-top: 0.3em; }
 
-.converse-brand__text {
+#conversejs-bg .converse-brand__text {
+  color: #ffffff;
   font-family: var(--branding-font);
   font-weight: normal;
-  width: 50%;
-  margin: auto;
-  margin-top: 10%;
-  text-align: center; }
-
-.converse-brand__byline {
-  font-size: var(--font-size-small);
-  width: 50%;
-  margin: auto;
-  text-align: center; }
-  .converse-brand__byline a {
-    text-decoration: none;
-    color: var(--chatroom-head-color-lighten-25-percent); }
+  text-align: center;
+  font-size: 140%;
+  margin-left: 0.2em; }
+  #conversejs-bg .converse-brand__text .byline {
+    margin: 0;
+    font-family: var(--heading-font);
+    font-size: 0.3em;
+    opacity: 0.55;
+    margin-bottom: 2em;
+    margin-left: -2.7em;
+    word-spacing: 5px; }
+  #conversejs-bg .converse-brand__text .subdued {
+    opacity: 0.25; }
 
 #conversejs {
   bottom: 0;

css/fullpage.css

@@ -1,26 +0,0 @@
-body {
-    font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: #ffffff;
-    background-color: #578EA9;
-}
-.brand-heading {
-    font-size: 600%;
-    margin-left: -10%;
-}
-.icon-conversejs {
-    font-size: 88%;
-}
-.brand-heading div.content {
-    height: 100vh;
-    width: 100vw;
-    position: fixed;
-    background-color: #578EA9;
-}
-.brand-heading div.content .inner-content {
-    text-align: center;
-    padding: 7%;
-}
-p.no-chats {
-    padding-right: 10%;
-    font-size: 120%;
-}

dev.html

@@ -9,22 +9,13 @@
     <meta name="author" content="JC Brand" />
     <meta name="keywords" content="xmpp chat webchat converse.js" />
     <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
-    <link type="text/css" rel="stylesheet" media="screen" href="css/fullpage.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
     <script src="3rdparty/libsignal-protocol-javascript/dist/libsignal-protocol.js"></script>
     <script src="dist/converse.js"></script>
 </head>
 
 <body class="reset">
-    <div class="converse-content">
-        <div class="inner-content converse-brand row">
-            <div class="converse-brand__padding"></div>
-            <div class="converse-brand__heading">
-                <div class="converse-brand__text"><i class="icon-conversejs"></i>Converse</div>
-            </div>
-        </div>
-    </div>
-
+<div id="conversejs-bg"></div>
 <script>
     converse.initialize({
         auto_away: 300,

fullscreen.html

@@ -8,19 +8,11 @@
     <script type="text/javascript" src="inverse-analytics.js"></script>
     <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=5" style="border:0;" alt="" /></p></noscript>
     <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
-    <link type="text/css" rel="stylesheet" media="screen" href="css/fullpage.css" />
     <script src="3rdparty/libsignal-protocol.js"></script>
     <script src="dist/converse.js"></script>
 </head>
-<body class="reset">
-    <div class="converse-content" style="display:none">
-        <div class="inner-content converse-brand row">
-            <div class="converse-brand__padding"></div>
-            <div class="converse-brand__heading">
-                <div class="converse-brand__text"><i class="icon-conversejs"></i>Converse</div>
-            </div>
-        </div>
-    </div>
+<body class="converse-fullscreen">
+<div id="conversejs-bg"></div>
 <script>
     /*
     @licstart
@@ -49,7 +41,6 @@
 
     For more information, please refer to <http://unlicense.org/>
     @licend
-
     */
     converse.initialize({
         authentication: 'login',
@@ -58,10 +49,6 @@
         bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
         message_archiving: 'always',
         view_mode: 'fullscreen'
-    }).then(function () {
-        setTimeout(function () {
-            document.querySelector('.converse-content').style = '';
-        }, 1000);
     });
 </script>
 </body>

sass/_core.scss

@@ -6,67 +6,78 @@
     @include animation-timing-function(ease);
 }
 
-body.reset {
+body.converse-fullscreen {
     margin: 0;
+    background-color: var(--global-background-color);
 }
 
-.converse-brand {
-    display: flex;
-    justify-content: space-between;
-    @include animation-name(fadein);
-    @include animation-fill-mode(forwards);
-    @include animation-duration(750ms);
-    @include animation-timing-function(ease);
-}
-
-.converse-brand__padding {
-    @include make-col-ready();
-    @include media-breakpoint-up(md) {
-        @include make-col(4);
-    }
-    @include media-breakpoint-up(lg) {
-        @include make-col(3);
-    }
-    @include media-breakpoint-up(xl) {
-        @include make-col(2);
+#conversejs-bg {
+    .converse-brand {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 15vh;
+        @include animation-name(fadein);
+        @include animation-fill-mode(forwards);
+        @include animation-duration(5s);
+        @include animation-timing-function(ease);
     }
-    padding: 0;
-}
 
-.converse-brand__heading {
-    @include make-col-ready();
-    @include media-breakpoint-up(md) {
-        font-size: 4em;
-        @include make-col(8);
-    }
-    @include media-breakpoint-up(lg) {
-        font-size: 5em;
-        @include make-col(9);
-    }
-    @include media-breakpoint-up(xl) {
-        font-size: 6em;
-        @include make-col(10);
+    .converse-brand__padding {
+        @include make-col-ready();
+        @include media-breakpoint-up(md) {
+            @include make-col(4);
+        }
+        @include media-breakpoint-up(lg) {
+            @include make-col(3);
+        }
+        @include media-breakpoint-up(xl) {
+            @include make-col(2);
+        }
+        padding: 0;
     }
-    padding: 0;
-}
 
-.converse-brand__text {
-    font-family: var(--branding-font);
-    font-weight: normal;
-    width: 50%;
-    margin: auto;
-    margin-top: 10%;
-    text-align: center;
-}
+    .converse-brand__heading {
+        @include make-col-ready();
+        @include media-breakpoint-up(md) {
+            font-size: 4em;
+            @include make-col(8);
+        }
+        @include media-breakpoint-up(lg) {
+            font-size: 5em;
+            @include make-col(9);
+        }
+        @include media-breakpoint-up(xl) {
+            font-size: 6em;
+            @include make-col(10);
+        }
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        margin: auto;
+        svg {
+            margin-top: 0.3em;
+        }
+    }
 
-.converse-brand__byline {
-    font-size: var(--font-size-small);
-    width: 50%;
-    margin: auto;
-    text-align: center;
-    a {
-        text-decoration: none;
-        color: var(--chatroom-head-color-lighten-25-percent);
+    .converse-brand__text {
+        color: #ffffff;
+        font-family: var(--branding-font);
+        font-weight: normal;
+        text-align: center;
+        font-size: 140%;
+        margin-left: 0.2em;
+        .byline {
+            margin: 0;
+            font-family: var(--heading-font);
+            font-size: 0.3em;
+            opacity: 0.55;
+            margin-bottom: 2em;
+            margin-left: -2.7em;
+            word-spacing: 5px;
+        }
+        .subdued {
+            opacity: 0.25;
+        }
     }
 }
 

sass/_variables.scss

@@ -1,7 +1,7 @@
 $mobile_landscape_height: 450px !default;
 $mobile_portrait_length: 480px !default;
 
-#conversejs, .converse-content {
+#conversejs, #conversejs-bg, .converse-fullscreen {
     --subdued-color: #A8ABA1;
     --subdued-color-lighten-25-percent: #e6e7e4; // lighten(#A8ABA1, 25%)
 
@@ -19,7 +19,7 @@ $mobile_portrait_length: 480px !default;
     --link-color-darken-20-percent: #345566; // darken($light-blue, 20%)
     --link-color-lighten-10-percent: #79a5ba; // lighten($light-blue, 10%)
     --dark-link-color: #206485; // $dark-blue
-    --global-background-color: #578EA9; // $light-blue
+    --global-background-color: #397491; // dark blue
 
     --inverse-link-color: white;
     --text-shadow-color: #FAFAFA;

src/converse-chatboxviews.js

@@ -9,6 +9,7 @@ import "backbone.nativeview";
 import "backbone.overview";
 import converse from "@converse/headless/converse-core";
 import tpl_avatar from "templates/avatar.svg";
+import tpl_background_logo from "templates/background_logo.html";
 import tpl_chatboxes from "templates/chatboxes.html";
 
 const { Backbone, _, utils } = converse.env;
@@ -105,6 +106,12 @@ converse.plugins.add('converse-chatboxviews', {
 
             initialize () {
                 this.model.on("destroy", this.removeChat, this);
+                const bg = document.getElementById('conversejs-bg');
+                if (bg && !bg.innerHTML.trim()) {
+                    bg.innerHTML = tpl_background_logo();
+                }
+                const body = document.querySelector('body');
+                body.classList.add(`converse-${_converse.view_mode}`);
                 this.el.classList.add(`converse-${_converse.view_mode}`);
                 this.render();
             },

src/templates/background_logo.html

@@ -0,0 +1,45 @@
+<div class="inner-content converse-brand row">
+    <div class="converse-brand__padding"></div>
+    <div class="converse-brand__heading">
+        <svg height="200px"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="0 0 364 364"
+            version="1.1">
+            <title>Logo Converse</title>
+            <defs>
+                <linearGradient id="gradient" x1="92.14" y1="27.64" x2="267.65" y2="331.62" gradientUnits="userSpaceOnUse">
+                    <stop offset="0" stop-color="#fff1d1"/>
+                    <stop offset="0.05" stop-color="#fae8c1"/>
+                    <stop offset="0.15" stop-color="#f0d5a1"/>
+                    <stop offset="0.27" stop-color="#e7c687"/>
+                    <stop offset="0.4" stop-color="#e1bb72"/>
+                    <stop offset="0.54" stop-color="#dcb264"/>
+                    <stop offset="0.71" stop-color="#daad5c"/>
+                    <stop offset="1" stop-color="#d9ac59"/>
+                </linearGradient>
+                <filter id="shadow">
+                    <feGaussianBlur in="SourceAlpha" stdDeviation="2.3" result="blur1"/>
+                    <feOffset in="blur1" dx="3" dy="3" result="blur2"/>
+                    <feColorMatrix in="blur2" type="matrix" result="blur3"
+                        values="1 0 0 0 0.1
+                                0 1 0 0 0.1
+                                0 0 1 0 0.1
+                                0 0 0 1 0"/>
+                    <feMerge>
+                        <feMergeNode in="blur3"/>
+                        <feMergeNode in="SourceGraphic"/>
+                    </feMerge>
+                </filter>
+            </defs>
+            <g filter="url(#shadow)">
+                <path 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" fill="#d9ac59"/>
+                <path 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" fill="url(#gradient)"/>
+            </g>
+        </svg>
+        <span class="converse-brand__text">
+            <span>converse<span class="subdued">.js</span></span>
+            <p class="byline">messaging freedom</p>
+        </span>
+    </div>
+</div>