From 1eb00d3e5d782d8bf4f806afe237445e71961e01 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Thu, 10 Jan 2019 21:11:18 +0100 Subject: [PATCH] CSS/HTML: Nicer styling of branding on the login page --- css/converse.css | 59 +++++++++++++++-------- dist/converse.js | 4 +- sass/_controlbox.scss | 33 +++++-------- sass/_core.scss | 42 +++++++++++++--- sass/_forms.scss | 2 +- src/templates/converse_brand_heading.html | 44 ++++++++--------- src/templates/inverse_brand_heading.html | 5 +- 7 files changed, 116 insertions(+), 73 deletions(-) diff --git a/css/converse.css b/css/converse.css index 7d354731e..69e76db04 100644 --- a/css/converse.css +++ b/css/converse.css @@ -9566,8 +9566,9 @@ body.converse-fullscreen { margin-bottom: 2em; margin-left: -2.7em; word-spacing: 5px; } - #conversejs-bg .converse-brand__text .subdued { - opacity: 0.25; } + +#conversejs-bg .subdued, #conversejs .subdued { + opacity: 0.35; } #conversejs { bottom: 0; @@ -9594,15 +9595,34 @@ body.converse-fullscreen { #conversejs .brand-heading-container { text-align: center; } #conversejs .brand-heading { - font-size: 200%; display: inline-flex; - align-items: flex-end; + flex-direction: row; + align-items: flex-start; font-family: var(--branding-font); - color: var(--link-color); } + color: var(--link-color); + margin-bottom: 1em; } + #conversejs .brand-heading .brand-name { + color: var(--link-color); + display: flex; + flex-direction: column; + align-items: center; + margin-top: -0.5em; } + #conversejs .brand-heading .brand-name__text { + font-size: 120%; + vertical-align: text-bottom; } + #conversejs .brand-heading .byline { + margin: 0; + font-family: var(--heading-font); + font-size: 0.25em; + opacity: 0.55; + margin-left: -4em; + word-spacing: 5px; + margin-top: -15px; } #conversejs .brand-heading .converse-svg-logo { - height: 1.2em; + color: var(--link-color); + height: 1.5em; margin-right: 0.25em; - margin-bottom: -0.3em; } + margin-bottom: -0.25em; } #conversejs .brand-heading .converse-svg-logo .cls-1 { isolation: isolate; } #conversejs .brand-heading .converse-svg-logo .cls-2 { @@ -10063,7 +10083,7 @@ body.converse-fullscreen { #conversejs form.converse-form { background: white; - padding: 1.5em; } + padding: 1.2rem; } #conversejs form.converse-form legend { color: var(--text-color); font-size: 125%; @@ -10786,10 +10806,6 @@ body.converse-fullscreen { padding-bottom: 1em; } #conversejs #controlbox .conn-feedback p.feedback-subject.error { font-weight: bold; } - #conversejs #controlbox .brand-heading-container .brand-heading { - text-align: center; } - #conversejs #controlbox .brand-heading-container .brand-name { - font-size: 120%; } #conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel { padding-top: 0; padding-bottom: 0; } @@ -11009,12 +11025,11 @@ body.converse-fullscreen { #conversejs.converse-mobile #controlbox .brand-heading-container { flex: 0 0 100%; max-width: 100%; - margin-bottom: 1em; - text-align: center; } + margin-top: 5em; + margin-bottom: 1em; } #conversejs.converse-fullscreen #controlbox .brand-heading-container .brand-heading, #conversejs.converse-mobile #controlbox .brand-heading-container .brand-heading { - font-size: 150%; - font-size: 600%; + font-size: 500%; padding: 0.7em 0 0 0; opacity: 0.8; color: var(--brand-heading-color); } @@ -11133,9 +11148,15 @@ body.converse-fullscreen { #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) { display: none; } #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane { - display: block; } - #conversejs.converse-overlayed .converse-chatboxes .chatbox .box-flyout { - margin-left: 30px; } } + display: block; } } + +#conversejs.converse-overlayed .brand-heading { + padding-top: 0.8rem; + padding-left: 0.8rem; + width: 100%; } + +#conversejs.converse-overlayed .converse-svg-logo { + height: 1em; } #conversejs #converse-modals .set-xmpp-status { margin: 1em; } diff --git a/dist/converse.js b/dist/converse.js index aeb5cfd8e..181fc3e0f 100644 --- a/dist/converse.js +++ b/dist/converse.js @@ -93077,7 +93077,7 @@ return __p var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")}; module.exports = function(o) { var __t, __p = ''; -__p += '\n\n
\n \n \n converse\n \n
\n\n'; +__p += '\n\n \n \n \n converse.js\n \n \n\n'; return __p }; @@ -93624,7 +93624,7 @@ return __p var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")}; module.exports = function(o) { var __t, __p = '', __e = _.escape; -__p += '\n
\n
\n

\n \n converse\n

\n

' + +__p += '\n

\n
\n

\n \n \n converse.js\n

messaging freedom

\n \n

\n

' + __e(o.version_name) + '

\n

Open Source XMPP chat client brought to you by Opkode

\n

Translate it into your own language

\n
\n
\n'; return __p diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss index 913312698..212ae7b1a 100644 --- a/sass/_controlbox.scss +++ b/sass/_controlbox.scss @@ -164,15 +164,6 @@ } } - .brand-heading-container { - .brand-heading { - text-align: center; - } - .brand-name { - font-size: 120%; - } - } - #converse-login-panel, #converse-register-panel { padding-top: 0; padding-bottom: 0; @@ -486,11 +477,10 @@ .brand-heading-container { @include make-col(12); + margin-top: 5em; margin-bottom: 1em; - text-align: center; .brand-heading { - font-size: 150%; - font-size: 600%; + font-size: 500%; padding: 0.7em 0 0 0; opacity: 0.8; color: var(--brand-heading-color); @@ -605,14 +595,15 @@ } } } - #conversejs.converse-overlayed { - .converse-chatboxes { - .chatbox { - .box-flyout { - margin-left: 30px; // Counteracts Bootstrap margins, but - // not clear why needed... - } - } - } +} + +#conversejs.converse-overlayed { + .brand-heading { + padding-top: 0.8rem; + padding-left: 0.8rem; + width: 100%; + } + .converse-svg-logo { + height: 1em; } } diff --git a/sass/_core.scss b/sass/_core.scss index 6effb6572..ddddc01c6 100644 --- a/sass/_core.scss +++ b/sass/_core.scss @@ -75,9 +75,12 @@ body.converse-fullscreen { margin-left: -2.7em; word-spacing: 5px; } - .subdued { - opacity: 0.25; - } + } +} + +#conversejs-bg, #conversejs { + .subdued { + opacity: 0.35; } } @@ -123,16 +126,41 @@ body.converse-fullscreen { } .brand-heading { - font-size: 200%; display: inline-flex; - align-items: flex-end; + flex-direction: row; + align-items: flex-start; font-family: var(--branding-font); color: var(--link-color); + margin-bottom: 1em; + + .brand-name { + color: var(--link-color); + display: flex; + flex-direction: column; + align-items: center; + margin-top: -0.5em; + } + + .brand-name__text { + font-size: 120%; + vertical-align: text-bottom; + } + + .byline { + margin: 0; + font-family: var(--heading-font); + font-size: 0.25em; + opacity: 0.55; + margin-left: -4em; + word-spacing: 5px; + margin-top: -15px; + } .converse-svg-logo { - height: 1.2em; + color: var(--link-color); + height: 1.5em; margin-right: 0.25em; - margin-bottom: -0.3em; + margin-bottom: -0.25em; .cls-1 { isolation: isolate; } diff --git a/sass/_forms.scss b/sass/_forms.scss index daf135336..be7444ce0 100644 --- a/sass/_forms.scss +++ b/sass/_forms.scss @@ -62,7 +62,7 @@ &.converse-form { background: white; - padding: 1.5em; + padding: 1.2rem; legend { color: var(--text-color); font-size: 125%; diff --git a/src/templates/converse_brand_heading.html b/src/templates/converse_brand_heading.html index 7ff49c5e1..65cbef222 100644 --- a/src/templates/converse_brand_heading.html +++ b/src/templates/converse_brand_heading.html @@ -1,26 +1,26 @@ -
- - converse - -
+ + + + converse.js + + diff --git a/src/templates/inverse_brand_heading.html b/src/templates/inverse_brand_heading.html index 8da4c4eb4..b1fbded28 100644 --- a/src/templates/inverse_brand_heading.html +++ b/src/templates/inverse_brand_heading.html @@ -20,7 +20,10 @@ - converse + + converse.js +

messaging freedom

+

{{{o.version_name}}}

Open Source XMPP chat client brought to you by Opkode