diff --git a/css/converse.css b/css/converse.css
index 3dc3cd59f..463cc1dbc 100644
--- a/css/converse.css
+++ b/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;
diff --git a/css/fullpage.css b/css/fullpage.css
deleted file mode 100644
index 094abebe1..000000000
--- a/css/fullpage.css
+++ /dev/null
@@ -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%;
-}
diff --git a/dev.html b/dev.html
index db79df2a5..35604bf02 100644
--- a/dev.html
+++ b/dev.html
@@ -9,22 +9,13 @@
-
-
-
+
-
-
-
+
+
diff --git a/sass/_core.scss b/sass/_core.scss
index ecbf6aef7..6130ec788 100644
--- a/sass/_core.scss
+++ b/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);
-}
+#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);
+ }
-.converse-brand__padding {
- @include make-col-ready();
- @include media-breakpoint-up(md) {
- @include make-col(4);
+ .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;
}
- @include media-breakpoint-up(lg) {
- @include make-col(3);
- }
- @include media-breakpoint-up(xl) {
- @include make-col(2);
- }
- padding: 0;
-}
-.converse-brand__heading {
- @include make-col-ready();
- @include media-breakpoint-up(md) {
- font-size: 4em;
- @include make-col(8);
+ .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;
+ }
}
- @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;
-}
-.converse-brand__text {
- 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;
- 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;
+ }
}
}
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 76f4226c5..a44ea002e 100644
--- a/sass/_variables.scss
+++ b/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;
diff --git a/src/converse-chatboxviews.js b/src/converse-chatboxviews.js
index ca9deb777..085831d0d 100644
--- a/src/converse-chatboxviews.js
+++ b/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();
},
diff --git a/src/templates/background_logo.html b/src/templates/background_logo.html
new file mode 100644
index 000000000..813d23df6
--- /dev/null
+++ b/src/templates/background_logo.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+ converse.js
+ messaging freedom
+
+
+