Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Use future for headings

Browse Source
This commit is contained in:
JC Brand 2018-05-14 13:27:10 +02:00
parent 4bdc9636b4
commit 28bc3a2252
13 changed files with 110 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
css/converse.css
View File

@ -6834,8 +6834,9 @@ body.reset {
font-weight: normal; font-weight: normal;
font-style: normal; } font-style: normal; }
.icon-conversejs { .icon-conversejs {
padding-right: 0.2em; padding-right: 0.5em;
font-family: 'Converse-js'; font-family: 'Converse-js';
font-size: 80%;
speak: none; speak: none;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -6849,6 +6850,13 @@ body.reset {
.icon-conversejs:before { .icon-conversejs:before {
content: "\e600"; } content: "\e600"; }
.converse-brand-heading {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-size: 6em;
font-weight: normal; }
.converse-brand-heading .icon-conversejs {
font-size: 60%; }
#conversejs { #conversejs {
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
@ -6858,6 +6866,10 @@ body.reset {
direction: ltr; direction: ltr;
display: block; display: block;
z-index: 1031; } z-index: 1031; }
#conversejs .brand-heading {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; }
#conversejs .brand-heading .icon-conversejs {
font-size: 80%; }
#conversejs .converse-chatboxes { #conversejs .converse-chatboxes {
z-index: 1031; z-index: 1031;
position: fixed; position: fixed;
@ -6988,6 +7000,8 @@ body.reset {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; } -moz-osx-font-smoothing: grayscale; }
#conversejs .btn { #conversejs .btn {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-weight: normal;
color: #fff; } color: #fff; }
#conversejs .btn .fa { #conversejs .btn .fa {
color: #fff; color: #fff;
@ -7213,7 +7227,7 @@ body.reset {
margin: 0; } margin: 0; }
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
body .brand-heading { body .converse-brand-heading {
font-size: 3.75em; } font-size: 3.75em; }
#conversejs:not(.converse-embedded) .chatbox .chat-body { #conversejs:not(.converse-embedded) .chatbox .chat-body {
@ -7355,6 +7369,7 @@ body.reset {
width: 100%; width: 100%;
height: 100vh; } } height: 100vh; } }
#conversejs .chatbox .chat-title { #conversejs .chatbox .chat-title {
font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
color: white; color: white;
display: block; display: block;
line-height: 20px; line-height: 20px;
@ -7810,6 +7825,7 @@ body.reset {
#conversejs #controlbox .controlbox-section { #conversejs #controlbox .controlbox-section {
margin: 1em 0 0 0; } margin: 1em 0 0 0; }
#conversejs #controlbox .controlbox-section .controlbox-heading { #conversejs #controlbox .controlbox-section .controlbox-heading {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
text-transform: uppercase; } text-transform: uppercase; }
#conversejs #controlbox .dropdown a { #conversejs #controlbox .dropdown a {
@ -7959,6 +7975,7 @@ body.reset {
text-align: left; text-align: left;
padding: 0.3em 0; } padding: 0.3em 0; }
#conversejs .list-container .rooms-toggle { #conversejs .list-container .rooms-toggle {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
display: block; display: block;
color: #666; color: #666;
padding: 0 0 0.5rem 0; } padding: 0 0 0.5rem 0; }
@ -8082,6 +8099,7 @@ body.reset {
text-shadow: 0 1px 0 #FAFAFA; text-shadow: 0 1px 0 #FAFAFA;
margin: 0.75em 0 0.75em 0; } margin: 0.75em 0 0.75em 0; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle { #conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
color: #666; color: #666;
display: block; display: block;
width: 100%; width: 100%;
@ -8292,8 +8310,8 @@ body.reset {
padding: 0.5em; } padding: 0.5em; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
padding: 0.3em 0; font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-weight: bold; } padding: 0.3em 0; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features { #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
width: 100%; } width: 100%; }
@ -8541,7 +8559,11 @@ body.reset {
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
display: block; } display: block; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author { #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
font-weight: bold; } font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-size: 115%; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author .badge {
font-size: 80%;
font-family: "Helvetica", "Arial", sans-serif; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-time { #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
padding-left: 0.25em; padding-left: 0.25em;
color: #8c8c8c; } color: #8c8c8c; }

32
css/inverse.css
View File

@ -6834,8 +6834,9 @@ body.reset {
font-weight: normal; font-weight: normal;
font-style: normal; } font-style: normal; }
.icon-conversejs { .icon-conversejs {
padding-right: 0.2em; padding-right: 0.5em;
font-family: 'Converse-js'; font-family: 'Converse-js';
font-size: 80%;
speak: none; speak: none;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -6849,6 +6850,13 @@ body.reset {
.icon-conversejs:before { .icon-conversejs:before {
content: "\e600"; } content: "\e600"; }
.converse-brand-heading {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-size: 6em;
font-weight: normal; }
.converse-brand-heading .icon-conversejs {
font-size: 60%; }
#conversejs { #conversejs {
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
@ -6858,6 +6866,10 @@ body.reset {
direction: ltr; direction: ltr;
display: block; display: block;
z-index: 1031; } z-index: 1031; }
#conversejs .brand-heading {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; }
#conversejs .brand-heading .icon-conversejs {
font-size: 80%; }
#conversejs .converse-chatboxes { #conversejs .converse-chatboxes {
z-index: 1031; z-index: 1031;
position: fixed; position: fixed;
@ -6988,6 +7000,8 @@ body.reset {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; } -moz-osx-font-smoothing: grayscale; }
#conversejs .btn { #conversejs .btn {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-weight: normal;
color: #fff; } color: #fff; }
#conversejs .btn .fa { #conversejs .btn .fa {
color: #fff; color: #fff;
@ -7213,7 +7227,7 @@ body.reset {
margin: 0; } margin: 0; }
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
body .brand-heading { body .converse-brand-heading {
font-size: 3.75em; } font-size: 3.75em; }
#conversejs:not(.converse-embedded) .chatbox .chat-body { #conversejs:not(.converse-embedded) .chatbox .chat-body {
@ -7406,6 +7420,7 @@ body {
width: 100%; width: 100%;
height: 100vh; } } height: 100vh; } }
#conversejs .chatbox .chat-title { #conversejs .chatbox .chat-title {
font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
color: white; color: white;
display: block; display: block;
line-height: 24px; line-height: 24px;
@ -7880,6 +7895,7 @@ body {
#conversejs #controlbox .controlbox-section { #conversejs #controlbox .controlbox-section {
margin: 1em 0 0 0; } margin: 1em 0 0 0; }
#conversejs #controlbox .controlbox-section .controlbox-heading { #conversejs #controlbox .controlbox-section .controlbox-heading {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
text-transform: uppercase; } text-transform: uppercase; }
#conversejs #controlbox .dropdown a { #conversejs #controlbox .dropdown a {
@ -8134,6 +8150,7 @@ body {
text-shadow: 0 1px 0 #FAFAFA; text-shadow: 0 1px 0 #FAFAFA;
margin: 0.75em 0 0.75em 0; } margin: 0.75em 0 0.75em 0; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle { #conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
color: #666; color: #666;
display: block; display: block;
width: 100%; width: 100%;
@ -8226,6 +8243,7 @@ body {
text-align: left; text-align: left;
padding: 0.3em 0; } padding: 0.3em 0; }
#conversejs .list-container .rooms-toggle { #conversejs .list-container .rooms-toggle {
font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
display: block; display: block;
color: #666; color: #666;
padding: 0 0 0.5rem 0; } padding: 0 0 0.5rem 0; }
@ -8431,8 +8449,8 @@ body {
padding: 0.5em; } padding: 0.5em; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
padding: 0.3em 0; font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-weight: bold; } padding: 0.3em 0; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features { #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
width: 100%; } width: 100%; }
@ -8726,7 +8744,11 @@ body {
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
display: block; } display: block; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author { #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
font-weight: bold; } font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif;
font-size: 115%; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author .badge {
font-size: 80%;
font-family: "Helvetica", "Arial", sans-serif; }
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-time { #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
padding-left: 0.25em; padding-left: 0.25em;
color: #8c8c8c; } color: #8c8c8c; }

20
css/theme.css
View File

@ -16,8 +16,8 @@ h4,
h5, h5,
h6 { h6 {
margin: 0 0 35px; margin: 0 0 35px;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: Futura,Trebuchet MS,Arial,sans-serif;
font-weight: 700; font-weight: normal;
letter-spacing: 1px; letter-spacing: 1px;
} }
p { p {
@ -131,11 +131,19 @@ a:focus {
.outro { .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);
} }
.brand-heading { .brand-heading {
font-size: 2em; font-family: Futura,Trebuchet MS,Arial,sans-serif;
text-align: center; font-weight: normal;
margin-top: 2.5em; font-size: 2em;
text-align: center;
margin-top: 2.5em;
} }
.brand-heading .icon-conversejs {
font-size: 60%;
}
.brand-heading-embedded { .brand-heading-embedded {
margin-top: 1.5em; margin-top: 1.5em;
} }
@ -242,7 +250,7 @@ a:focus {
} }
} }
.btn { .btn {
font-family: FontAwesome; font-family: Futura,Trebuchet MS,Arial,sans-serif;
font-weight: 400; font-weight: 400;
-webkit-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;

6
dev.html
View File

@ -17,7 +17,7 @@
<body class="reset"> <body class="reset">
<div class="content"> <div class="content">
<div class="inner-content"> <div class="inner-content">
<h1 class="brand-heading"><i class="icon-conversejs"></i> Converse</h1> <h1 class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</h1>
</div> </div>
</div> </div>
@ -37,8 +37,8 @@
notify_all_room_messages: [ notify_all_room_messages: [
'discuss@conference.conversejs.org' 'discuss@conference.conversejs.org'
], ],
bosh_service_url: 'http://chat.example.org:5280/http-bind/', // bosh_service_url: 'http://chat.example.org:5280/http-bind/',
// bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
message_archiving: 'always', message_archiving: 'always',
debug: true debug: true
}); });

6
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Converse.js</title> <title>Converse</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; 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="viewport" content="width=device-width, initial-scale=1.0" />
@ -74,7 +74,7 @@
<section class="intro" class="container"> <section class="intro" class="container">
<div class="row"> <div class="row">
<h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1> <h1 class="brand-heading converse-brand-heading"><i class="icon-conversejs"></i>Converse</h1>
<div class="col-md-8 col-md-offset-2"> <div class="col-md-8 col-md-offset-2">
<p class="intro-text">A free and open-source XMPP chat client in your browser</p> <p class="intro-text">A free and open-source XMPP chat client in your browser</p>
<p>Now also available in a fullscreen version. <p>Now also available in a fullscreen version.
@ -105,7 +105,7 @@
<section id="about" class="container content-section text-center"> <section id="about" class="container content-section text-center">
<div class="row"> <div class="row">
<div class="col-lg-8 col-lg-offset-2"> <div class="col-lg-8 col-lg-offset-2">
<h2><strong>Converse.js</strong> is written in Javascript and runs in your browser.</h2> <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>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.js can be configured and used.</a>

1
sass/_chatbox.scss
View File

@ -136,6 +136,7 @@
} }
} }
.chat-title { .chat-title {
font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
color: white; color: white;
display: block; display: block;
line-height: $line-height-large; line-height: $line-height-large;

2
sass/_chatrooms.scss
View File

@ -124,8 +124,8 @@
padding: 0.5em; padding: 0.5em;
.occupants-heading { .occupants-heading {
font-family: $heading-font;
padding: 0.3em 0; padding: 0.3em 0;
font-weight: bold;
} }
.chatroom-features { .chatroom-features {

1
sass/_controlbox.scss
View File

@ -244,6 +244,7 @@
margin: 1em 0 0 0; margin: 1em 0 0 0;
.controlbox-heading { .controlbox-heading {
font-family: $heading-font;
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
text-transform: uppercase; text-transform: uppercase;
} }

25
sass/_core.scss
View File

@ -22,8 +22,9 @@ body.reset {
} }
.icon-conversejs { .icon-conversejs {
padding-right: 0.2em; padding-right: 0.5em;
font-family: 'Converse-js'; font-family: 'Converse-js';
font-size: 80%;
speak: none; speak: none;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -39,6 +40,15 @@ body.reset {
content: "\e600"; content: "\e600";
} }
.converse-brand-heading {
font-family: $heading-font;
font-size: 6em;
font-weight: normal;
.icon-conversejs {
font-size: 60%;
}
}
#conversejs { #conversejs {
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
@ -49,6 +59,13 @@ body.reset {
display: block; display: block;
z-index: 1031; // One more than bootstrap navbar z-index: 1031; // One more than bootstrap navbar
.brand-heading {
font-family: $heading-font;
.icon-conversejs {
font-size: 80%;
}
}
.converse-chatboxes { .converse-chatboxes {
z-index: 1031; // One more than bootstrap navbar z-index: 1031; // One more than bootstrap navbar
position: fixed; position: fixed;
@ -230,6 +247,8 @@ body.reset {
} }
.btn { .btn {
font-family: $heading-font;
font-weight: normal;
color: #fff; color: #fff;
.fa { .fa {
color: #fff; color: #fff;
@ -455,9 +474,9 @@ body.reset {
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
body { body {
.brand-heading { .converse-brand-heading {
font-size: 3.75em; font-size: 3.75em;
} }
} }
#conversejs:not(.converse-embedded) { #conversejs:not(.converse-embedded) {
.chatbox { .chatbox {

7
sass/_messages.scss
View File

@ -136,7 +136,12 @@
display: block; display: block;
.chat-msg-author { .chat-msg-author {
font-weight: bold; font-family: $heading-font;
font-size: 115%;
.badge {
font-size: 80%;
font-family: $normal_font;
}
} }
.chat-msg-time { .chat-msg-time {
padding-left: 0.25em; padding-left: 0.25em;

1
sass/_roomslist.scss
View File

@ -4,6 +4,7 @@
padding: 0.3em 0; padding: 0.3em 0;
.rooms-toggle { .rooms-toggle {
font-family: $heading-font;
display: block; display: block;
color: $text-color; color: $text-color;
padding: 0 0 0.5rem 0; padding: 0 0 0.5rem 0;

1
sass/_roster.scss
View File

@ -66,6 +66,7 @@
&:hover { &:hover {
color: $dark-gray-color; color: $dark-gray-color;
} }
font-family: $heading-font;
color: $text-color; color: $text-color;
display: block; display: block;
width: 100%; width: 100%;

3
sass/_variables.scss
View File

@ -107,6 +107,9 @@ $small-mobile-chat-height: 300px !default;
$font-path: "../fonticons/fonts/" !default; $font-path: "../fonticons/fonts/" !default;
$normal-font: "Helvetica", "Arial", sans-serif;
$heading-font: Futura,Helvetica,Trebuchet MS,Arial,sans-serif !default;
$chatroom-head-color: $red !default; $chatroom-head-color: $red !default;
$chatroom-color-light: $light-red !default; $chatroom-color-light: $light-red !default;
$chatroom-color-dark: $darkest-red !default; $chatroom-color-dark: $darkest-red !default;