From aa274f41c249d1a76df902ae515ab171d6a123e0 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Wed, 2 Jan 2019 22:26:31 +0100 Subject: [PATCH] Make background darker and add new logo --- css/converse.css | 70 +++++++++-------- css/fullpage.css | 26 ------- dev.html | 11 +-- dist/converse.js | 35 ++++++++- fullscreen.html | 17 +---- sass/_core.scss | 117 ++++++++++++++++------------- sass/_variables.scss | 4 +- src/converse-chatboxviews.js | 7 ++ src/templates/background_logo.html | 45 +++++++++++ 9 files changed, 191 insertions(+), 141 deletions(-) delete mode 100644 css/fullpage.css create mode 100644 src/templates/background_logo.html 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 @@ - -
-
-
-
-
Converse
-
-
-
- +
- - - + +
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 @@ +
+
+
+ + Logo Converse + + + + + + + + + + + + + + + + + + + + + + + + + + + + converse.js +

messaging freedom

+ +
+